Menu

Colin Devroe

Photographer. Podcaster. Blogger. Reverse Engineer.

Supporting OS-level Dark Mode preference using only CSS

September 6, 2019

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) {
    /* Do Dark Mode things here */
}

Since Davis already had a .dark-mode body class I was able to take all of those selectors and move them into this media query. This way, if someone toggles that preference at the OS-level, they will automatically get my site’s dark theme. If they toggle it back the other way, my site will adjust. Simple.

I do not think I’m going to go through the trouble of adding a manual switch for viewers. That will end up being a legacy way of handling this in due time. I think people will either turn Dark Mode on or not and if they do they’ll get their preferred version. Even Windows 10 and macOS have these preferences now.

If you’re a Dark Mode person, I hope you like it.

Side note: Anders is spearheading the next official WordPress theme in its next release. If you look at his other themes you’ll see why.

Comments

mikehaynes says:

@cdevroe Great timing on this one, Colin. @Gabz and I were just having a chat about dark themes in the MB Slack.

Gabz says:

@cdevroe @mikehaynes and I was just reading this article on my Feedbin feed πŸ˜…

colinwalker says:

@cdevroe I’ve seen a few conversations about this over the past couple of days so couldn’t resist adding it to my blog. It’s a shame that it overrides my current JavaScript toggle but I’m sure I could get round that with a bit of thought.

cdevroe says:

@colinwalker You’d like to offer people that have OS-level Dark Mode on to be able to turn it off on your blog?

colinwalker says:

@cdevroe I think it’s only fair πŸ˜‰

cdevroe says:

@colinwalker I believe this can be done.

Leave a Reply