Dark mode: why do we need it?

What is the dark mode?

The dark mode is an additional mode of an application or platform that consumers can display predominantly dark surfaces on the user interface. It helps reduce the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.

A study has shown that 60% of smartphone users use their device for at least 30 minutes at night before sleeping, in the dark, and the morning upon waking up. It increases the risk to the eyes, which are therefore very exposed to blue lights. It has an impact on the quality of their sleep.

Although it is impossible to prohibit users from looking at their smartphones when they want to, to fight against these habits that damage the eyes, many companies favor dark mode or dark mode for their interfaces. Even if some applications like Spotify or Netflix are already designed in dark mode, others like Facebook, Instagram, or Apple offer users to switch from one mode to another.

What are the advantages?

The dark mode brings many advantages: among other things, it saves the battery, which allows the device to be used for more extended periods without recharging it. Usually, the Dark Mode theme can be turned on or off using a toggle icon visible on the screen. It can also be placed in menu options or in-app settings. It also reduces eye fatigue, and the contrasts are reversed; the backgrounds become black or very dark, and the texts turn white or light gray. In the evening before sleeping, it approximates the colors visible in dark environments and rests the eyes.

In addition, dark mode promotes accessibility by optimizing contrasts to help people with color blindness. Another advantage is that it saves between 30% and 60% of the battery, consumes less energy, and requires less recharging, which is more respectful for our environment.

The dark mode is only effective in reducing the power consumption of OLED displays. There are only a few OLED screen mobile phones out there at the moment — iPhone XS or higher, Samsung Galaxy Note 9, Google Pixel 4, and a few other high-end phones.

It is highly recommended that you switch to dark mode for those who own phones with OLED screens. When climate change becomes a real problem, we must take an ecological position by all possible means. Switching to a dark mode rather than brighter colored screens would be the equivalent of using a cardboard straw rather than a plastic straw.

The dark mode is a great initiative, although it’s not officially part of eco-branding. The goal that we all pursue is to consume fewer resources and less energy!

What are the rules for making an application in dark mode?

Google and Apple have put together some very detailed and comprehensive guidelines to help you implement dark mode in your products. Use them when designing your mobile applications!

First of all, some expert dark mode sites will be of great use to you. For example, Material Design recommends using # 121212 for your dark theme’s surface color, as pure black is too harsh on the eye. The same goes for text color: avoid pure white, but instead use it with alpha (Material Design recommends 87% for primary content) to tone down the strong contrast.

Drop shadows should also be avoided in dark mode, as they are not sufficiently visible. Use different shades of gray to distinguish between varying levels of content.

It is then necessary to note that shadows can be seen as the background brightens. So don’t stop using them; stop relying on them alone. And don’t use colored or light shades: they are unnatural to the eye and won’t provide the same depth effect as regular shadows.

Since you need to change your primary color and show elevation, you need to create a new color palette. Keep in mind that some content items may share the same colors in Light mode but not in Dark mode.

Colors create more contrast in dark mode: use it to your advantage by using them to make certain pieces of content stand out, but use them in small portions.

Make sure the contrast is sufficient! If your screen does not present enough contrast, it can become complicated to distinguish the different activity states (active, hovered over, inactive, etc.).