Dark Mode Emails 101: The Essential Info

If you regularly work with digital products, there’s a good chance you’ve heard plenty of buzz about dark mode for user interfaces. Some of your favorite browsers, mobile apps, and operating systems have settings that let people flip the switch and turn down the lights when they focus on their device’s screen.

The use of dark mode for email is another rising trend. It’s the latest factor email developers and designers must consider when optimizing emails for accessibility and the target audience.

To paint a clear picture of the state of dark mode and email, we created this sweet Darktober infographic that sheds some light on where things stand right now:

Here are a few of the main, high-level takeaways from our dark mode infographic …

A lot of the most popular email clients support dark mode: Apple Mail (iPad and iPhone), Outlook, Gmail — even Yahoo! Mail has a dark mode interface. The big challenge is that they all render dark mode emails a bit differently.

For example, some email clients will automatically invert colors in dark mode while others won’t, and it often depends on which operating system is running. Apple Mail auto-inverts email colors across the board, while Gmail does so for Android 10 but not with iOS or webmail. Neither Yahoo! nor AOL auto-invert colors, but a few smaller email clients do.

The CSS syntax @media (prefers-color-scheme) is useful to developers who create both dark and light mode versions of emails. But currently, Gmail doesn’t support it at all. Outlook only supports @media (prefers-color-scheme) when emails are opened with webmail or macOS.

Find out more about email client support from Patrick Krupar of Sidemail.

It’s tough to find definitive data on dark mode usage – whether it’s for email or not. The two surveys cited in our infographic may be slightly skewed since they focus on niche audiences.

Android Authority surveyed its readers and found nearly 82% use dark mode on apps and smartphones. But keep in mind, this site’s readership is likely made up of technology early adopters and doesn’t represent the general public.

Users of the reading app Polar also overwhelming claimed to prefer the dark theme. But that’s a specific user-base and a specific application’s interface. Still, these informal surveys do serve as a hint of where we’re heading and that you shouldn’t be ignoring dark mode.

If your emails target an audience that’s technologically savvy — such as software programmers, web developers, and IT specialists — there’s a good chance a sizable portion of them use dark mode.

In addition to the complications that email clients cause, there are several common “gotchas” that tend to make emails in dark mode look less than perfect.

The most common issue is that dark graphics and text disappear. You can easily avoid that when you add a light outline around dark text. Usually, images with transparent backgrounds work well, but not if it’s something like an all-black logo. So, consider reversing it or using a non-transparent background.

Darker email designs may also mess with your brand’s preferred color palette. If designing for dark mode is important, you may need to work some of those questions out with your team.

We’ll be covering challenges like these and many more in our webinar Designing Emails for Dark Mode, which takes place on October 22nd, at 11:30 am EST.  A roundtable of industry experts will discuss tips and tricks to help solve your troubles.

Meantime — don’t forget how important it is to test every email. The rise of dark mode is just another example of why an automated process like Email on Acid’s Campaign Precheck can bring emails designed for any mode into the light!

To learn more about how dark mode is impacting the world of email marketing, check out Pathwire’s dark mode for email survey