Designing for Dark Mode
Perfect your designs with these guidelines
As with a lot of what Apple does, ever since they released Dark Mode with iOS 13 in 2019, a lot more applications and websites have come out supporting this new visual feature. However, creating a dark interface is not as simple as inverting light mode. We don’t think about it but there’s a lot that goes into designing a great interface: colors, shadows, shapes, visual hierarchy, etc. When it comes to dark mode, we have to follow some guidelines in order to make a dark interface of an application look just as good.
Unfortunately, if some design guidelines are not met, a dark interface on any application can instantly create a bad experience for its users. As such, many designers tends to leave dark mode as an after-thought. This is really unfavorable since there are many advantages to dark mode interfaces. The biggest advantage is accessibility. With technology becoming more mobile and accessible to all, it’s important that we cater our designs to all types of users so that they can reliably trust our interface in any situation: low-light or otherwise. Furthermore, when it comes to digital products like apps, a dark mode interface can extend the battery life of a smartphone by relying on less pixels to display colors. This is why on Android, turning on the Battery Saver mode sets your device’s interface to Dark Mode.
While it does take some extra effort on a designer’s end to work with dark mode, I believe going this extra mile is worth it. To help you out, here are some of guidelines we follow when designing from Dark Mode. These guidelines are backed by the industry’s best practices.
Background
It all starts with the background. Many users tend to use the pure black background as a starting point for dark mode. But is this really the wisest choice? Well, it comes down to what your content is and what accessibility settings your users have turned on.
If you’re developing a news or reading application, or any app that relied on massive text reading, then you’ll want to carefully determine which background to use based on your users’ accessibility settings. If a user has implied within their settings that they want a sharper contrast, then by all means use white text on a pure black (#000000) background. This is the best option for color contrast. Furthermore, if your application is primarily video based or not too reliant on text, then it’s better to go for pure black as well.
However, a scientific study has shown that by using a pure black background, you are shutting off the amount of light a device emits to its users. As such, a person’s eyes will have to be strained more in order to read text on a device. This can increase astigmatism for users. Therefore, it’s best to rely on a background that lies between dark gray and pure black. Google’s Material Design recommends using dark gray (#121212).
For the more advanced designers who want a challenge, it’s certainly possible to create a dark mode option where the background is a dark mode version of your application’s accent color. For example, Twitter’s first Dark Mode wasn’t pure black, but rather a very dark blue. This kept true to their design language of blue and white, and yet managed to contrast well with the existing content on their website.
Font Colors
This is the one aspect of designing for Dark Mode where your intuitions can carry over from designing for Light Mode. In a normal, bright colored interface, we split our text into various text styles: Large Title, Title 1, Headline, Body, Caption, etc. We tend to use pure black for high emphasis text, and then slowly reduce the opacity of black as we move down in terms of text styles and text importance.
The same intuition can be used for designing in dark mode. By using different variants of a white font color, you can establish the importance for different labels in an interface. Take a look at this graphic from Apple and notice how the text colors change.
Also, look at this color chart from the UX Collective to see the relationship between the background, foreground, and text colors (also look, the background isn’t a pure black!).
Accent Colors
Accent colors are the most defining feature of any interface. With a proper usage of accent colors, certain colors can be owned by certain brands. Take a look at this chart below. Although some of it is slightly outdated (rip vine), when we think of these companies, our designer brains instantly associate the colors to this brand.
So how can we preserve the brand color and identity when designing for dark mode. If you’re lucky, you can use the same color and it will work well in both themes. However, this is most likely not the case.
While there is no definite guide to creating the dark mode version of an accented color, it’s important to make sure that it contrasts well against a dark background. This means that it has to be a lighter version of the darker, more saturated accent color.
One chart that I particularly enjoy is shown to the left. From a quick glance, it seems like there isn’t a big difference between the light mode and dark mode accented colors.
However, you’ll quickly notice that the dark mode colors are actually much lighter and less saturated than its light mode variant.
Many interfaces use accent colors and this table consists of the most commonly used accented colors. You can see that the main color is still preserved i.e. the first row is still blue, the second is green, etc. But, the color now contrasts well against a dark background.
To determine the best color that stays in tune to your interface’s design language and contrasts against a dark background is a matter of trial and error. But there are some tools that can help with this process which I have listed at the end of this article.
Accounting for every accented color in your interface and developing a dark mode variant for it is, no doubt, time consuming. I’m sure you’re beginning to see why designing for dark mode is now an after thought for many designers. However, putting in the extra effort can really make you design stand out and increase the admiration from your users. A well designed interface in all situations, light mode or dark mode, is something that is universally admired by all.
Take a look at this interface below. We’re given a card element with two designs for Dark Mode. On the left, we have the same accent colors that were used during the light mode. On the right, we have the dark mode variant of these colors. You can see that by using less saturated colors that contrast well, the dark mode interface really shines.
Shadows
Shadows are one of the most common designs you will find in an interface. Used to establish an elevated look on the UI elements, there are many ways shadows can enhance your UI and in some cases, guide your users throughout your application.
While I won’t be getting into the magic of shadows, I do want to mention how the coloring of shadows matter, especially in a dark themed interface. Some may be inclined to invert the color of the shadow. After all, if a black shadow on a light colored background achieves an elevated effect, then so must a white-colored shadow on a dark background. This is not the case.
Unfortunately, that approach creates more of a “glow” effect instead of the elevated effect we desire. It can even cause anxiety in your users to see the UI elements suddenly blurred out and glowing all across the screen.
So what do we do? Do we leave the black shadow as is? Nope! In fact, many designers advice not to even use a shadow for a dark interface. Instead, they recommend changing the background to continue to establish the visual hierarchy.
Visual Hierarchy
Shadows are great for light mode because they establish visual hierarchy. By viewing elevated UI elements, you can be guided through the interface. Elevated elements represent the hierarchy of the UI. However, using black shadows in a dark interface can completely ruin this visual experience.
To still use elevation in a dark mode interface, we have to rely on an element’s background. Take a look at this chart from Material Design.
As you can see, as we scroll down, we can see that the square’s background are getting lighter and lighter. This is what we are talking about when we say that an element’s background can be a great substitute for shadows in order to provide elevation.
The more lighter squares seem far more elevated against the dark background than the more darker squares. With this design hack, we can reestablish elevation and hierarchy of elements within our design.
So when designing for Dark Mode, you’ll want to keep in mind how the hierarchy of your elements will be organized. When you do, keep in mind that the lighter the background, the more elevated the element.
See how this rule was used to establish hierarchy in the below interface.
Design Tools for Dark Mode
Lastly, here are some great tools and additional readings to learn more about designing for dark mode. With this under your belt, you’re well on your way to crafting the perfect dark mode designs.
