jmtd → log → dark mode

A few weeks ago I added a “dark mode” to this site. I’d been planning to do it for a while but hadn’t the time to look into how it worked. In the end it was simpler than I thought: the the hard part was choosing colours I liked.

I now think I prefer the dark theme; I might make it the default.

I was pleasantly surprised to find that the crux of the technical side was to define “alternate stylesheets”, something I was playing around with 20 years ago. If your browser supports it (Firefox does at least: View → Page Style) you can select one of “dark”, “light” or “default”, the last of which follows what your OS settings/preferences are.

The last puzzle piece was a CSS media type query prefers-color-scheme to activate stanzas of CSS depending on the browser/OS light/dark preference. There is some awkwardness around this which is mitigated in my case by using a CSS pre-processor, in my case Sass.