This is a Sass mixin to handle a 3-way dark mode. It relies on a data-theme
attribute on your <html>
element with a value of light
or dark
. If data-theme
is absent (i.e. it's neither light
nor dark
), the system's preferred mode is used.
body {
// matches data-theme="light" or data-theme="auto" with system instructing light mode
@include light {
background: white;
color: black;
}
// matches data-theme="dark" or data-theme="auto" with system instructing dark mode
@include dark {
background: black;
color: white;
}
}
See the example above on sassed
Caveat: This mixin targets modern browsers which support the :where()
pseudo selector. There is an older revision of this Gist with more caveats, but also with support for older browsers, which you can find here.
is it possible to write your styles with this such that in root you are defining surface, ink, and brand color variables and then within each style only referring to the variables, or do you have to repeat color conversions with these mixins in every style that has a color?
for a toy example,
We can imagine other stylesheets might use these variables to set colors. It would be nice if we only needed to bring in the light/dark mixin once, rather than having to keep two definitions for colors in every style in addition to this root one. (although we might still want to bring it in sometimes, for special color definitions)