Damn my laziness. If you happen to run macOS Mojave or iOS 13, you might’ve noticed that I added support for dark mode quite a while back. Silly ’ol me didn’t write about it, even though I was quite happy with myself for utilizing CSS custom properties to simplify the theming. Both Chris Ferdinandi and Jeremy Keith beat me to it (or rather, their posts got me to finally write at least something about it).
Prefer dark mode
In the words of Mozilla Developer Network, the prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme. The spec is part of Media Queries Level 5 with a status of “Editors’s Draft” as of writing this post.
@media (prefers-color-scheme: dark) {
/* Dark styles goes here */
}
I’m just glad that we’re (mostly?) past vendor prefixes at this point.
The power of CSS custom properties
To keep all things related to dark vs. light themes in one place, I leveraged the power of CSS custom properties. All colors that I use across the site is residing in a variables collection; /css/00_variables.css.
:root {
color-scheme: light dark;
--body-background: hsl(45, 40%, 94%);
--body-text: hsl(0, 0%, 20%);
}
@media only screen and (prefers-color-scheme: dark) {
:root {
--body-background: hsl(0, 0%, 20%);
--body-text: hsl(45, 40%, 94%);
}
}
This lets me keep only one instance of prefers-color-scheme: dark around, which is nice. All my other stylesheets just contain references to the custom properties.
body {
background-color: var(--body-background);
color: var(--body-text);
}
If you already utilize the cascade to its full potential, which luckily I have, you really shouldn’t need to change styles much. One such instance is the use of currentColor property value.