ITADN

Support System Color Scheme Preference

#27Pull Requesttubbo 创建于 2023-01-23
T
tubbocommented
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: #26
合并状态:未合并 2 条评论