How to create dark themes. Superhuman Guide

Once upon a time dark themes were rare, but today people want to see them everywhere. How to do it correctly in your application – 9 tips in the article.

1. Darken distant surfaces

In dark themes, the background color of interface elements follows this principle: the closer the layer is to the user (for example, a modal window), the lighter the surface. This simulates an environment in which light falls from above. The further from this layer the element, the less light it receives and the more it recedes into the background.

When creating a dark theme, it can be tempting to invert the light theme. However, distant surfaces become light and nearby surfaces become dark. It will disrupt your fitness and become unnatural.

Instead, take only the base color of the light theme surface. Invert this color to get the base color of the dark theme surface. Lighten this color for near surfaces and darken it for distant ones.

The Superhuman dark theme is composed of five shades of gray. Closer surfaces use lighter shades of gray; distant surfaces use darker shades of gray.

2-2-1160x658

Closer surfaces use lighter shades of gray; distant surfaces use darker shades of gray

2. Redefine the contrast effect (perceptual contrast)

When designing a dark theme with reference to a light theme, it is important to rethink the contrast effect. This is how contrasting an element appears, regardless of the numerical value.

For example, in a light theme, the contact information is black with 60% opacity. But in the dark theme, we made the contact information white with an opacity of 65%. Although both contrast ratios exceed the AA standard, an additional 5% prevents fatigue, especially in low light conditions.

There is no hard and fast rule for these offsets. Instead, we tweak each element individually – based on text size, font weight, and line width – to ensure that the dark theme is as clear and as easy to read as the light theme.

3-4-1160x413

3. Reduce large blocks of bright color

In light themes, we often use large blocks of bright color. This is usually fine: our most important elements are likely to be brighter anyway. But this does not work in dark themes: large colored blocks distract attention from the most important elements.

For example, consider the “Remind me” screen of our application. In the light theme, the pink overlay does not distract from the even brighter dialog box. But in a dark theme, the same overlay is a distraction. We’ve removed it completely so you can focus quickly and easily on what matters.

4-4-1160x964

4. Avoid pure black or white colors

We do not use pure black or white for dark themes in Superhuman. Below are four reasons why you should do as we do.

4.1. Realism

True black does not exist in the world around us. (The world’s darkest, yet to be named material invented at MIT is still 0.005% less than absolute black!) So our eyesight has adapted to treat relative darkness as real black. This is why # 000000 can appear very harsh, especially against light elements. This is not what we usually see.

4.2. Black smear

Black smear is a visual distortion that occurs when dragging or scrolling lighter content against a pure black background.

This effect occurs on OLED displays, which have become increasingly common. Pure black pixels are disabled on these screens. (Thus, dark themes can use less energy than light ones.) However, these pixels are slower to turn on and off to change color. This variable response creates a smearing effect.

5-2

Black smear effect in iOS Clock app (must be viewed on OLED display)

You can avoid smudging blacks by using a dark gray color, because then the pixels won’t turn off. It even works with a gray like # 010101. That being said, the dark theme still consumes much less power than the light one!

4.3. Depth

If you use true black for background elements, you lose certain methods of conveying depth.

For example, imagine your background is pure black. On top of it, you show a notification. The notification should float above the background, so you are using a shadow to convey depth. Only the shadow is invisible, since there is nothing darker than pure black.

If your background is not pure black, you can use shadows with different opacity and blur to convey depth. For example, let’s see the notification in Superhuman:

6-3-1160x658

If your background is not pure black, you can use shadows to convey depth.

4.4. Halation effect

Pure white text on a pure black background creates the highest possible contrast – 21: 1. Quantified by the WCAG accessibility standard, it’s a dream come true.

However, it is important to keep in mind extremely high contrast ratios when designing dark themes. Too high contrast can lead to eye fatigue and Halation effect

When very bright text is positioned against a very dark background, the text may start to blur. This effect is even more pronounced for people with astigmatism. Jason Harrison, Ph.D. of the Sensory and Interaction Research Group, states:

People with astigmatism (approximately 50% of the population) have a harder time reading white text on black than black text on white. This is partly due to light levels: when the display is bright (white background), the iris closes slightly more, reducing the “warped” lens effect; with a dark display (black background), the iris opens to receive more light, and lens deformation creates a more blurred focus in the eye.

In Superhuman, we have to be especially careful with the halation effect, as our app contains a lot of text. We set the opacity to 90% for the white text. This balances contrast and brightness so the app is easy to read in a wide variety of lighting conditions.

7-2-1160x720

5. Change the color depth

Because we reduced the text to avoid eye fatigue and distortion, accents and buttons may appear too bright. Now we need to tweak these colors to work better in the dark theme. First, we reduce the brightness so that these colors don’t overwhelm nearby text. Secondly, we increase the saturation to make them stand out.

For example, if we take purple from our light theme, it will appear too bright in relation to the adjacent text. In the dark theme, we make this color deeper so that users can focus on the text.

8-4-1160x536

To create deeper colors for dark themes: keep hue, decrease brightness, and increase saturation

Conclusion

Dark themes have many benefits and people now want to see them everywhere. However, they are difficult to create correctly. A simple approach of reusing colors and inverting hues will increase eye strain, make reading difficult in low light, and may even disrupt the visual and information hierarchy of an application.

We’ve found a systematic way to create readable, balanced and delightful dark themes. Just follow these steps:

  1. Darken distant surfaces
  2. Redefine the Contrast Effect
  3. Reduce large blocks of bright color
  4. Avoid pure black or white
  5. Change color depth

Source: UXPUB

Leave a Reply

Your email address will not be published. Required fields are marked *