UI Design in Practice – Dark Mode

Design in Practice - Dark Mode

Practical Tips & Tricks.

Technology is with us all the time. We interact with apps and read websites all day and night. In some cases, white screens of the digital solutions may be inconvenient for our eyes. That’s why more and more designers pay attention to make their creations in two themes – light and dark.

Dark mode has got specific rules that we should follow to make it natural for the users. This story contains all of them, so you can create a theme that brings positive experience.

Ok, so grab the mug of your favorite coffee and let’s switch to the dark side!

Why dark mode?

The main advantage of Dark theme is better readability in low light environment. Dark mode reduces the luminance of device screens. It improves visual ergonomics and adjusts better in specific light conditions. Thanks to this it is much more pleasurable to interact with digital solutions in the evenings and late-night hours.

What’s more, if the device has got an OLED display, the dark mode can save a little bit more battery than in the light one.

Use Dark Mode to:

  • Reduce eye strain
  • Support visual hierarchy
  • Make solution feel more mysterious
  • Create an impression of luxury
  • Improve readability in the nighttime hours
  • Ensure the context of use (entertainment apps used in late hours)

Avoid Dark Mode if:

  • The solution is used during the day outside.
  • There is a lot of text to read

These were the advantages and disadvantages of dark mode. Let’s move to the practical tips you can use in your projects:

Avoid 100% Black

Probably the first thing that comes to your mind when you want to start to create a dark version of your design is – “Let’s make a black background!”.

No.

This is the common mistake we all made. We should use a very dark tone to the background.

Google’s Material Design recommends using dark grey – rather than black. Thanks to this, you can express elevation and space in an environment with a broader range of depth. The recommended dark theme surface color in Material Design is #121212.

Consider making colors less saturated

Dark modes should avoid using saturated colors. The first reason for this is accessibility – saturated colors do not pass WCAG’s standard of at least 4.5:1 for body text against the dark background.

Saturated colors may also cause eye strain, causing optical vibrations against the background.

Make two color palettes – for light and dark mode

In the tip above, I mentioned that desaturated colors work better for the dark theme. On the other hand, we all love vibrant tones in light user interfaces.

How to match these two worlds? The answer is following – it is good to create complementary color palettes for both themes.

Remember about accessibility in dark mode

There are specific guidelines for dark themes to be applied if you would like to make the solution more accessible. The most important one is the following: the contrast level between body text and the background should be at least 15.8:1. Thanks to this, readability should be good even if the higher surfaces will be lighter (Material Design).

You can use these tools to check the contrast ratios:
Contrast
Accessible Brand Colors
Stark

Avoid shadows

In light User Interfaces, we tend to use subtle shadows to communicate depth. Thanks to this, modern solutions feel more natural to use. However shadows are not so visible on the majority of dark mode elements. This is why they should be used less frequently. There is another way to communicate hierarchy.

Visualize hierarchy with elevation

As you already know, shadows do not work so good in the dark theme. The better way to communicate hierarchy is to play with the brightness of elevation.

Background surface should be the darkest of all. Elements that lays on the top of it should become slightly lighter. Thanks to this technique User Interface is naturally perceived by users.

To sum it up: higher elevation, lighter surface.

 


Some Additional tips:

Follow platform guidelines

Making a solution to feel natural on all platforms is a must. All major platforms prepared a specification that should help you bring dark theme (or mode) to life.

iOS Human Interface Guidelines main principles:

General:

  • Focus on content.
  • Test your design in both light and dark appearances.
  • Ensure that your content remains comfortably legible in Dark Mode when you adjust the contrast and transparency accessibility settings (tips from the section above will ensure this).

Color:

  • Use colors that adapt to the current appearance (use dynamic colors – two color palettes).
  • Ensure sufficient color contrast in all appearances.
  • Soften the color of white backgrounds (white background – darker color accents, dark background – lighter color accents).

Icons & Images:

  • Use SF Symbols wherever possible (The easily adjust to dark and light modes).
  • Design individual glyphs for light and dark appearances when necessary.
  • Make sure full-color images and icons look good.

Text:

  • Use the system-provided label colors for labels.
  • Use system views to draw text fields and text views.

Material Design main principles:

General:

  • Darken with grey (use dark grey instead of pure black)
  • Color with accents (apply limited color accents)
  • Conserve energy (darker colors save the power of devices with OLED displays)
  • Enhance accessibility (use principles mentioned in the section above)

Perform tests in light & dark theme

The perception of your solutions may be different depending on its theme. Prepare tests that will verify if the themes are well constructed.

You should also test dark mode in the nighttime in low light conditions. On the other hand, you may also go outside and check if the readability of the essential elements of the dark theme is enough in daylight. Thanks to this you will be sure that the user will get a high-quality product.

Make it a setting

Allow users to switch from light to dark mode when they want it. You can perform automatic toggling between themes that depend on daylight conditions, but it also should be a setting.

Switching UI theme is a serious change in the eyes of the users, and it should always be under their control.

Summing up

Dark theme (or mode) is now popular. All major platforms started to support that, and users will demand from the solutions to implement that. This is the best time to learn the principles and start creating a dark theme for your projects.

By the way…

If you start a new project or would like to organize your UI Library in Figma — do not waste your time creating everything from scratch. Feel free to use the Prime — Design System Kit. It helps you design UI with the best Figma techniques — Component Properties, Variants, Auto Layout and more.
See Prime in action.

To make it easier there is a gift 🎁 - Use UXMISFIT10 offer code to get 10% Off.

 
You can also Create User Flows faster in Figma & Sketch — With SQUID you can create User Flows directly in your favorite design tool. You may style them to your project brand within a couple of clicks. Prepare all kind of diagrams in minutes. See how it works.

 

Thanks for reading!