Welcome to the Dark Side: 5 Tips for Designing a Dark Mode Version of Your App

Are you thinking of coming to the dark side? 🦇🖤 Designing in dark mode continues to grow in popularity, especially following the implementation of optional dark mode for Apple iOS, Facebook, Google Chrome, Youtube and other highly trafficked sites and operating systems (source).

But what is dark mode?

If you aren’t familiar with it, dark mode (also known as night mode) is an optional color scheme alternative available for user interfaces. It uses dark background colors and a lighter foreground and text, much like a negative in photography.

Why should you consider designing a dark mode theme for your app?

First, a dark mode can keep the users’ eyes more comfortable and prevent strain. Recall the last time you tried to check something on your phone at night—the flash of the interface suddenly coming to life can be blindingly bright and unexpected for your eyes.

This sensitivity to light can cause users to spend less time on your app in the evening or in low light settings if you don’t offer a dark mode alternative. For example, Twitter found that its users spent more time in the app when in dark mode (source).

Second, dark mode can save battery life. In products that require efficiency (such as devices with OLED screens), dark mode can conserve battery life by reducing the use of light pixels.

Finally, as more and more apps begin to offer dark mode as an option, it’s good to consider adding this option to your app to appeal to the widest range of users and satisfy the growing dark mode fan base.

Dark Mode Design Guidelines and Best Practices

Here are some guidelines and best practices to consider when creating a dark mode theme:

1. Try to Avoid Pure Black

A pure color is any color that has no shading in its mix. The first two digits of a hex code indicate red shading, while the middle two are for green tones, and the last two are for blue. Pure colors don’t utilize much, if any, of this in-between shading. Examples include pure black (#000000) and pure white (#FFFFFF).

When creating a dark mode interface, we tend to jump to using the darkest color possible for backgrounds, and it may seem like the natural first step in converting your designs to dark mode. However, using pure black can create too high of contrast between text and other elements in the app, which can look unflattering visually and leave you with fewer options to communicate the elevation of different elements on your screen.

Instead, start with different shades of grey. Dark grey can look similar to and accomplish the feel of a black background while remaining soft contrast-wise. You can use as many shades of grey as needed, which allows you to better communicate depth and elevation on screen.

2. Try to Avoid Pure White Fonts or Use Them Sparingly

Shading text properly can be crucial to the user experience when designing for a dark-mode UI. We want to optimize our text so that it is not too harsh against a dark background but still easy to read.

We also want to communicate visual hierarchy within the text; using pure white can detract from this. Sometimes if we use too bright of a white font on a dark background, it can appear blurry to users due to an optical illusion in which the white light emitted by the screen tries to fill or offset the darkness around it. Start with an off-white or light grey font and play around with opacity.

According to Google, 87% opacity for white text can be used for high emphasis, 60% opacity for medium emphasis, and 38% opacity for disabled text (source).

3. Be Careful with Saturated Colors when Designing Dark Mode Themes

Saturation refers to the intensity of your selected color. The more saturated a color is, the brighter it will appear. The less saturated it is, the more muted or pastel it will appear.

While saturated colors can be fun and eye-catching, they don’t pass WCAG’s accessibility standard of at least a 4.5:1 ratio for body text against dark surfaces. Using saturated colors in the dark mode version of your app can make the colors visually vibrate against a dark background, inducing eye strain (source).

To provide more flexibility and usability, it’s recommended to use lighter tones (200-50) in dark themes rather than your default color theme (saturated tones ranging from 900-500) (source).

4. Communicate Depth

We usually use borders and shadows to communicate the depth and elevation of different objects on screen when designing an app. However, in dark mode shadows no longer stand out and borders are harder to blend. So how can we still communicate depth and visual hierarchy to the user?

The higher something is toward a light source, the lighter the surface becomes. To make the surface of our cards or components stand out from the background, we use lighter shades of grey than our selected background color.

If you already have your app’s design system, chances are a good number of your components will have light or white backgrounds to them. You can pull those components into your dark design system and start by changing their background opacity to 16%.

The shade of grey created by doing this should stand out well from your background and communicate the highest on-screen elevation to a user. You can play around with opacity however you like to get the desired effect. Material Design recommends a range of 5 to 16% opacity to communicate elevation to users when making dark mode components.

5. Consider Accessibility

After you’ve elevated the important components of your app by lightening them, it’s important to consider app design accessibility. Dark theme surfaces must still be dark enough to display white and grey text.

They should use a contrast level of at least 15.8:1 between text and the background. If a component’s background color is not dark enough to meet this contrast level, the elevated surface won’t pass the 4:5:1 standard mentioned in point #3 of this article.

Final Thoughts on Designing in Dark Mode

Now that we have covered a few tips on how to design for dark mode, there are a few other considerations to think through before committing to rolling out a dark mode version of your app.

Give Users Control

First, you want to make the action to swap between dark and light mode easy to accomplish and voluntary. Some sites swap their apps into dark mode at certain hours by default but giving your users more control over their experience and the ability to customize when they want which version will lead to a better experience overall.

Consider Your Audience

Another consideration is the type of app you are designing for. This is where color psychology can come into play, and we need to consider the way that we evoke different feelings in the user. A dark mode version may not be a good idea for apps where we want to communicate a feeling of trustworthiness, think of banking or finance apps.

In these cases, a dark mode may make users feel like something clandestine is occurring. Similarly, if you are a health and wellness app, darker colors may not produce the feelings of calm and happiness that you would initially want.

When in doubt, always test it out!

If you’re thinking of designing and implementing a dark mode for one of the reasons covered in this article, try taking just a few of your key screens and converting them to a dark mode to get a feel for how it would look. Get your dark mode screens in front of users or study your app’s user base to see if many of them use the app in the later hours of the day when it’s darker.

I hope this article was able to shed some light (haha bad pun) on the area of dark mode design. If you have any questions or are considering building a dark mode version of your app, please reach out and we will be happy to connect!