Hello darkness, my old friend | Johan Driessen

Hello darkness, my old friend

If you are reading this on a computer[1] with a dark system theme, you might notice that this blog now also has a dark theme. Although dark themes to be all the craze nowadays, I’ve been using dark themes for quite some time, and I’ve been wanting to implement a dark theme option for my blog since forever. But I could never decide on wether it was to be something that would change automatically according to the time of day, or if the sun was up or not, or something the visitor could toggle.

Well, as it turns out, while I have been procasticating, the browser vendors have solved the problem for me! Earlier this year a new CSS media query was introduced: prefers-color-scheme.

This little gem equals dark if the system has a dark color scheme, and light otherwise. And it is supported by the latest versions of Firefox, Chrome, Safari and even Edge[2]. It works something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Default color scheme */
body {
    background-color: #fff;
    color: #000;
}

/* Color scheme for dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #555;
    }
}

If the browser does not support prefers-color-scheme, or if it has a preferred color scheme other than “dark” (i.e. light), it will just ignore the overrides in the media query. So this is basically all I needed to do (well, I had to make a few more changes) to make the theme of the site follow the system theme. Sweet!

  1. 1.A smartphone is a computer. ↩
  2. 2.According to caniuse.com ↩