-
Notifications
You must be signed in to change notification settings - Fork 64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to use with prefers-color-scheme
?
#26
Comments
Also thinking about this. At the moment, Radix outputs things this way: :root {
/* variables for light theme */
}
.dark-theme {
/* variables for dark theme */
} So by default it's light, and if we apply the NextJS ( :root {
/* variables for light theme */
}
@media (prefers-color-scheme: dark) {
:root {
/* variables for dark theme */
}
} Which works very well to set the correct theme based on OS preferences. And doesn't require JavaScript. So what Radix could do to combine the best of both, is this: :root {
/* variables for light theme */
}
@media (prefers-color-scheme: dark) {
:root {
/* variables for dark theme */
}
}
.light-theme {
/* variables for light theme */
}
.dark-theme {
/* variables for dark theme */
} This way, when the page loads, the correct theme is selected based on OS preferences (even if the user has JavaScript disabled). And then, JavaScript could read local storage and apply It's a bit annoying to have to repeat the variables declaration, there might be other ways ( EDIT: this is basically what PicoCSS does, with only three blocks instead of four: [data-theme=light],
:root:not([data-theme=dark]) {
/* variables for light theme */
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
/* variables for dark theme */
}
}
[data-theme=dark] {
/* variables for dark theme */
} Clever! |
Thanks a lot @Zwyx for taking the time to investigate! @vladmoroz @colmtuite would you be open to supporting this? I can work on a PR if it has a chance to be merged :) |
Currently, Radix Colors does not easily support the concept of a machine's own preference for dark/light mode. This poses a problem when trying to write CSS for dark mode without copying a whole bunch of variable definitions around. Inspired by the way Pico CSS handles things, and allowing compatibility between the two, this commit changes how dark mode is enabled for the document element by using a `data- theme` attribute rather than a class name. This attribute can be set to either "dark" or "light", and uses some clever CSS trickery (inspired by [@Zwyx's comment about Pico](https://github.com/radix-ui/colors/ issues/26#issuecomment-1375542488)) to achieve automatically setting color variables to the right settings when the system preference for dark or light mode is set. To maintain backwards compatibility, these new variants are built using a different file naming convention. The CSS with `.dark-theme` will still be available in `${scale}.css` files, but the "classless" variants that use data-attributes are now available in `${scale}.classless.css` files. Resolves: radix-ui#26
I'd like to toggle the dark theme depending on the browser setting, which can be accessed using prefers-color-scheme.
What's the recommended way of doing that?
The text was updated successfully, but these errors were encountered: