My blog’s theme is based on Davis by Anders Norén. I’ve been using it for a while, making small tweaks here and there for my images index and other things.
It has a dark theme built-in that I can toggle on and off. But it is an either/or type of thing. I can either have the dark theme on all the time or not.
Since updating to Android 10 I’ve been trying Dark Mode to see if I prefer it. So far it is a bit of a mess, because so many apps simply do not support it yet. Even Google’s own built-in Android apps have yet to fully embrace the OS-level preference. But I’m sure this will change with time.
For my personal blog I’ve long thought about adding a toggle or switch somewhere to allow someone to turn its dark theme on or off themselves. But, for whatever reason I just put it off so long that I never did it. But now, just after Android 10’s release on Pixel phones and on the cusp of iOS 13 being released, both major mobile OSes will soon have an OS-level preference for Dark Mode. I thought this would be a good time to support that preference.
It turns out that many of the latest browser versions have a media query, or CSS’s version of an IF statement, that will allow you to add support for it rather easily.
@media(prefers-color-scheme: dark) {