Moving towards a future of Dark UI

The benefits and current support for dark mode

This month Apple released iOS 13 for the public and closed the Dark Mode gap between macOS and iOS. A system-wide Dark Mode (or Night Mode how some would call it) is not something new for everyone. People who are using Windows 10 and Android 10 have seen this functionality for quite some time already. In this article, I will elaborate a bit more about the current state of Dark Mode and the transition towards it being supported by companies and on the web.

The benefits of Dark Mode

We all know those moments when you are in the dark and you open up your phone or laptop and get blasted by its brightness.

Dark Mode is a perfect solution for that. But next to that it‘s good for:

• Battery saving
• Less sleep disruption
• Reducing eye fatigue
• Accessibility for people with visual impairments, migraines or other visual disorders.

I actually prefer Dark Mode during the day as well because of the reasons above and I think some apps look aesthetically better in a dark theme. Shout out to the people who are reading this in Dark Mode 🌚

The dark side of the web

Unfortunately, we are not completely there yet in terms of support on the web. There are multiple ways to turn ‘light-themed’ websites into ‘dark-themed’ website but it usually doesn’t work very well. I tried a couple of browser add-ons myself but it usually didn’t convert well and often made the website less accessible. There is a big difference between converting colors automatically and designing a dedicated color palette for when Dark Mode is enabled.

Something I discovered while doing research for this article is that Google Chrome now supports a CSS option called “prefers-color-scheme.” in version 76. When you enable this option, websites with a default white background will be converted to a dark theme and the other way around. After enabling this option, websites will change automatically based on the preference of your operating system. If you are a web developer and you want to know more about enabling this for your website, have a look at this article.

Emails

Another issue with using Dark Mode is the lack of support for emails. If I look in my current mailbox there are only a select amount of emails that blend in with the enabled Dark Mode on my device.

Sticker Mule (left) and Splice (Right)

Simple text-based emails like the Sticker Mule example on the left are being converted to Dark Mode with adjustments to the colors by the Apple mail app. The code snippet below found by MailDesigner365 shows how the app converts the mail into a more legible dark theme:

CSS example from Apple

Text and background colors are easy to convert until a certain point but the problem is mainly with the images which won’t be viewed properly. That’s why Apple Mail will show the default view of the mail when there are images attached — also when there is a tracking pixel implemented. I’m curious how email marketing companies like MailChimp or Sendgrid will support some sort of way to enable a dark theme for companies with.

Transition to Dark Mode on iOS

If you install iOS 13 on your device, you will probably notice that a big portion of popular apps hasn’t got the dark mode overhaul yet. Facebook gave its Messenger app already the dark theme earlier this year but still needs to update Facebook and Whatsapp. Luckily Instagram just released a new update and can also be added to the list of compatible apps on iOS 13.

Dark themed mock-ups from some of my most-used apps — Google Photos and Soundcloud

Google also has Dark Mode in the YouTube app for a while now but the other apps are still only available in the default light theme. I’m guessing that this should not take too long since Material Design already has a theming system for it. Google did recently announced that the dark version of Gmail will be available within the coming 2 weeks.

The other way around

There are a couple of popular services and brands around which have a dark aesthetic by default. Spotify and Netflix, for example, have a dark aesthetic that goes hand-in-hand with their brand. I’m wondering if these services will eventually enable a light mode for users to have a more consistent experience on their devices.

Light themed mock-up from Spotify

I think light themes could work perfectly fine for media consumption apps but there is also certainly some added value to the way the UI looks and how it represents the brand of the company. It would be only a matter of how mature Dark Mode will eventually become overtime versus the importance of blending in as a brand on their supported operating systems.

I hope you enjoyed reading this article and feel free to leave any response on what your view is on the future of dark-themed interfaces.

Also a fan of Dark Mode? If you are a macOS user you should try using NightOwl. This simple application allows you easily to switch between dark and light mode or disable it in specific apps where it doesn’t work well for you.

🦉 NightOwl — toggle macOS Mojaves dark mode.