A really short post about adding Dark Mode to this site.
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:
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.