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.
Technique
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:
1 | body { |
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 _variables.styl
:
1 | // 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:
1 | $base-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:
1 | #mobile-nav-header |
This will be rendered as:
1 | #mobile-nav-header { |
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 also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
Webmentions
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...
Comments