The dark mode is nothing new, but by now it can be seen nearly everywhere. Operating systems, apps and web sites leave the user the choice between the normal light mode with dark font on bright background, or dark mode with light font on dark background.
It clearly looks nice and it is said that it’s better for eyes and battery.
Are there measurable benefits of the dark mode? How can it be used? Which challenges follow the dark design?
Resources
A great and detailed post is “A complete Guide to Dark Mode on the Web” by Adhuham. It introduces techniques and pitfalls to implement the perfect dark mode.
As always: I will expand my resources if possible.
Benefits and misbeliefs
The dark mode is popular because of the belief, that it would go easy on the eyes and lengthen the batteries live.
The color we use to enlighten our eyes is actually irrelevant when it comes to developing debility of sight. A bad readability of content is not caused through light or dark mode, but a lack of contrast.
The often linked nearsightedness and itching eyes is caused by the display as such. Less blinking and a too short distance to the screen. The used mode is irrelevant for this.
The benefit of a longer battery live is partially true – for OLED displays. For LED-Displays, a black pixel shines and uses energy as well as a white one. This benefit therefore only affects every tenth user – all those that use OLED.
As a mechanism to adapt to sundown or a switch to a given time, the mode can be automatically switched. Besides the missing benefits, the eye needs approximately 20 minutes to get used to the unusual colors.
A true benefit is for those who use their device in the dark. Light mode dazzles, whereas dark mode don’t. Despite the fact that sitting in the dark while using a device is not ideal…
Settings
There are several places to activate the dark mode.
Close to every device offers a setting to directly set the operating system to light or dark mode. This includes dark controls and differend background images. This setting can be read by applications to use it for a uniform appearance.
Applications often set their own dark mode. Mostly by adopting the OS settings or through a dialog to ask the user for his prefered theme.
A special case are web sites. The browser as an application is already set to dark or light mode, available for the web site. The user might be offered to switch the mode. (On this page, use the moon symbol on the bottom right – a WordPres plugin).
Dark Design
If you want to implement a dark mode for your application, I won’t be done with just inverting the colors. An overview can be found under the link above.
The human and it’s eyes are used to dark characters on white background. When inverting the colors, make the font slightly bolder.
Light and dark mode should avoid plan white or black. Use off-white and dark gray or blue.
When inverting all the colors, remember unwanted effects like white shadows, that may appear.
Important, alas often overlooked, are images. If they are bright they will sting even more, when inside of a dark mode context. Use a filter to darken these images.
Conclusion
First and foremost, dark mode is a question of taste. And wether the user uses her device in the dark or has an OLED display.
I documented my usage within flutter.