Menu

Colin Devroe

Reverse Engineer. Blogger.

Like? Subscribe.

On YouTube? Check out my channel.

Android 10 apps that support Dark Theme

Ben Schoon:

The majority of Google apps support this system-wide toggle, but few third-party developers have followed the company’s lead. Here are some non-Google apps that support Android 10’s dark mode toggle.

He lists a number of apps that support the OS-level option. Outlook claims to support it, but I have it installed and updated and cannot see the option yet. So perhaps it is something they are able to roll out?

There are also some of Google’s own apps that have yet to be updated; Play Store and Gmail being two big ones.

I’m looking forward to updates to Instagram, Facebook, Microsoft To-Do, WhatsApp, Twitter, WordPress, Untappd, Teams.

Some apps have a dark theme, but they don’t support the OS-level option.

We’re in an odd territory right now of support of this feature. I think it is going to be a bit of a mess for at least 6 months to a year.

Supporting OS-level Dark Mode preference using only CSS

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.