colors
colors copied to clipboard
Support System Color Scheme Preference
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) 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: #26
Thank you for doing this! I really like that it allows compatibility between Pico and Radix :100:
javascript rules.