Designing for dark mode is more than a black background

Carrie Cousins

UX/UI

{date}

{#hash1}

{#hash2}

Illustrations by {name}

To be effective, dark mode should go beyond an inverted color palette. Here’s how to enhance your interface using darker tones.

8 min read

Stay informed on all things design.

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X.

Start Now →

A website or app featuring dark mode might have a black background, but this design feature alone isn’t enough to constitute this interface.

There’s a big difference in designs that use dark mode in a way that’s visually appealing and highly usable, compared to websites that simply feature a dark aesthetic.

True dark mode is so much more than using a reverse color scheme, with the potential to delight users, impact usability, and even provide a more accessible option for your website or app.

Dark mode 101

Facebook has it. Gmail has it. So do many apps on your phone and computer, regardless of whether you use an iOS, Windows, or Android device.

But what is dark mode?

Simply put, dark mode is a predominately dark color palette. Darker colors are used for the background, large elements, cards and other accents, with lighter colored text elements.

However, it is not as simple as a black background and white text. Although in a truly minimal design scheme, it probably could be.

Dark mode isn’t particularly new – designers have been creating in “reverse” as long as printers and websites could handle it. But it is trending, thanks to options in popular user interfaces and a seemingly high preference among users.

Users like dark mode

Website designers and developers might be a little biased, but do seem to have an affinity for dark mode. The general public seems to agree.

From two informal surveys (there’s no authoritative source on a phenomenon this new yet):

68% of respondents use dark mode when it is a choice (Slashdot poll).
82.7% of respondents use their operating system dark mode (Developers Channel Twitter survey).

Discord, a chatting app, is mostly based in dark mode after testing it with users and finding great success.

“The percentage of Discord users on light theme is in the single digits — and not even the higher ones,” according to the Discord Blog. It is worth noting that app developers found that it was important to support both color schemes, even with such a high preference for dark mode.

Dark mode interface design on a mobile phone

What makes dark mode work?

Dark mode might be most appealing to users because it is different. By flipping the color scheme, you get immediate access to a cool new aesthetic.

Moreover, dark mode gives users more control over how they use websites and apps. It seems like such a small tweak, but the ability to set this preference can greatly enhance a user’s connection to your design and affinity for using it.

An app or website that is more in line with user preferences, can result in more frequent visits with longer durations. (This fact alone makes considering dark mode a no-brainer!)

Dark mode works for other reasons as well:

Forms an emotional connection with users.
Enhances usability throughout different times of day and lighting conditions.
Allows for greater accessibility for varying levels of vision impairments.
Increases battery life