It seems that if your design does not have the option to put it in “Dark Mode” you are not in style.
I’m not sure how it started, but the truth is that more and more applications and operating systems launch it as if it were the feature of the century: something super unique, unrepeatable, and… well?
Well, it depends: the dark mode is becoming a promotional tool but… is it as good as it seems?
And… how do you design it well?
Dark Mode: All that glitters is not gold
Today, practically all operating systems (whether computers or mobile phones) have the “dark mode” functionality.
And along with them, a large number of applications, such as Twitter, YouTube and Reddit.
Traditionally in “offline” design, white or light backgrounds have been designed using almost black gray text, and that is what came to computers when they began to have UI.
Of course, it should be emphasized that initially -and in the absence of an interface as such- the computers had a green phosphor screen.
But they were like that for technical reasons, not for aesthetic issues of (supposed) battery saving or ease of reading.
Some facts about Dark Mode
Not 100% good to use in low light
Yep. It is one of the great arguments used by those who defend (or sell) the Dark Mode.
They say that it prevents the light from the screen from dazzling us, especially in darker environments, such as when we consult the mobile in bed (which we shouldn’t do, but this is another topic).
The truth is that the problem is in the blue light that our brain interprets as light at dawn and causes the body to generate less melatonin, which helps us regulate sleep cycles. New mobiles already come with filters that are activated after a certain time, the possibility of changing the RGB setting, automatic brightness management…
Dark Mode is, in fact, a solution of solution that is easier to sell because make no mistake, aesthetically “cool”.
Photophobia vs Astigmatism
If you suffer from photophobia (abnormal intolerance to light that causes migraines), Dark Mode is perfect for you.
On the other hand, if what you suffer from is astigmatism (close to 50% of the world’s population has some related problem) the dark mode can cause visual fatigue because it forces you to squint your eyes more to be able to correctly read light text on a dark background.
For those users who do not suffer from any type of vision defect, the Dark Mode is actually quite indifferent.
Highlight the content
What is evident is that the Dark Mode allows the content to stand out more, especially when it comes to photographs or videos.
It also induces us to concentrate a little more on the content we are watching (rather than reading), which is why applications like Netflix, Spotify, HBO… have the dark UI by default.
Instagram is another app that can benefit from Dark Mode. By default its UI is clear, but you can activate the Mode like this.
Battery savings… but only on OLED screens
Dark Mode is said to save battery life. And it is true, although it only achieves it on OLED screens since they “turn off” those dark pixels and therefore stop consuming battery.
At the moment 61% of mobiles have an OLED screen. The percentage is not small, it is clear, but considering that laptops and desktop screens are not (at the moment)… is it worth investing in a Dark Mode?
Improves comprehension. Or not.
When we read a text on a white background, the iris does not need to open to absorb more light, it is in its normal state.
If we read white text on a black background, we force the iris to open in order to receive more light and correctly differentiate white letters. As happens when we print white text on a dark background, the edges become more blurred, making it difficult to read and increasing the effort required to read.
Remember that the iris is a muscle: the more you force it to read on dark backgrounds, the faster it will tire.
3 tips for designing in Dark Mode
Without intending to make a design tutorial of an entire application here (it will come in future installments), here are some guidelines that you should follow to make your designs even better:
Don’t use pure black (#000000). For everything mentioned in previous paragraphs, it is recommended to reduce the contrast a little and use “almost black grays”, such as #121212.
Use white for the “main” content and shades of gray for what is more secondary. It is the same as you would do with a white background: “almost” black for the text and slightly lighter colors for details such as categories, meta tags, etc.
As in the “white” design (light? the traditional one, come on) take into account the accessibility of the buttons, icons, and texts. On dark backgrounds, it is more difficult to calibrate the colors and avoid using a palette that is too “neon” (which will only make legibility difficult).
Conclusions
With this article, I wanted to shed a little light (note the irony) on the Dark Mode and ask you if it is really necessary for the design you are producing.
It is clear that in some cases it is only an aesthetic decision and that making a Dark Mode gives publicity, but please do not forget the user who will ultimately have to interact with what you design.
Dark Mode won’t matter if your eyes are straining or you have a hard time understanding which element is clickable or not.