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.
@tandy-1000 Pretty sure you need to @include light mixin additionally to each selector location the dark mixin appears, thats how I do it. If you check with your system preferences. Your site is working properly for system prefers color scheme, but the toggle only controls the styles if you include the light mixin. Meaning you dont have the light styles and your computer is probably currently set to dark.
Hope this helps.
Also you seem to be setting the data-theme attr on the body, the sass is for root: ->
<html>
tag"The :root pseudo-class represents an element that is the root of the document. In HTML, this is always the HTML element. "
Defaulting to light can be done by hard coding in the
<html data-theme="light">
and fixing your js to target html instead of body