Designing for dark mode

In a recent announcement, it was mentioned 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?

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. When you’re spending long hours in front of a screen, eye fatigue can set in - 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 - 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 - they are just dark by design rather than offering a 'dark mode'.

Why would I want to use it?

As we mentioned, 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 can become particularly troublesome. Whilst not completely eliminating eye fatigue, dark mode helps to give your eyes a bit of a break.

Accessibility is another popular argument for the introduction of 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 design decisions - it definitely can't 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, won't do the trick. Instead, it should be carefully considered and tested.

Why is it relevant to my business?

Not everyone will need to consider about dark mode.

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 or familiar depending on what they're used to. 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 luxury 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 as standard?

We see two primary use cases when evaluating the need for dark mode:

• Text-heavy websites with long-form reading (blogs!)
• Web applications that users are in for several hours a day

If the users of your web application spend several hours a day using 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. Each feature, both new and existing will need to work perfectly in both modes so it'd need to be carefully planned, designed and implemented to provide any meaningful benefit.

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 the mode your user sees on whether they have dark mode enabled their device. Nifty!

If you own a marketing website, dark mode is arguably less relevant because the design of your website should be closely tied to your overall brand and might suffer rather than benefit from introducing a secondary dark mode design.

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

Summary

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

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