Dark Mode

Following Kev Quirk's instructions, I've added an automatic Dark Mode to this site, if your browser requests it. I'd never heard of the possibility until reading Kev's post, but I understand pretty much all modern browsers support it. It was pretty simple to add, so thank you Kev for the clear & simple instructions!

Here's a side-by-side comparison of my current Dark and Light modes:

Dark Mode

Light Mode

I had to set the colours for my normal Light Mode theme using CSS variables, and then reset these variables to different colours using the following CSS media query prefers-color-scheme: dark. I've tested that it works for my site on MacOS with the current version of Firefox & Safari, and in mobile Safari on iOS.

The thing I like best about the exercise is not the Dark Mode itself, but that the process of adding it improved the Light Mode version of my theme too! The default colours I relied on for links were unreadable in Dark Mode, so I had to change them. This forced me to consider what they should be in Light Mode too, and the result looks more cohesive in my opinion.

Posted 10 February 2020 Copyright © Stig Brautaset