Dark UI design – 11 tips for dark mode design

What is the dark mode?

Dark mode (also called night mode or lights-out mode) is a type of user interface with an altered color scheme. Such contrast may resemble a negative in photography. It has dark background colors and light foreground, light text and elements on a darker background.

Its popularity rose in 2018 after the release of dark mode on macOS Mojave. Although it’s being talked about a lot recently, it is not a new idea at all. In fact, dark themes are what website design started from. As you might remember, the monitors in the 80s were of the “green-on-black” type, but only because the luminescent coating inside emitted a greenish glow. But even after the invention of color monitors, dark mode is still in use.

Whether it is a mobile device, desktop application or even a smart TV, you can find the dark mode option here too. Large companies such as Google and Apple have already incorporated it into their interfaces. Nor can we forget about social networks such as Twitter or YouTube.

These are the guidelines to achieve a good user experience (UX design) when creating a dark theme. Here are the 11 tips for dark mode design, its advantages, and drawbacks.

Benefits of dark UI

Why is dark mode so popular and some even consider it essential in every app? Here are the five key reasons why so many people love it.

Following the trend

Dark mode is extremely common. Most trend-focused design team would offer you designing an app in two versions: light and dark. The goal here is to satisfy users with any preferences. Although most users still prefer the classic light mode, the dark UI is gaining more fans. The number of people switching their mobiles to dark mode even in daily hours is growing, so we should NOT ignore it. Younger users, it seems, have it clear: they always bet on black.

It keeps eyes more comfortable

Just think about that moment you turn on your phone in the middle of the night. Probably, it’s the flash of the light interface across the dark room. Too bright and too unexpected for your eyes. It takes some time to get used to looking at the screen at night. The sensitivity to the light is the second important reason to use dark mode. And the brands take advantage:

“That may be the real reason for the rise of dark mode. Sucked into the soothing blacks and grays, you're less likely to put your phone away. Twitter, for example, found that users spent more time in its app when dark mode was turned on. You're less likely to notice that your eyeballs have dried out from staring into your screen.”
_{— Arielle Pardes - writer from Wired}

It saves battery life

The dark user interface allows users to save more power, if your phone has an OLED screen. At 50% brightness, YouTube saves up to 15% more battery life in dark mode than when using light themes.

So why should anyone resist another common feature and not implement it, if it is not just trendy but really useful? Dark design helps extend the battery life of your mobile device, and it is another thing most users would be happy to find out.

It gives more choice

When professionally-designed, dark UI relies on some color contrast standards that may make an app easier to navigate. Even though, for some users, dark themes are less accessible. But “dark thinkers” (those who primarily switch the cell phone interface and applications to dark mode) say that dark interfaces are more convenient to use even during the day. The popularity of these two modes is based mostly on users’ perception and habits. Their personal situations, goals, their setting or health conditions determine the choice more than the quality of dark mode design itself. For example, this particular situation:

“Dark Mode works well when you quickly scan a screen looking for visual/colored elements. In 2018, designers from SalesForce were wondering what mode was best when developing a dashboard feature. They interviewed many users and it turned out that users made decisions faster, and just as accurately, with charts displayed in Dark Theme.”
_{— Olivier Berni, writer from “UX Collective”}

It provides your brand with a new identity

There is the common thought exercise of picturing your brand and/or product as a person in marketing. How does it look? What are its preferences? How does it speak? What vibe does it give? Conversely, we can do the same with our product/app/website by adding a dark theme. Think of your light mode as if it were a morning person. Now, how would your UI behave if it were a night owl? It might appear more modern, mysterious, serious, and exclusive. Think of the benefits that this change might bring.

Dark UI vs. Light UI – when dark UIs don’t work well

As many benefits as the usage of a dark theme may have, it also has its drawbacks. It’s all because of a single concept: color psychology. We communicate different feelings and calls to action when using some colors over others. But before we go deep into dark mode’s disadvantages, let’s rather ponder on the situations where a light theme is always more advisable.

• For banking and finance websites and apps, we generally aim to transmit trustworthiness and sobriety. While a dark one gives the impression of mystery, richness, and modernity, it fails to transmit the values that more traditional companies have tried to convey to their clients.
• If you are a health and wellness blogger who wants to transmit calmness, joy, or hope, a dark theme is outright a bad fit. You’d go better by using off-white, light blue, and light green.
• If you are in the B2B SaaS category, showing lots of numbers in tables and charts in a dark mode may be a terrible idea.

However, dark UIs trump light modes in three scenarios:

• When the imagery outshines the text. When you need pictures and video to stand out, having a dark mode is advisable.
• When the end-users stay at the website or application for long periods.
• When users need to skim and quickly scan a layout using colors since these pop up easier in dark backgrounds.

Tips for creating a dark theme

1. Avoid pure black

Pure colors are those that have no gray in their “mix”. A couple of examples are white (#FFFFFF) and black (#000000). They are a temptation when creating dark themes because beginner designers may think that dark theme is just putting the black background and white text. But too high contrast will end up being an eyesore between the content and the background.

The recommended thing to do is to use dark gray instead of black and light gray instead of white. You can have as many variations of grays as you need. If you want to follow your brand’s identity, you can make the grays close to the primary color of your brand.

2. Avoid pure white fonts

The text often makes or breaks the user experience when it comes to a dark UI. We should think of ways to optimize (or even hide in plain sight) your text. The best way is using opacity. Conversely, pure white fonts may be a bad idea, whether your background is black or dark gray. In the first place, pure white letters in a dark background show as blurry or distorted on most screens. This phenomenon happens because of an optic illusion: the white light emitted by the screen tries to fill the dark space. When going for fonts, try to choose dim white and light gray colors. According to Google, 38%, 60%, and 87% opacity of light gray are the ideal values for disabled, medium-emphasis, and high-emphasis texts.

3. Be careful with saturated colors on dark themes

The light modes take into account the accessibility of buttons, icons, and texts. It is more difficult to calibrate the colors on dark backgrounds and not to use a palette that is too “neon” (which will only make legibility difficult). We have to take into account that when designing an interface in dark mode any type of color will stand out much more than in other circumstances. We must avoid the use of very saturated colors since they can vibrate visually. And we cannot forget to perform the corresponding tests to ensure the accessibility of the colors.

4. Use brand colors wisely

To preserve the brand identity in dark mode, you don’t have to worry about using the exact same colors as in the light mode. It is better to adapt your colors to the dark theme if needed. However, this doesn’t call for extreme resources such as a color inversion. It is recommended to use the saturated primary color on one or two elements, such as a button or a logo. And use in the rest of the interface the same primary color but desaturated.

5. Don’t lose your brand’s personality

While it would make sense to express the same vibe in the light UI, the dark theme may bring up completely different feelings in the user. We must adapt the tone of our brand to match the dark theme. The key is to find the balance to be able to transmit palette emotions that match the brand even with new colors.

Try to find a different sentimental approach for each of the two different color palettes, as trying to mimic the representation of the same mood in both cases can become quite challenging. What if you try to show another side of your brand, its darker side? It can be exciting and enrich your product image with a variety of new feelings and associations.

6. Never use shadows

The main use of shadows in a UI is to create a small elevation effect, so we can easily detect where the content is and what is background. In a light theme, it’s all smooth sailing because a white background and a black shadow get along very well. But what happens in a dark theme? Black background and a black shadow will not have much contrast and you will probably think of the following two things. Unfortunately, they rarely happen to be helpful:

• Do not make the shadow more intense than the background. It’s easy to fall into the trap of saying “Of course, that shadow is visible” because the background was a dark gray and the shadow is pure black. But unless someone puts effort and has good eyesight, your shadow will NOT be visible. Or at least not for its intended purpose.
• Do not set a shadow lighter than the object. Doing this boils down to a weird interface. When have you ever seen someone cast light instead of shadow? Sure, it adds some contrast but again, it doesn’t serve its purpose.

7. Communicate depth

A dark design doesn’t have to mean the usage of a flat layout. We also need to help users visualize the visual hierarchy of the interface. If shadows in dark modes are not the smartest idea for our design, what should we do? We count on several powerful resources:

• Use negative space in your favor. Less is more: As dark tones are less taxing for the eye but have your end-users looking for a bright object, they call for visual resting spots, layout simplicity, and scalability. If your design seems cluttered when in dark mode, maybe it’s a good time (as any) to simplify for both modes.
• Use contrast and lighting cleverly. Think of the background first: instead of a plain background, you can work your way into a degrading landscape to lighter or richer shades or gray, that draw attention to or where you want it. Furthermore, the contrast between the objects will also help you transmit that visual depth without having to use shadows.

8. Meet accessibility color contrast standards

A sound principle for theme design would be “aesthetics come second to usability”. But there is a higher priority: accessibility. By following accessibility guidelines, you kill two birds with one stone. Firstly, you increase your product’s user-friendliness, and you also save yourself the headache of figuring out which color values would give you an optimal contrast. You can use accessibility guidance tools such as Accessible Colors. It is based on Web Content Accessibility Guidelines (WCAG 2.0).

9. Review your imagery database

When trying to design and implement a dark mode, make sure the images on your website blend in. Don’t be afraid to adjust your images so that they look better in the dark theme. If the contrast between the dark mode and the image is too noticeable, you may use a general filter that alters the contrast and brightness of their display.

10. Allow users to switch from regular to the dark mode

Some websites and apps apply their dark modes to switch at specific hours of the day, or at certain dates (such as Halloween, which would call for dark aesthetics). That is a nice feature, but allowing the end-user to switch between modes themselves is even better for the following reasons:

• You give them control over your product. Customizability is often the preference that nets sales by giving the users both freedom and safety.
• A natural development of the previous idea would be that, by enabling a user-controlled switch, the end-user feels listened; you are showing attention to their preferences.

That is how you can keep both light mode and dark mode users happy!

11. Test your solutions with end-users

The problem designers face with the dark mode is the inability to define what users will see, given the numerous light conditions values of every potential user. This makes it difficult to know whether they will like the dark theme and how they will behave.

“Of the 17.3% of people (42 in total) who don’t use Dark Mode, a majority said it didn’t look “right”, which is somewhat of a vague answer, but suggests they gave it a try but were disappointed. Likewise, several people said Dark Mode text was hard to read, again suggesting they at least tried it.”
_{Thomas Steiner, Developer Relations Engineer on the Chrome team}

For the reason stated above, it is paramount to test your app/website/product’s dark mode. We strongly advise against focusing on aesthetics so much that you may forget about usability. If you’re not still convinced, here are more reasons to carry out end-user testing:

• It helps justify a design decision.
• It reduces the risk of failure with the product used.
• Helps to check if the product meets the user’s expectations.
• Matches business decisions with real-world use.
• Eliminates product defects.
• Helps you see how successful users are at their goals.
• It is useful for getting user feedback and comments on the product.
• Helps to understand users’ behaviors more than their attitudes.

Drawbacks of the dark theme

Of course, not everything is a highlight when implementing a Dark UI. It also has its dark side (pun definitely intended). Here are five reasons why a dark mode might not be the best idea for every site, app, or digital product:

Limited palette

It’s not a sound idea to throw every color of the rainbow into our dark mode design. Remember, less is more, and aesthetics come second to usability. That means our color palette in a dark theme is reasonably limited. For minimalist designers, this might even be a blessing in disguise.

It may cause eye strain

While many praise the reduction in eye strain from dark mode, a series of separate studies conducted between 2013 and 2016 show that the opposite is true. The studies showed that not only did dark mode increase eye strain, but it also made people less accurate with what they read. Light letters on dark backgrounds alter the visual focus, and therefore reading comprehension is lower.

“When the light is bright, as it is with a white background, our pupils constrict; when the light is dark, as with a black background, our pupils dilate. “Pupil dilation leads to optical blurring, whereas stronger constriction of the pupil leads to a better image quality on the retina, and hence, better perception of small details,” says Mayr. “Fitting to this explanation, we could also show that the advantage of positive polarity is particularly large when the text font is very small.” Like, for example, the tiny text on your phone screen.”
_{Arielle Pardes, writer at “Wired”}

Darkness and depression

Another suspected problem with the dark mode is related to its lack of light. Studies in places like Finland, Norway, and Alaska have shown that prolonged periods without exposure to light can lead to depression. Some medical professionals are concerned that dark mode deprives users of the light they may need, especially if they work most of the day indoors and have little exposure to natural light. This is a very extreme thing to do.

Visibility in bright light

Dark Mode has one major flaw that it never solves, and that is how difficult it is to read outdoors in bright conditions. It may seem silly, but the device that is supposed to take you everywhere should be well prepared to be used outdoors in bright light and have a clear theme so that the content is easy to read.

Summary

This article intended to shed some light on the dark mode (pun intended). Hopefully, it helped you understand if it is necessary for your product’s design or not. If you are still unsure, feel free to drop us a line about your project or brand.

It is clear that in some cases, it may be a decision based on aesthetic or marketing needs only, but please don’t forget the user who has to ultimately interact with that design. Our golden rule sounds like this: aesthetics come second to usability and accessibility.

Probably the crucial thing to ask yourself is: why do I want dark mode in this project?