The past, present, and future of Dark Mode
At Lunabee Studio, we attended in 2019 the Google I/O and the Apple WWDC conferences in California.
And one of the major announcements of 2019 was definitely the introduction of Dark Theme on Android during the I/O, and right after that on iOS during the WWDC (called the Dark Mode in Cupertino).
Lyrical as usual, Apple said about Dark Mode that it’s a “dramatic new look that helps you focus on your work,’’ as well as a “distraction-free environment that’s easy on the eyes — in every way”.
Google was much more pragmatic, saying Dark Theme can “reduce power usage by a significant amount”, “improve visibility for users with low vision and those who are sensitive to bright light” and “make it easier for anyone to use a device in a low-light environment”.
A thing to take into consideration is that we spend an average of 3 hours and 15 minutes on our smartphones every day (and not mentioning other screens such as your TV, computer…).
Then, if Dark Mode can truly improve focus, readability, eye-strain and battery life, we can imagine the huge impact Dark Mode could have on our tech usage and our health.
Ok, now that the scene is set on Dark Mode, let’s deep dive a bit. Dark Mode is a super interesting topic, from both a scientific and UX standpoint.
The genesis: the rise of Light Mode
Computers screens originally were in what we call today “dark mode”, because of the capacities of the cathode-ray tubes used back then.
As a skeuomorphic approach, positive polarity was adopted to make computer interfaces resemble paper, since people who weren’t programmers were introduced to computers and word processing became a significant tool for every corporation: they had to work in a familiar-looking environment. And that environment was none other than paper.
Humans are programmed to live during the day, sleep during the night.
We evolved outside, and our eyes are used to see dark objects (people, mountains) in front of light backgrounds (the sunlit sky).
It’s built-in our brains. A research paper published in 1988 by Dannemiller and Stephens showed that a 3 months old baby tends to be more attracted to dark on light pictures than to light-on-dark ones.
Nowadays: Dark Mode is the new hype… How come?
After having used Light Mode for so long, Dark Mode feels like a breath of fresh air. It gives the users the opportunity to customize their device, their digital environment more.
It has a tech and design look to it, it looks new without being a complete re-design, and it is marketed as a solution to problems surrounding our digital habits (such as eye strains, using a screen in a low-light environment, or reducing screen-induced headaches).
Is it better than good old Light Mode?
Dark mode is more of a personal preference than an absolute answer to everything: some people feel more comfortable, less tired and more focused while using Dark Mode.
Some others will notice being easily distracted because of the colors becoming flashier.
Science shows that the human eye is more used to light-on-dark (positive polarity).
Our eyes work like a camera lens: when we see something in positive polarity, our pupil constricts: we see things sharper, more detailed.
On the contrary, when we see something in negative polarity, less light is coming to the eye, causing our pupil to dilate: things become blurrier. White text on a black background will appear bigger, to have a kind of a halo…
That’s because the light emitted by a letter is reflected by the other letters.
The opposite phenomenon happens in positive polarity. This is partly what makes negative polarity harder to read.
Multiple tests prove that proofreading, reading speed and such tasks are performed better in positive polarity (article from TidBits, article from Wired). Additionally, because it is harder to read, our eyes and brain have to focus more on the task, making us more prone to suffer from eye strain, headaches.
All in all, it all comes down to each individual.
Despite spending more time reading and analyzing content, some users may find it easier to not be distracted by interruptive content.
Dark Mode works well when you quickly scan a screen looking for visual/colored elements.
In 2018, designers from SalesForce were wondering what mode was best when developing a dashboard feature.
They interviewed many users and it turned out that users made decisions faster, and just as accurately, with charts displayed in Dark Theme.
It’s the same for developers: when you’re developing, you’re more interested in seeing the structure of your code, made clear with the coloring syntax, rather than having to read every single word.
Or even the Bloomberg application: traders will see information much faster with negative polarity.
The same thing applies to the Stock app and Activity app in iOS, using Dark UIs before Dark Mode was even announced.
Even when Dark Mode wasn’t yet a thing, a dark UI was used for some products, like luxury brands, streaming services… To convey a feeling of elitism, to make the content pop up, to go along with the context of use of the service (you’re most likely to use streaming services at night, in a dim-lit room, making a dark UI much more comfortable). But it was pretty rare and rarely a toggle option, as it was a design choice.
We also have to acknowledge that some people do suffer from conditions preventing them from using light mode.
People who are visually impaired or suffering from photophobia will greatly benefit from the Dark Mode. And using it reduces the emission of blue light, known to reduce the quality of our sleep.
And what about battery life?
Since the democratization of Dark UI, we have been told that it saved battery. As you might have heard already, it isn’t quite true: unless you have a phone equipped with an OLED screen, you are not going to benefit from this.
Usual LED screens need to be backlit to display colors, even black. With OLED screens, only colored LEDs will be lit up and the black ones will stay off. And it seems that lighting dark grey (used in Dark Mode) LEDs still allows some energy savings.
(Video from PhoneBuff comparing the battery usage between Light and Dark Mode: Dark Mode vs. Light Mode Battery Test)
Then, do I have to implement it in my app?
Ignoring Dark Mode will make your app stand out (in a negative way), displaying all kinds of bright colors the users did not expect to be blinded with while using Dark Mode on his device.
Users are starting to expect this, and you definitely don’t want to be the last app that is exclusively bright.
And there are shortcuts to this, using Xcode, Android Studio… They implement very easy ways to have a set of assets for Light Mode, and another one for Dark Mode. Technically speaking, it makes it pretty easy to implement Dark Mode from then.
Plus, on Android, there’s a very useful feature called « Force Dark Allowed ». Basically, it’s an automated dark mode for Android. Then, it’ll be compatible with Dark Mode. It’s not perfect, but it does a pretty good job (and using this will give you some time to design the real thing, avoiding any annoyance for your users).
The future of your app with Dark Mode
There’s already plenty of resources on this topic, but we will do a recap (you will find links to all the referred articles at the end). Some rules have to be undeniably followed when creating the Dark Mode of your app, or else the user experience will be significantly worse.
Let’s see what the good practices are, and then the bad ones.
A few rules for your app’s Dark Mode
Follow platform guidelines
This is the first and maybe most important tip. Google and Apple have put up very thorough and complete guidelines to help you implement dark mode to your products. Use them while designing your Apps!
Avoid 100% black
Material Design recommends using #121212 for your Dark Theme surface color, as pure black is too hard on the eye. The same goes for the text color: avoid pure white, but instead use it with an Alpha (Material Design recommends 87% for primary content) to lessen the strong contrast.
Use Elevation Brightness
In Light Mode, you most likely use drop shadows to communicate visual hierarchy. You have to avoid them in Dark Mode, as they’re not really visible. Use different shades of grey to tell apart the different levels of content.
Note that shadows can be perceived as the background gets lighter. So don’t stop using them, just stop relying solely on them. And do not use colored or light shadows: they’re unnatural to the eye and won’t bring the same depth effect as regular shadows.
Consider changing your Primary Color
You should avoid using too saturated colors in Dark Mode: they can be too bright and/or decrease the readability.
Google Material Design recommends using a 500 color for Light Mode, and a 200 for Dark Mode. You can check your contrast ratio on WGAG.
Convert color palettes
Since you have to change your primary color and the way you show elevation, you should create a new color palette. Keep in mind that some pieces of content might share the same colors in Light Mode but might not in Dark Mode.
If you want to keep your app well branded, you can apply your primary color to your dark mode.
Use color in small portions
Colors create more contrast in Dark Mode: use it to your advantage by using them to make certain pieces of content pop, but use them in small portions.
Don’t forget your splash screen
This one might be easy to miss, but it is decisive. It is the first screen your users are going to see when opening your app, and the last thing you want to do is burn their retina before they can even start using the app.
Make sure you have enough contrast
If your screen doesn’t show enough contrast, it can become really difficult to tell apart different states of activity (active, hovered, inactive…)
If you use Instagram, you might be familiar with this issue. Links are pretty much indistinguishable from plain text, making it more difficult to find the « link in bio ».
Test Dark Mode in real conditions
Test your app with settings such as automatic brightness, enhanced contrast, test it in a low-light environment… Prepare for every situation your user might use your app in this way, you can prevent any bad experience.
What we would like to see in the future
Looking at the adoption rate of Dark Mode, it is pretty safe to say there are going to be new features coming up with iOS 14 and Android 11.
One that could take place on the home screen :
Icons don’t change between Light and Dark Mode. It would be nice for developers to be able to provide two different app icons for both modes, as well as allow users to set different wallpapers for Light and Dark Mode.
We made a conference out of this article. And you can watch it now on Youtube 😍:
Now we hope it’s going to be easier to implement Dark mode/theme in your Apps! And feel free to comment, of course.
— Written by Charlotte Jacquot and Olivier Berni
Don’t forget to clap 👏🏻 if you liked this
10 is good, 20 is great, but 50 would be the best. Just press and hold the button!
Hope you liked this. If you have any feedback, let me know in the comments 💬.
Lunabee Studio is a company creating premium (native) mobile Apps in the Alps. We love mobile UX, iOS and Android. Follow us to keep up with our latest publications and news.
