Designing for dark mode is more than a black background

Profile picture of Carrie Cousins

{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

Dark mode design example on mobile

Stay informed on all things design.

Thanks for submitting!

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

Get our latest stories delivered straight to your inbox →

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.



Dark mode and regular interface designs


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):

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