Commits on Jan 23, 2023

1. 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](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

   

   tubbo committed Jan 23, 2023
   Configuration menu

   • View commit details
   • Copy full SHA for 54ba276
   • Browse repository at this point

   Copy the full SHA

   54ba276 View commit details

   Browse the repository at this point in the history