Designing for Dark Mode

If there’s ever a clear indication that a web trend has been fully adopted, it’s when Google integrates it as a part of their home page. We saw them embrace changes in UI as they dove back to their roots and in 2011. We saw them embrace flat design in 2013.

And, now, as it’s become a sweeping change across browsers and mobile devices, Google has adopted dark mode. Dark mode has arrived.

What does it mean for you?

Where we’re coming from.

It’s worth noting that, actually, dark mode has its roots in the early days of computing. While we’ve become accustomed to bright backgrounds on our mobile devices and across websites, our memories of early computers are of one color palette: green text on a black screen.

And while The Matrix made this kind of green text / black background common shorthand for “tech hacking,” in reality — at least back in the 1970s — green text was a necessity: cathode-ray tube monitor technology simply didn’t have enough power to light more than the text on the screen.

Move forward a few years, and we see the rise of skeuomorphic design — on sites, within operating systems, and right on the monitors themselves. We moved toward white backgrounds and dark text not because it was easier to read, but because it best represented a common reference: a sheet of paper with dark type.

Which brings us to today. The recent rise in dark mode came around 2019, when both Apple and Android introduced dark mode into their mobile operating systems. It had already been creeping in as a user experience option on select apps — Twitter client Tweetbot has had it for years, alongside other text-focused apps — text editors, RSS readers, article collectors. But with adoption of system-wide dark mode for the two big mobile giants, the race was on.

Why it matters.

There are essentially three main reasons for integrating dark mode:

1. Easing eye strain … in some situations.

In some ways, dark mode is presented as a way to ease eye strain. The darker background is said to ease the eye. 

However, research shows us this is not the case. We are accustomed to seeing dark things on a light background — it’s literally how our eyes have evolved to a life lived mostly in daylight. Studies on how users read text, including their ability to proofread and improve reading speed, overwhelmingly promoted positive polarity — black text on a white background — over negative polarity.

However, that doesn’t mean it’s dead on arrival. There are situations where a black background is easier:

• If your content is video, dark mode can be easier on the eyes. It improves focus toward the video itself.
• If your content is tied to colorful graphs or dashboard items, dark mode helps focus those colors. A study by Salesforce showed that dark mode had little effect on cognitive action, meaning it came down to user choice rather than any kind of proven direction.
• If you’re in a dark environment, an intensely bright screen can be hard on your eyes. Dark mode eases this strain.

And while it’s not necessarily an issue of eye strain, there’s also a benefit to using dark mode at night, when our minds are attempting to wind down and could do without the bright lights of our devices.

2. Energy savings.

It’s suggested that dark mode, in regards to a mobile device, actually saves battery life. A study by PhoneBuff found that dark mode might extend the battery on an iPhone by 30% or more — as long as your phone has a OLED screen.

3. It looks cool.

This one’s obvious: there’s a subset of people who simply think light text on a black background looks cool.

Data on “coolness” seems to be lacking at this point in the game, but some smaller polls back up the idea that people simply prefer the dark theme — regardless of the actual benefits. A poll of 243 developers on Twitter showed that 82.7% of respondents used dark mode, when possible.

There is nothing wrong with this: the need to customize our devices to fit our style drives innovation, and dark mode makes our stuff look more … tech-y.

What to look out for.

So, with the idea that dark mode looks cool and, in some situations, might actually present a better user experience, how do we design and develop for dark mode? How do we give our users the option without spending too much time on a fool’s errand?

Understand Your Content

First off, is your site well-suited for dark mode? Is it a video-focused site that will benefit from the darker background? Is it a site that people tend to read and browse for long periods of time later at night? Is it filled with long-form content?

It’s not necessarily a great choice to just do it because, especially if you are working with long-form content (which will suffer on a black background). It’s not game over, but you’ll need to do a bit more digging to figure out if there’s a usable reason to take the plunge.

Dark mode is more than just the background.

The first step is finding the right dark background. The second step is finding the right light font color. The third step is updating every other thing on the site. Our link styles, hover state, navigation containers, headings, and even horizontal rules are all designed for a light background — they can very easily disappear when that dark mode switch is flipped.

Of course, there’s a benefit to this: building a site in dark mode lends itself to creating more solid and more flexible code. You are more likely to stick to established design patterns, because you’re essentially building two states for every element.

Dark mode and image variations.

Most of the work in implementing dark mode is tied to creating a second set of dark-friendly styles in the CSS. However, we have to also remember that certain constant design elements — social media icons, our site logo, and any other image-based element — are not covered through CSS color designations. If we are using a dark colored PNG to link to Facebook, the site will require a light-colored PNG during the switch to dark mode.

What’s more, videos and images themselves tend to become more intense when viewed in dark mode. As we dull the background, our eyes interpret the brighter elements with more intensity, which requires some added work in making sure images and videos still fit the overall design.

Automatic vs. manual.

Most browsers now support some kind of dark mode, and there are some — especially those within our mobile operating systems that are tied to time or light-sensitivity — that will automatically choose light or dark mode based on predetermined parameters. Most of the time, this is perfect; but, as with any edge case on any device, you don’t always want your system determining whether or not it’s time to go dark.

This is solved by giving power to your visitors with a simple control: something that switches from light to dark, overriding any browser-driven decision.

Dark mode: very cool, within reason.

It might feel like we’re really taking dark mode to task, but know this — we don’t want to dissuade you from taking the plunge. Just know that implementing dark mode is still a process under review.

We won’t know how much it helps for a while, or if it’s worth the effort — but, in the meantime, we also know that with a conservative approach and an understanding of the pitfalls, it can still provide an interesting, forward-thinking option for your site.