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.