perfect-things / ui

Perfect UI components
http://ui.perfectthings.dev
GNU General Public License v3.0
17 stars 1 forks source link

reevaluate light-dark mode switching #190

Closed tborychowski closed 6 months ago

tborychowski commented 6 months ago

based on this

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

:root {
  &:has(input[name="color-scheme"][value="light dark"]:checked) {
    color-scheme: light dark;
  }
  &:has(input[name="color-scheme"][value="light"]:checked) {
    color-scheme: light;
  }
  &:has(input[name="color-scheme"][value="dark"]:checked) {
    color-scheme: dark;
  }
}

https://codepen.io/web-dot-dev/pen/zYXdRKW

https://www.bram.us/2024/04/21/css-color-scheme-dependent-colors-with-light-dark/