Designing for dark mode

Ollie's Photo by Ollie Jackson


In a recent post, we commented on the announcement that WhatsApp is currently beta testing dark mode in their mobile app. Whilst not surprising, it does mean that some of WhatsApp's 1.5 billion users will be seeing dark mode for the first time. And that raises the question of where dark mode is headed, what users might come to expect and how the feature can be implemented across websites and web applications.

In this post we'll look for answers to the following:

  • What exactly is dark mode?
  • Why would I use it?
  • Why is it relevant to my business?
Dark Mode Header Image

Let’s start by clarifying exactly what dark mode is

Dark mode, sometimes referred to as night mode, is a colour scheme that uses light-coloured text, icons and UI elements on a dark background. It is an alternative to the more familiar, dark text on a light background.

Where did dark mode come from?

Whilst there is some confusion over the precise origin of dark mode, it is generally accepted that the feature was first popularised by developers who have long used dark mode when writing code. And that makes sense, because when you’re spending long hours in front of a screen, eye fatigue can set it - we can vouch for that here at Club! One way to combat eye fatigue is to use dark mode. We’ll expand more on this next.

Some websites and applications are intentionally dark as they form part of the overall branding. And so it’s helpful to remember that a purposefully-dark design is not the same as dark mode. Dark mode is almost always an option that can be turned on or off. Both Spotify and Netflix have used dark user interfaces for a number of years, but there isn’t an option to switch to a lighter interface.

Why would I want to use it?

As we mentioned earlier, dark mode is a useful way to combat eye fatigue. Bright backgrounds make for brighter screens, which places more strain on your eyes. And when you’re working at night or in dimly-lit environments, bright screens cam become particularly troublesome. Dark modes help to give your eyes a break, albeit whilst not completely eliminating eye fatigue - the answer to that lies in stepping away from the screen!

Accessibility is another popular use case for dark mode. For users with visual impairments, white backgrounds produce so much glare that if the text is not dark enough, it can make a website difficult to read.

Dark mode is no substitute for true accessibility. Nor can it compensate for poorly chosen typefaces that are set at the wrong size or weights. Dark mode has its own design requirements. Simply inverting the background from light to dark and the text from dark to light, will not serve as a solution.

Dark Mode Test
There is more to dark mode than simply inverting the colours. To illustrate here is what the Club journal might look like - the left image is a simple inversion, the right is a more considered dark colour palette.

Why is it relevant to my business?

Not everyone will care about dark mode. But some like it because it gives their eyes a break. Some find that it makes the text easier to read. Others just like it because it looks ‘cool’. Either way, making it an optional feature is a small way to make a potentially big difference to your users.

We’ve explored how and why dark mode has gained popularity, but how might the feature help your business? Currently, spending the time to add dark mode to your website or application is viewed as a courtesy to your users. A ‘nice to have.’ But given the surge in popularity of dark mode, particularly across mainstream apps, services and software, might users come to expect dark mode everywhere? Including your website or application.

As a designer and thinking about who we work with here at Club, I see two primary use cases when evaluating the need for dark mode:

  • Text-heavy websites with long-form reading (blogs!)
  • A web application that a user interfaces with for several hours a day

The nature of a blog demands that a user spends the majority of their time reading. The increased contrast that dark mode provides makes reading both easier and faster. I use Instapaper - the “read later” service in dark mode for this very reason.

Dark Mode Instapaper
Instapaper allows their users to switch between different variations of both light and dark modes

If the users of your web application spend several hours a day interfacing with it, then dark mode will help to combat eye fatigue. Bear in mind however that a web application that has both a light and dark mode will place extra demands on the development side of things. As each feature, both new and existing will need to work perfectly in both modes.

You might like to implement dark mode by automatically switching from light to dark based on the time of day. And on MacOS Mojave, you can base which mode your user sees according to whether they have dark mode enabled their device. Nifty!

Irrespective of how or why you are using dark mode, users should be able to toggle the feature on or off. Dark mode, is a preference, not a requirement.

If you own a marketing website, dark mode is somewhat less relevant because in this instance the design of your website should be closely tied to your overall brand.

Summary

Dark mode may have started as a viewing preference amongst developers, but it has quickly gained traction amongst users of mainstream websites, services, applications and software. It is kinder on the eyes and can be more accessible.

The decision to add dark mode depends on your target audience and the use case. But if applicable, the feature is nice way to both delight and better serve your users.

P.S. This post was written in dark mode using Bear for Mac.


Ready to get started on that new web project?
Let's get to work! →