Due to the fact, that nowadays everybody is talking about Dark Modes for Browsers and Operating Systems, in order to save battery or for easier reading (uhh, really?), I decided my blog should support that.
Starting point is the new media query
prefers-color-scheme, which is actually supported by all modern browsers.
My first read was Tom Brow’s Dark mode in a website with CSS, where he shows how to use the media query. Simplified, this is it, assuming the light version is the default:
To support the automatic browser/OS-based automatic switch in Hexo, where Stylus is used, I had to change some template files. First the
// existing color variables
Next step was to change the
_extend.styl, where some Stylus variables are defining complete blocks to extend. Here I had to supplement all lines, where something mode-dependend was defined, by adding the new
prefers-dark media query and beneath the new ‘dark’ equivalence of the style:
The same changes I had to do in every template
styl file, where one of the colors or other mode dependent style was used. For example:
This will be rendered as:
Please note the use of
filter:brightness() in the example. It is always advisable to darken the images too, because they can really pop out on dark backgrounds.