Dark Mode UI in the Spotlight: 10 Tips for Dark Theme Design

Mateusz Przytuła

Nov 10, 2021 • 23 min read
10 Tips for Stunning  Dark Mode Design (1)

Stepping into the darkness of digital interfaces became a global trend among major products in recent years.

It was popularized by software leaders like Google and Apple with the introduction of native dark mode support in Android and iOS.

Now, well-known brands highlight the availability of dark themes within their products or systems, making it an important, if not indispensable, asset in terms of user experience.

In this article, you will find handy tips that will help you prepare for shifting into dark theme design. But first, let’s define the term dark mode and see what's the difference between light and dark themes.

What is dark mode?

Dark mode is a display setting for user interfaces that presents light-colored text, icons or other UI elements on black or dark grey backgrounds or dark surfaces. It's the opposite of the commonly used light theme design.

It can be also referred to as: dark theme, black theme, black mode, or night mode.

No matter if you are thinking of designing a purely dark theme interface for your digital product or simply adding an alternative option to the existing light mode:

First, you should define what is the goal of implementing a dark theme.

mateusz przytula

Mateusz Przytuła

Senior Product Designer & Team Leader at Netguru

Then you can move to planning how you can achieve the best desired outcome and satisfy your users.

Before you start playing with colors and UI elements, let’s understand where the need for the dark theme UI design comes from and how it can impact the usability of your digital product.

The purpose of a dark theme

First of all, a dark theme as a pattern in displaying information on screens is a rather old concept. You may still remember the early era of home computers with Matrix-like green text on black CRT monitor screens.

We forgot about them for nearly three decades as we moved to paper-like interfaces with dark fonts on white backgrounds. This went on until the releases of Android 10 and iOS 13, when the dark theme entered its renaissance with a new, revised approach.

Benefits of dark UI

What previously was a limitation of available technology is now a trend with a solid scientific background. Google outlines it in their Material Design guidelines:

“Dark themes reduce the luminance emitted by device screens, while still meeting minimum color contrast ratios. They help improve visual ergonomics by reducing eye strain, adjusting brightness to current lighting conditions, and facilitating screen use in dark environments – all while conserving battery power. Devices with OLED screens benefit from the ability to turn off black pixels at any time of day.”

Clearly, a dark UI is about more than just hype.

mateusz przytula

Mateusz Przytuła

Senior Product Designer & Team Leader at Netguru

Let’s explore some of the advantages of using dark themes.

Reduced eye strain

Even if you haven’t heard of visual fatigue, you’ve probably experienced it after long hours spent in front of the computer screen or reading pages and pages of small black print on snow-white paper. That’s because the human pupil is sensitive to the amount of light that gets to it. The body’s response to increased exposure to bright light can affect your body in many ways, causing stinging eyes, blurred vision, headaches or neck pain.

Scientific research supports the benefits of dark themes and points to negative polarity schemes (light text on dark background) as easier on the eyes.

Increased visibility in low-ambient lighting

Another health-related aspect of dark theme use is the visibility of content in low light areas. The symptoms you might have experienced after long exposure to screen light can be even stronger when you work at night or in dim-lit rooms.

The dark user interface will relieve you (and your users) from these issues, allowing for a safer and healthier experience. Switching to dark mode can dramatically reduce eye strain and other negative effects of long in-app sessions in low-ambient environments.

Accessibility

For most of us, the health benefits of dark mode are just a convenience, but for others they are a necessity. Users with severe migraines, visual impairments, or other visual disorders need dark-themed interfaces to overcome the significant obstacles they come across when using the regular light mode.

As accessibility is becoming a standard, not just a good practice, consider this a strong point for the dark theme advocates.

mateusz przytula

Mateusz Przytuła

Senior Product Designer & Team Leader at Netguru

Enhanced focus

The benefits listed above obviously translate into better focus – you can definitely do and remember more without a headache and stinging eyes that may occur while using light themes. But that’s not all. You’ll also notice that, with light elements on a dark background, it’s easier to focus on specific content as it pops above the unobtrusive background.

That’s why many specialists, such as software developers, enjoy the dark-themed interfaces of code editors. As light colors highlight specific elements in the code, the structure is visible at a glance and moving through the lines takes less time.

Consistency with other apps

The more apps and websites offer two color schemes, the more users will expect this choice from all interfaces they interact with.

Thus, users will look for apps that allow them to maintain a consistent visual experience.

mateusz przytula

Mateusz Przytuła

Senior Product Designer & Team Leader at Netguru

I can’t possibly imagine a designer who would like to give anyone a headache just because the stakeholders underestimated the meaning of dark theme UI design. Actually, the stakeholders should worry, too – giving users a headache is not far from losing them.

Improved brand image

Light and darkness, and the contrast between them, evoke specific emotions – and this can be your chance to accentuate your brand’s image. Dark colors are associated with sophistication, mystery, elegance, and high-end products and experiences. Netflix and Spotify are your landmarks for well-executed dark themes that correspond with the atmosphere at the cinema or a concert hall, putting the content in the spotlight and leaving the app interface in the shadows.

Energy saving

Finally, dark mode designs can consume less energy than light-themed interfaces. This applies mostly, but not only, to devices with OLED screens, as they can turn off the black pixel areas.

Tips for creating a perfect dark theme

Now that you’re more aware of the strong and weak points of the dark theme UI design, you surely have a couple of questions in your mind:

  • How to pick the best color palette for dark themes?
  • What to do with font styles?
  • Are there any UI elements to avoid?
  • How to introduce the alternative UI to users?

The tips below will answer these questions, and more.

Tip 1: Avoid pure white fonts

How to avoid pure white fonts in dark mode

If black text on a white background works just fine, why wouldn’t white text on a pure black background work equally well? It turns out that with dark backgrounds, we perceive color contrast differently and white on black is too stark to read.

First and foremost, opt for a dark, desaturated background (for example dark grey) combined with a slightly dimmed white color for objects like text, buttons, etc.

Tip 2: Desaturate vibrant colors

Color desaturation in a dark theme

Simply avoiding black or white won’t cut it if you’re going for an optimal dark theme color palette. The next thing to carefully examine is color saturation on dark backgrounds.

Many shades seem to look jarring when put on dark surfaces, which is particularly bad news if your brand palette consists of vivid, saturated colors. You might want to tone it down with a bit of white or dark grey to avoid this jarring look that makes users’ eyes squint.

Tip 3: Use brand colors wisely

Let’s put all usability aspects aside and glance at dark mode designs from a different perspective.

Interfaces with semi-black backgrounds create a strong, sophisticated look and attract attention with their sense of style.

How do you combine this new vision with your brand identity?

Keep in mind that the color palette for your dark theme design doesn’t have to be derived from the light mode.

mateusz przytula

Mateusz Przytuła

Senior Product Designer & Team Leader at Netguru

For a color scheme with a dark background and light text, add your brand color (a bit desaturated if needed) as the accent so that you maintain consistency across both UIs without overloading the general image.

Tip 4: Never use shadows

Example of dark mode without shadows

I realize this may sound pretty harsh – why would you simply banish a design element from a UI? – but there’s solid logic behind this. To create a shadow, you need an object and a light source from a specific direction.

In a light theme’s UI, the background makes shadows feel more natural, while in a dark theme, the shadows don’t stand out in the same way and can confuse rather than improve the design. The proper use of light is a more accurate way to create depth and elevation in a dark theme design.

Tip 5: Use light for elevations

Using light for elevations in dark mode

So you removed the shadows from your dark mode UI design – and now what? Work in reverse and use light to create elevation and visual hierarchy that every interface needs. The lighter layers will seem more elevated than the darker ones.

Play with tints and shades to introduce a sense of depth in your UI.

mateusz przytula

Mateusz Przytuła

Senior Product Designer & Team Leader at Netguru

The same goes for text opacity: save the highest values for the largest and most important text elements and tone it down for those of lower hierarchy.

Tip 6: Allow users to switch preferences

Creating a dark theme means more than just another design to add to your website or app. By enabling an option to switch between the two modes, you send a message to your users:

  • You care about their individual preferences.
  • You give them more control over how they use your product.
  • You seek a deeper connection with them through a personalized experience with your product.

At the end of the day, users choose the products they feel comfortable with – you can only benefit from highlighting the fact that you understand and respect this. Adding a toggle or tab is a small tweak that can bring great results.

If you want a more scientific point of view, look no further than Nielsen Norman Group. After extensive research, they concluded a crystal clear recommendation:

“We strongly recommend that designers allow users to switch to dark themes if they want to — for three reasons:

  • There may be long-term effects associated with light mode.
  • Some people with visual impairments will do better with a dark theme.
  • Some users simply like dark mode better.”

Tip 7: Maintain accessible contrast ratios

Contract ratios in dark mode

The deal breaker of every dark theme interface is the contrast between the objects and text. Not only from the aesthetics and usability point of view, but also when you take accessibility into account.

Actually, accessibility guidelines can be a perfect point of reference for the right contrast ratios across dark theme design. Contrast testing tools like Accessible Colors, based on Web Content Accessibility Guidelines (WCAG 2.0), will help you validate your ideas or select the optimal shades and text size when designing from the ground up.

Tip 8: Adapt text opacity to its emphasis

Now that we’ve discussed the aspect of contrast and elevations, let’s go back to the specifics of text in a dark UI design. Make sure that you give different opacity to text elements according to their priority – the most opaque text goes first.

At the same time, your least opaque text should have enough contrast from the dark background you place it on so that it remains easily readable as well.

Google recommends applying 87%, 60% and 38% opacity of white for high-emphasis, medium-emphasis, and disabled texts respectively.

But feel free to adjust it accordingly to the results of your usability tests with users.

mateusz przytula

Mateusz Przytuła

Senior Product Designer & Team Leader at Netguru

Tip 9: Review your imagery database

For apps or websites using a lot of visual content like illustrations or pictures, you might want to check if they don’t need extra adjustment for the dark mode.

If the contrast between the bright image and dark background turns out too heavy, you can replace illustrations with an updated color palette and use a filter on images that will decrease the brightness and contrast.

Tip 10: Test your solutions with end users

Before you say “Thanks, Captain Obvious”, let me state this: there’s more to testing a dark mode than your typical UI testing. You need to test dark theme designs in different environmental conditions and levels of light as they can significantly change the look and feel of the UI for the users.

Keeping these factors in mind, you’ll get more valuable feedback that will help you tweak both dark and light mode designs. Apart from that, test different ways your users can switch from one mode to another.

Drawbacks of dark theme

I bet that after learning all the benefits of the dark mode “join the dark side” suddenly sounds tempting to you. I also hope that this list of tips on creating a stunning dark theme UI design only reinforced this impression. However, you must be aware of certain difficulties that come with implementing this kind of interface.

Limited color range

Designing an outstanding dark theme interface requires more careful color selection than with a regular light background. Certain colors and shades can create too much of a contrast and cause visual fatigue, which is exactly what you want to avoid by using dark mode.

Things will get particularly tricky if these limitations affect your brand palette.

mateusz przytula

Mateusz Przytuła

Senior Product Designer & Team Leader at Netguru

In the tips section, I shared a few thoughts on how to overcome these issues.

Data and text-heavy content limitations

The more data- and text-saturated your product is, the harder it will be to design a usable and aesthetic dark-themed UI. This type of interface is perfect when the content you want to highlight contains a limited amount of visuals and small bits of text. With multiple content types within one screen, you’ll want to go further than just reversing the color scheme of your UI.

Challenges of color contrasting in B2B solutions

The typical use case of business-to-business products or websites is that users spend long hours interacting with them. If this is the exact reason why you want to help them by introducing dark backgrounds, be sure to do extensive research on color contrasting, visual hierarchy, and testing. Without it, you risk losing clarity and cluttering the UI space, which will distract users instead of gratifying them.

Shrinking space

I mentioned cluttering the UI space for a simple reason: dark surfaces tend to look smaller than light ones. Painting walls in dark colors can visually shrink the space, and the same goes for UIs. You’ll want to take a closer look at white space and the distance between different elements.

Poor support for emails

Email clients and online marketing platforms are perfect examples of apps that struggle with proper implementation of dark themes in emails. There are a couple of ways email clients handle their dark mode settings when it comes to email view:

  • The dark mode is visible only across the application, but it doesn’t impact the email content.
  • The dark theme supports only selected emails if the dark mode settings are enabled on the device.
  • The dark mode forces a new, automated color scheme onto your email.

It may cause issues for both senders and users. Even though you can enhance your email with some HTML code that responds to the interface settings of an email client, the rendered email will often look less appealing than in its default light-themed version.

Many emails will look good only on a few email clients while others will completely break them.

Final word: join the dark side!

Dark theme UIs are gaining traction in the digital design world not only for their aesthetic qualities, but also because of their health and accessibility benefits.

Users will soon (if they don’t already) expect the ability to choose between a light and dark mode in any app they interact with, so it’s best to prepare yourself for the upcoming change. With the tips I shared above, you’ll feel more confident when designing for a dark-themed UI. The future of darkness is bright, at least in the software world.

Related topics

More posts by this author

Mateusz Przytuła

Mateusz is a designer who believes that combining knowledge from different fields such as...
New Call-to-action