Support System Color Scheme Preference #27
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
|
Thank you for doing this! I really like that it allows compatibility between Pico and Radix 💯 |
|
javascript rules. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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- themeattribute 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) 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-themewill still be available in${scale}.cssfiles, but the "classless" variants that use data-attributes are now available in${scale}.classless.cssfiles.Resolves: #26