The Dark Age (Of Themes)

During the last few years, we have seen more apps and websites giving their UI the dark theme treatment than ever. Some people might think this is a geek and purely developer oriented fantasy, but what if I told you it can be beneficial for the user’s device power consumption?

I concur, it’s great for the eyes, I’m using Notion’s dark theme to write these very lines on iOS right now! But according to Google’s research, colors displayed on the screen can affect the phone’s battery draw, and a night mode (either dark grey or AMOLED black) can go a long way to save the battery’s life. A dark theme can reduce battery usage, even with Max brightness, by up to 63% on AMOLED displays, while the pixel colour value can also affect power usage quite a bit, with the white being the most power-hungry colour.

Last September, Apple released the official build of iOS 13 which also included new features on their flagship browser, Safari. Safari on iOS (as well as on macOS), now supports the color-scheme CSS property, and the prefers-color-scheme media query. That said, we don’t have any excuses anymore and we should allow users to, either automatically or manually, change the colour scheme of your web app UI. More and more blogs (like this very one) also supports it!

That being said, can you safely use all that shebang on modern browsers right now? The answer is yes-ish. While the most popular browsers like Chrome (Desktop and Android), Firefox (Desktop and Android), Safari (Desktop and iOS) and the brand new chromium-based Microsoft Edge supports this new media query on their latest versions, some second level web browsers will still not interpret it completely (Looking at you, the current versions of Edge and Samsung Internet!). Since it’s a non-breaking feature, I assume that you’ll be safe to implement it, while people who use a browser that doesn’t support it, see the site or app in “light” mode.

People who know me will tell you that I never use a white theme if I can have a dark one. Worst, I sometime stop myself of using an app just because of that (not the main reason I’m not using Facebook, but that’s one on the list!). With these new features, you can now feel more aware of the power that you users need to navigate on your app, one small step at a time. For the most tech savvy, here some examples for quick implementation:

The code

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Enjoy!