Spotlight on Dark Mode

You’ve probably already encountered this decision: Will you embrace the light or lean into the dark? In the context of today’s devices, it’s a practical rather than existential question.

Dark mode is a display setting for smartphones, laptops, tablets, and other devices. It refers to a dark background on which light-colored text is shown. It’s an option that reverses the standard default, in which dark text is presented on a white or light background.

Dark mode through time

Dark mode has been part of the zeitgeist since 2018 when Apple added it as an option for Apple mail.

But its origins are rooted much deeper in the history of personal devices. As far back as the 1970s computers used dark mode as a default. Then, “night mode” setting referred to the default dark backgrounds of older computers.

The inefficient cathode-ray technology used in early monitors would burn out if it illuminated the entire surface. That’s why computers in the late 1970s and 1980s adopted a matrix-style background that used green text on a black background.

But eventually, largely in an effort to encourage more widespread use of these newfangled devices known as “computers,” screen displays were designed to mimic print on paper, i.e., dark text on a light background.

Perks of dark mode

The research behind dark mode—also sometimes called black mode, dark theme, night mode, or light-on-dark—is still a little fragmented. It’s fragmented in the sense that the research on it is kind of controversial if dark mode is beneficial or not to the reader.

Some argue about the professed advantages of dark mode, but let’s share some anyway:

• less blue light—which is linked to retinal damage and other vision problems and can disrupt sleep patterns— emitted from your device

• lower battery usage for your device

• potentially reduced eye strain in conditions with low levels of ambient light

• a cooler look (OK, this one is definitely subjective—but don’t you agree?)

Dark mode and email

Nearly every app, browser, and device has a dark mode option. So it was really just a matter of time before the display option made its way to email.

Even though email clients—Apple Mail, Gmail, and Outlook—offer dark mode, they don’t all treat it in the same ways. Here are some examples:

No color changes

Some email clients render emails with no change. It seems counterintuitive because the email is being rendered in dark mode so there should be a change in color but there is no impact on the HTML.

Partial color inversion

This setting inverts areas with light backgrounds to a dark background and changes the text to a light shade. This choice leaves an already dark background alone and doesn’t change it any further.

Full color inversion

This one changes the email more than any other. It will invert light backgrounds, but it also impacts dark backgrounds. So, an email with light background and dark text is now a dark background with light text.

Dark mode’s challenges

Dark mode doesn’t come without compromises and imperfections.

Accessibility standards, specifically color-contrast ratios that comply with the Americans with Disability Act (ADA), aren’t always met. Inverting the colors doesn’t necessarily make the text and background have a high contrast with each other in some email clients.

Along with clients rendering it differently, some email clients force a set of rules for dark mode. For example, however Outlook renders your email in dark mode, that’s what all recipients who use Outlook will see.

Those predetermined dark-mode rendering choices might not always work with branding. For instance, if you have a black logo on a transparent .png when the email gets parsed in dark mode, the logo will disappear. It is total brand disruption having a logo disappear in an email.

Email clients that support dark mode

Dark mode can be applied by detecting the color scheme in the HTML or by settings on device.

Desktop

Outlook 2023 (Mac OS)

Outlook 2021 (Windows and Mac)

Office365 (Windows and Mac)

-Windows Mail

Mobile

Gmail App (Android and iOS)

Outlook App (Android)

Web clients

Outlook.com

Hey.com

Designing for dark mode

To ensure your customers are seeing your messaging in the way you intend it, it’s a good idea to make it standard practice to design emails in two versions—light and dark mode. But if this isn’t done effectively, it can lead to delivered emails that appear to have a broken layout. 

For some email interfaces—e.g., Apple Mail—coders can reverse the effects of dark mode. But for others—such as Office365—that’s not possible because we don’t know the specific algorithm that inverts the colors, much less how to change it in the HTML used to encode the email.

We don’t have the information necessary to reverse dark mode for all clients so that—whatever the individual’s chosen settings—emails will reliably render in light mode. So it’s best to design for either display mode. That means avoiding transparent image files (usually PNGs) or a white stroke on PNG if black text is being used. That would allow the black text to be visible even to recipients who’ve elected the dark mode setting.

Dark mode is here to stay, and this just may be the beginning for this buzzword. Because of the nature of it and how literally there is no way around how it affects some email clients, definitely find ways to design for it just to be ready in case the email finds its way into an email client with a dark mode setting.

Ed Ball is front end developer for The Lacek Group, a Minneapolis-based data-driven loyalty, experience, and customer engagement agency that has been delivering personalization at scale for its world-class clients for more 30 years. The Lacek Group is an Ogilvy company.