Hexo and the Dark Mode
First approach to implement 'prefers-color-scheme'
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:
Pimping CSS for automatic switching
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.
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention, or by leaving a good old comment with your GitHub account.
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...