Skip to content

Interesting approach to setting light/dark mode values in CSS.

css
/* Defines ON and OFF. This is where the magic happens */
:root {
--ON: initial;
--OFF: ;
}
/* Sets the default mode (dark) */
.default-mode {
--dark: var(--ON);
--light: var(--OFF);
}
/* If the user chose a color scheme on their OS, browser */
@media (prefers-color-scheme: light) {
.default-mode {
--dark: var(--OFF);
--light: var(--ON);
}
}
/* Now we can set the dark and light values in the same place */
.button {
background: var(--dark, black) var(--light, white);
color: var(--dark, white) var(--light, black);
}

โ€” ยท Discuss on Twitter