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.
Thanks for the demo. Good to see that it's working at least with system preferences, I added the light mixin, and enabled it in a couple selectors, but this doesn't seem to have changed anything..
BTW, I'm trying to use this approach to default the site to the light theme when using old browsers, so I figured I wouldn't need the light mixin.