Dark times are coming

Original author: Ilke Verrelst
  • Transfer

Or what to keep in mind when developing a dark mode for an application or site

2018 showed: dark modes on the way. Now that we are halfway through 2019, we can say with confidence: they are here, and they are everywhere.

An example of an old green-black monitor

To begin with, the dark mode is not a new concept at all. It has been used for quite some time. And once, in fact, it was only used for a long time: monitors were “green-black”, but only because the luminescent coating inside emitted a greenish glow when exposed to radiation.

But even after the introduction of color monitors, the dark mode continued to live. Why so?

There are two main motives that explain why every second person hurries to add a dark theme to his application today. First of all: computers are everywhere. Everywhere we look, there’s some kind of screen. We use our mobile devices from morning until late at night. The presence of a dark mode reduces the load on the eyes when you are in bed before going to bed “last time” flipping through the soc. network. (If you look like me, then "last time" could mean a 3-hour scroll of R / EngineeringPorn . Dark mode? Yeah, please!)

Another reason is the new display technology. The flagship models of large companies - Apple, Google, Samsung, Huawei - are all equipped with OLED screens, which, unlike LCD displays, do not require backlighting. And this is really good news for your battery. Imagine you are viewing a black square image on your phone; with an LCD display, the backlight will illuminate the entire screen, although most of it is black. But when viewing the same image on the OLED display, the pixels of which the black square consists simply turn off. And that means they don’t consume energy at all.

These types of displays make dark modes many times more interesting. Using a dark interface, you can significantly extend the battery life of your device. Check out the facts and figures from the Android Dev Summit last November to see for yourself . Dark modes, of course, go hand in hand with UI changes so let's refresh our knowledge!

Dark Modes 101

First of all: “dark” is not equal to “black”. Do not try to replace the white background with black, as this will make it impossible to use shadows. A similar design will be super flat (in a bad way).

It is important to keep in mind the basic principles of shading / lighting. Objects that are more elevated should be lighter in the shadow, simulating real lighting and shading. Thus, it is easier to distinguish between different components and their hierarchy.

Two equally gray squares with a shadow, one on a 100% black background, the other on # 121212. When lifting, the object acquires a lighter shade of gray.

In a dark theme, you can still work with your usual primary color, if the contrast is fine. Let us illustrate with an example.

In this interface, the main action is the big blue button in the bottom panel. There is no problem in terms of contrast when switching between light or dark mode, the button still attracts attention, the icon is clear, in general, everything is fine.

When the same color is used differently, for example in the text, there will be problems. Try using a (much) less saturated hue of the base color, or look for other ways to incorporate brand colors into the interface.

Left: red on black looks bad. Right: reduce saturation - and everything becomes good. - approx. perev.

The same goes for all other saturated colors that you could use, such as warning colors or errors. Google uses a 40% white overlay over the color of the default error in its Material Design guidelines for switching to dark mode. This is a pretty good starting point, as it will improve contrast levels to meet AA standards. Of course, you can always change the settings as you wish, but do not forget to check the contrast levels. By the way, a useful tool for this purpose is the Sketch - Stark plugin , which accurately shows how much contrast there is between the 2 layers.

What about the text?

Everything is simple here: nothing should be 100% black, 100% white and vice versa. White reflects light waves of all lengths, black - absorbs. If you place 100% white text on a 100% black background, the letters will reflect light, smear and become less readable, which will negatively affect readability.

The same goes for a 100% white background that reflects too much light to fully focus on words. Try to soften the white color a bit, use light gray for backgrounds and texts on black backgrounds. This will reduce the strain on the eyes, preventing them from overstressing.

The dark mode here is not going to go away

The amount of time we spend at the screens is constantly growing, and every new day, new screens appear in our lives, from the moment we wake up until we fall asleep. This is a fairly new phenomenon, our eyes are not yet accustomed to such an increase in time at the screen late in the evening. This is where the dark mode comes into play. After the introduction of this function in macOS and Material Design (and, most likely, in iOS), we believe that sooner or later it will become default in all applications, both mobile and desktop. And it’s better to be prepared for this!

The only reason not to introduce dark mode is when you are absolutely 100% sure that your application is used exclusively in bright daylight. This, however, happens infrequently.

It is worth mentioning a few things that require special attention when implementing the dark regime, in addition to the basic principles summarized earlier.

From the point of view of accessibility, the dark mode is not the most convenient, since the contrast is generally lower, which in turn does not improve readability at all.

A source

But, imagine that you are getting ready for bed, really want to sleep, but right before you fall asleep, you remembered that you need to send someone a super important message that can not wait even one night. You take your phone, turn it on and AAAAAA ... the light background of your iMessage will not let you fall asleep for another 3 hours. While light text against a dark background is not considered as accessible as possible, having a dark mode right this second would increase your convenience by a million. It all depends on the situation in which the user is currently.

That's why we consider  auto dark mode  such a cool idea. It turns on in the evening and turns off in the morning. The user does not even need to think about it, which is very convenient. Twitter did a great job with the dark mode settings. In addition, they have both just a dark mode and an even darker mode for all these OLED screens, saving battery and everything related to it. It is important to note here: let the user switch manually when he wants to: there is nothing worse than automatically changing the interface without the ability to switch back.

Twitter has an automatic dark mode that turns on in the evening and turns off in the morning.

Also, when developing a theme, it should be borne in mind that some things simply cannot be made dark.

Take a text editor, such as Pages. You can make the interface dark, but the sheet itself will always be white, simulating a real sheet of paper.

Pages with dark mode enabled

The same goes for all kinds of content editors, such as Sketch or Illustrator. Although the interface can be made dark, the mounting plate you are working with will always be white by default.

Sketch is in dark mode and still has a bright white artboard.

Therefore, regardless of the application, we believe that dark modes will become native to the operating system you are using, which means that it is better to prepare for the future in advance, it will be dark. 

If you want to learn more about developing dark interfaces, be sure to check out Material Design guidelines , this was our main source of information for this article.

Also popular now: