Light vs. dark theme: which is better?

25.01.2022

Breakdown
Design
UI/UX

Photo by Maxim Ilyahov on Unsplash, edited for use.

In 2018, Apple unveiled MacOS 10.14 Mojave at their World-Wide Developers Conference (WWDC), and with it a system-wide Dark Mode. A year later in 2019 this feature was ported across to iOS and iPadOS 13 with the ability for it to automatically change between light (or regular) and dark themes based on the time of day.

Apple was of course not the first, nor only, tech developer to introduce a dark theming for their products. As of 2022, essentially every major operating system for both desktop and mobile-class devices have a light/dark theme feature, often with an automatic changing feature as well.

Since then, I've experienced a fair bit of debate as to which theme is the 'superior' theme to design and develop for, or which should be the default to appear. To set the record straight up top, I think it's important to realise that both are equal, in that both have pros and cons for usage. That being said, I'd like to explain why I believe that designing for light-theme as a default (in most cases, and we'll get to some exceptions in a bit).

Last year (2021), the online chat site Discord announced a major redesign of their marketing and application, with the introduction of a new logo, typeface and brand colours. While the vast majority of the changes they made were met with major pushback from the community (and for a valid reason, see this support message), one change that I believe was good for usability was the change from a dark theme by default to a light theme by default. To understand why I believe this was a good decision, let's break down the reasons that light themes are so prevalent across user interfaces.

Discord's 2021 redesign (bottom right) was a controversial one within the community, but it definitely pushed a 'friendlier' vibe to new users. It's worth noting that the screenshots on the left are both from the post-2021 redesign, just comparing light and dark theme.

The advantage of familiarity is, I think, why Discord moved to a light-default interface. As the previously linked post points out, it seems accessibility is not that high on their design team's concerns, however gaining reputability certainly is. As part of their infamous redesign, they moved away from gaming-centric marketing (which was the reason it started and rose to popularity), opting to market towards general communities.
An integral move in this was to change the theme to promote space and trustworthiness in their application. The old, darker interface definitely suited the personality and needs of gamers, however meant wider communities had a difficult time using Discord as it felt untrustworthy or 'sketchy'. I know this because it took me a few weeks to become comfortable with Discord when I started using it to find coding communities way back in 2016.

So, if designing for light theme has these apparent advantages, why should we even consider dark mode? The short answer is because people got sick of opening Instagram at 1AM and their phone lighting up like a flash grenade.
The long answer is an extension of the latter dot point from above: in the same way that it's easier to read black-on-white text in light environments, it's far less strain on the eyes to read white-on-black text in dark environments.
Designing an interface that has the capability to switch between dark and light themes to match a user's environment (especially automatically) is a huge step forward in UX. It means users can view interfaces in dark environments without having to lower the screen's brightness, which can reduce important details like contrast and colour.

As a final point, I'd like to discuss some notable exceptions to a light-first theming that work for the brand of an interface. Streaming services like Netflix and Disney+ have a dark-first theme that replicates the 'dark room' feel of a cinema. This, combined with a very minimalist interface and palette, help the colours of the promotional imagery pop in the same way that a cinema does.

Disney+ makes heavy use of a minimalist interface, allowing most of the colour shown to come from the promotional material for movies, just like a real cinema. And yes, I watch a lot of Marvel movies.

But what about viewability in lighter environments? It's a fair assumption on their design team's part to assume their users would either use their interface in a darker environment (a living room or home cinema prepped for watching a movie), or are more willing to squint at the interface in light environments (the brightness of movies is generally about the same as a dark interface, meaning users would be squinting at the movie as well).

To summarise, as with everything in design, it depends on the use case of your application as to which theme should be the default. As a general rule of thumb, I tend to design to accommodate both light and dark themes, and use builtin CSS functions to switch theme when a user's system theme changes, however the applications I build are designed to be used pretty much everywhere, thus my opinion is not a steadfast rule. If your brand permits it, definitely design for both - the usability improvements are excellent for end users, and a well-built design system should be able to implement them relatively easily.

Some further reading