colors icon indicating copy to clipboard operation
colors copied to clipboard

Support System Color Scheme Preference

Open tubbo opened this issue 2 years ago • 2 comments

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

tubbo avatar Jan 23 '23 19:01 tubbo

Thank you for doing this! I really like that it allows compatibility between Pico and Radix :100:

Zwyx avatar Jan 24 '23 05:01 Zwyx

javascript rules.

tubbo avatar Mar 14 '23 00:03 tubbo