Adding dark mode to my blog

Being the typical zoomer that I am, dark mode has become an essential component of my digital experience. Over the many years of late-night gaming and the early onset of myopia from staring at too many screens, the blinding effect of the white backgrounds eventually pushed me into more and more dark-themed applications. I'm writing this blog post on a dark-themed computer, running a dark-themed terminal emulator running a dark-themed neovim instance. Even once this post is finished, I'll double check it on my dark-themed browser, before swapping to my dark-themed phone and making sure that things look fine on there.

My love of dark modes has extended into other applications as well. GitHub has its dark-mode set on by default for me, as does Sourcehut and YouTube. DuckDuckGo because my primary search engine partly because it gave me easy access to a dark-mode that I could never get working on Google. I stopped using the Gmail web client last year in favour of terminal-based alternatives partly because I could never get dark-mode to work properly on it.

All of this, and until a little over a week ago, I only had a light theme on my blog. Scandalous.

The theme that I use for this site (which when I finally publish it will be able to be found here) is based on insipx's Ergo theme, which is in turn based on svbtle. It's a lovely minimal theme, but unfortunately it only has a light theme.

As mentioned above, there are a number of websites which I use with dark-mode enabled, and surely I could just pick one and do what they do? Well unfortunately for me (but not unfortunately for this post), most of them require local storage of some form in order to retain your mode between sessions. Changed computers or browsers? That's a revision back to the realm of light-mode for you. Opened up a private browsing window? Better hope they've somehow tracked you through there before your eyes begin to burn.

Even some of my favourite blogs (such as fasterthanlime) which have a dark-mode use local storage to activate it, and it can extremely temperamental between sessions.

Fortunately I can continue to avoid JavaScript on my website thanks to the @media(prefers-color-scheme) feature. As stated on the MSDN, the prefers-color-scheme media feature can be used to detect if the user has requested a light or dark colour scheme, and allows you to override CSS variables accordingly.

This is actually what Sourcehut does to set its colour scheme, and as such I've based my dark theme on theirs. I think the blue accent is much more suited to a dark background than red, and vice-versa for a light background.

So, if you are currently seeing this in what looks like dark-mode and would like to see what it looks like in light-mode or vice-versa, it should change to the other dynamically when you change your device theme. As for me, I'm going to never look at the light theme of my website again, and pray that it never breaks.