Dark mode has been around longer than you might think. In fact, the world’s first computers used dark mode by default because screen illuminating technology wasn’t efficient enough to light up an entire screen without burning out.
Today, dark mode user interface (UI) has become a common preference for web and app users alike, and dark theme design has become a popular design style, especially in the tech industry.
In this post, I will talk about the pros and cons of dark mode UI design and give you 7 helpful tips for creating effective design for dark mode.
What is dark mode?
Dark mode is a user interface (UI) design theme that displays light text on a dark background instead of the traditional dark text on light background. Both Google and Apple computers and mobile devices offer dark mode design settings which allow users to toggle between light and dark themes.
What’s the difference between dark mode and dark theme web design?
The rise of dark mode has also driven the demand for dark theme web design, which uses the same concept as dark mode display. These two concepts are often considered to be the same but simply put – dark mode utilizes a preset dark theme design throughout the device interface. Dark theme website design displays a dark background regardless of light or dark mode interface settings.
This design approach is popular for a few key reasons:
- It looks cool – dark backgrounds can give web design a professional, luxurious, and sometimes mysterious feel, especially when paired with vibrant colours and eye-catching illustrations.
- It can complement your brand style – dark theme design often complements brands with vibrant colour palettes, and can give you a striking canvas to tell your brand story.
- It helps users focus – darker backgrounds can serve as a dramatic canvas that draws users’ attention to key elements of design and copy.
- It may decrease eye strain – while not scientifically proven, many users feel dark mode UI design decreases eye strain and dryness, especially during prolonged periods of screen time.
- It’s unique – although dark theme design is popular, the majority of websites use light theme design, and many can start to look the same. Branching into dark themes may help your brand differentiate from your competitors.
Dark theme design challenges
Let’s be honest. Dark mode UI design looks pretty epic. But there are also a few challenges that come with dark design territory:
- Text can be harder to read – dark UI is not ideal for heavy reading, and may actually cause eye strain (which is ironic considering that many users prefer dark mode over light because it decreases eye strain).
- Colours can behave differently in print than digital – certain saturated colours might work well on a black print design but lack sufficient contrast in digital design.
- Design can feel cluttered – there’s a reason that it’s called “white space”. Dark UI doesn’t have the same breathing room as light themes. Multiple design elements can quickly make the screen seem overcrowded.
- Colours send different messages – colours communicate different emotions on dark backgrounds than they do on light. If your colour palette was chosen for a light theme UI, you may need to expand your palette to communicate your message effectively on a dark background.
- Some users just don’t like it – light backgrounds are undoubtedly the norm in design, so it’s rare you’ll hear someone complain about a light UI theme. But some users have a strong dislike for dark mode which may taint their experience with your design.
7 dark theme design tips
When done well, dark theme design can captivate an audience. That’s what we want for your design. Here are six design tips to optimize your dark theme web design so it looks great and communicates your story effectively.
1. Consider your brand
Dark backgrounds aren’t for every brand. So before you invest time and resources into crafting dark theme UI design, evaluate your brand story, brand character, and colour palette. Will a dark background help you tell your story more effectively? Will it help you highlight certain product features? Will it fit the context of your offering?
If the answers were no, a dark theme might not be for you. Otherwise – go for it!
2. Avoid pure black
Dark theme design doesn’t require a pure black background. In fact, dark grey can accomplish the same look and feel as pure black but can soften the contrast between text and background, making it easier for users to focus.
Dark grey backgrounds also enable you to use a wider range of colours in your design and achieve greater depth through shadows and elevation.
3. Avoid heavily saturated colours
Saturation refers to the intensity of a colour. The more saturated a colour is, the purer it will appear. The less saturated it is, the more grey it will appear. Saturated colours look great on light backgrounds – e.g. a brilliant royal blue on a white background. But put that blue on a dark background and it can be difficult to read, causing the reader to strain to see it clearly.
4. Make sure there is enough contrast in your colours
Colour contrast is key in dark mode and dark theme design because your background needs to be dark enough that white text is easy to read. Contrast is defined as a ratio of one colour to another. Not enough contrast and your design will appear dark and muddled. Too much contrast and your lighter elements may appear to glow and deliver a jarring visual experience.
5. Soften white backgrounds
Just like dark backgrounds don’t have to be pure black, your white backgrounds don’t have to be Crest White Strips white. If whites are too bright, they can glow against a dark background and create a jarring visual experience for your user. Instead, soften any white backgrounds by using a slightly darker shade of white.
6. Match your colour to your message
Colours evoke different emotions depending on their background. For example – a bright pink on a light background might feel light and playful. That same pink on a dark background might feel edgy and mysterious. Make sure your colour palette sends the right message to your audience.
7. Communicate depth
Create a clear content hierarchy in your website design. On a light background, this is often achieved with shadows. But shadows aren’t as readily available in dark UI. Instead, highlight or illuminate different elements – the more illuminated something is, the closer the design element appears in the foreground.
A great example of dark mode in action: Apple AirPods Pro
If there was ever a web experience design to call sexy, it’s this pretty much anything by Apple’s design team. For the sake of demonstration, let’s take a look at how Apple makes the AirPods Pro look like a million-dollar piece of art. We love how they start by showing the white headphones shadowed against a stark black background, and then bring them out of the shadows as you scroll down the page. The black screen also serves as a canvas for white text and vibrant visuals.
It’s a lengthy page to scroll through, but trust me – it’s worth it. When you hit about mid-page, Apple describes that the AirPods Pro are noise-canceling, then introduces the transparency feature by transitioning from a black background to white background, dramatically driving the point home.
That’s a wrap
When done well, designing dark mode in your UI can be stunning and incredibly effective at capturing your audience’s attention. But when done poorly, it can be distracting and difficult to engage with.