prefers-color-scheme
Around this time last year, I was on a big 2 month break from work, playing around with some CSS media features as I brought this website back into a state where I could start using it for blogging again. I've already written about and implemented prefers-reduced-motion - the feature that lets you adjust CSS based on a user's preference for motion - and just this weekend I finally got around to implementing prefers-color-scheme.
prefers-color-scheme is the one that helps developers create that infamous "dark mode" that has made its way into the minds of many people. With the introduction of it to macOS Mojave, soon followed by iOS and almost every other platform, 2019 was a good year for native support for dark mode. While most of the apps I use on my phone have added support for dark mode based on the phone settings, I haven't spotted too many websites/webapps doing the same thing. And in those cases where the websites do something, they've opted to do it via theming rather than reading the OS-wide setting via the prefers-color-scheme media feature.
Adding dark mode to this website wasn't too difficult, having already extracted the majority of the colours here as CSS Custom Properties. That basically meant I had all the colours in a single place that I could override based on whether or not prefers-color-scheme reported the user preference as dark.
Tinkering with the colours took most of the time/effort as simply flipping all of the values from their opposites (eg: change 'black' to 'white') didn't make for a good result IMO. I also had to update a few image assets like the GitHub and Twitter links at the bottom of this page - turns out I had baked the background colour into those images so they ended up with a visible gray box surrounding them when the footer colour changed!
If you're already rocking dark mode on your computer/phone and are using a browser that supports prefers-color-scheme then you're viewing this website's dark mode right now 🎉 If not and as a point of comparison, here's a video showing the difference between the 2 as I switch between the theme preferences on macOS:
I think it looks particularly good on the Artwork pages for all the old space wallpapers I used to make as the darker theme really helps those wallpaper colours show!
Anyway, there are still some areas that need fixing, like the big background image atop this blog post (used as the default background when the current item has no image of its own), and I keep finding random edge cases that I missed as I go through some older pages to see how the dark mode treatment has affected them.