The Dangers of Dark Mode for Email

Dark mode is the new light mode. No seriously.

The launch of dark mode on iPhone and Mac OS back in 2019, as well as its availability on Samsung Android devices and services like Slack, have made this theme mainstream. From operating systems and entertainment user interfaces (UI) to popular Chrome extensions and, of course, email clients, more and more forces have decided to join the dark side.

That’s why I (and the rest of the Dyspatch team!) thought it was high time to investigate how exactly dark mode affects email content. With this investigation, I'm answering a few key questions, including: 

• What are the dangers of dark mode for email marketers?
• How can you counteract these dangers?
• What are some best practices you can follow to make sure your emails still shine?

The answers may surprise you…

Why should marketers care about dark mode emails?

Every email marketer knows how much effort goes into ensuring emails are pixel perfect. So the thought of an email client inverting your text and background colors willy nilly is a scary one!

The most basic implication has to do with accessibility. What if folks can no longer read the copy in your email? (Spoiler: We found cases where this happened.) Worse, what if your call to action is hidden? (Spoiler: We found evidence of this, too).

Both these examples are huge detractors to your audience’s overall experience, and thus dangerous for your engagement and deliverability rates. Dark mode also spells serious trouble for your brand consistency.

So yes, dark mode is definitely one of the biggest monkey wrenches thrown at email marketers in the last few years.

A 2021 industry survey from Pathwire (in partnership with Ascend2) on dark mode found 72% of email marketers surveyed had the theme on their radar — with 44% of email marketers considering the theme during email production and development, and another 58% testing their email campaigns in dark mode before sending at least some of the time.

Add to that the fact that optimizing logos and images, coding the email properly, and keeping branding consistent were the biggest challenges for over a third of respondents (regardless of company size), and you’ll begin to see why dark mode email has proven so difficult for so many.

But where there’s fear, there’s hope! Let’s start by shining a light on the dark mode theme to provide some real insight into what the “dangers” are, and how you can best prepare.

How does dark mode impact email design?

First, a quick primer on dark mode themes and how they impact email design.

Simply put, the dark mode setting inverts colours on a phone or computer, so you’re using a dark background against light text. This is said to reduce eye strain and preserve battery life — although according to a Purdue University study, the battery life point largely applies to OLED devices like smartphones released after 2017, and the effects are generally overstated.

But beyond that, many folks just think it looks better. According to a 2020 Litmus report, 36% of Apple IOS mail users preferred dark mode, and an informal poll conducted by Android Authority saw 91.8% reporting they use dark mode whenever it’s available. Considering the amount of operating systems and email clients offering the theme, it’s clear this trend is not going anywhere.

And since most HTML emails have a white background, email clients (like Google and Apple) made the assumption emails will look funny if the rest of the screen had a black background. So they decided to automatically convert emails to match dark mode.

For regular emails sent by an individual, this isn’t a big deal. Most people don’t apply much formatting to their emails aside from maybe font size.

On the other hand, for email developers and marketers who design HTML emails to match the look and feel of their website or app, this automatic color palette conversion poses serious issues.

What are the actual effects of dark mode for email?

The impact of dark mode on Gmail — note the call to action on the yellow button.

According to our friends at Litmus, there are three different ways dark mode emails may render:

1. No color change — Yes, you read that right. Some email clients, like Gmail for the web and Apple mail, don’t change emails at all in dark mode. But don’t start celebrating yet, because this can cause readability issues for avid users of the theme – AKA your email stands a good chance of remaining unread.
2. Partial color invert — This is when the client only detects areas with light backgrounds, and then inverts them so the light backgrounds turn into dark backgrounds. In these cases, dark text is also inverted. Anything already on a dark background is left as is. The result? Your branding elements, from colors to logos, are manipulated in unpredictable ways.
3. Full color invert — In this scenario, all colors in the email are inverted — regardless of whether they’re already on the dark side. This is definitely the most invasive change. It’s also one of the most popular approaches, which poses serious problems for email marketers. Plus, email clients that use this logic don’t allow Dark Mode targeting with CSS! 

Curious to know what changes dark mode creates among popular email clients, and who supports what? Again, you’ll find a handy dark mode email client comparison chart at the end of this post.

Sidebar: Dark mode and interactive email

Let’s take a minute to address how this affects interactive email (also known as kinetic email).

Color inversions only impacts colors. It doesn’t affect any of the underlying HTML or non-color CSS styles. This means any of the interactive elements you’ve built in will work just fine.

But you'll need to pay attention to contrast, backgrounds, and ensure transparent images are used properly.

Danger! Background images and background gradients

By far the most explosive finding of our investigation was how Gmail (at least, for App users) alters emails with a background image or a background gradient on text. Gmail on Android is supposed to do a partial color invert.

We tested two real-world scenarios for marketing emails:

1. Having a background image with text on top
2. Having a background gradient with text on top

On to the results…

Background images

Gmail on Chrome / Gmail on iPhone / Gmail on Android

As you can see above, the unaltered email (left) shows a background image with a slight white-to-blue gradient.

On iPhone (center), the background image has been removed but otherwise the email is fully readable.

Finally, in Gmail on an Android device (right), it appears the background image has been preserved but the black text has been inverted to white, making it completely invisible. Now, that's a poor user experience!

We’re still investigating safe ways to use background images when sending to Gmail. But right now, you'll need to test this specific configuration before sending.

Background gradients

Gmail on web / Gmail on iPhone / Gmail on Android

Similar to the previous results, we see the experience on Gmail Web (unaltered) and iPhone is nearly identical. Once again, Gmail on Android is extremely problematic because the text is inverted from black to white, making it nearly illegible on the gradient background.

Admittedly, we cherry picked gradient to highlight the risks. But it's still alarming to see these results, especially considering gradient backgrounds have become popular in HTML email and client support is rising.

So at this time, we recommend using text in images instead of text on a background image or gradient. This is definitely a step backwards from both an accessibility and email technology perspective. But ensuring you specify alt text for your image will help balance the trade-offs.

Coming up, we’ll answer some of our customers’ most common questions about how to adjust their email creation tactics to ensure a smooth experience for those who use dark mode.

Question 1 - When does dark mode get applied to an email?

Broadly speaking, there are three ways dark mode may be applied to your emails.

First, in Apple email clients (Apple Mail, iOS Mail, iOS 13) dark mode is only applied to “personal emails”. While it's difficult to find an exact definition for this term, to our understanding, personal emails are ones that don’t contain any visible images – i.e. “hybrid” emails that contain a limited amount of HTML elements. (Confused? You can read more on hybrid emails in our plain text vs. HTML emails blog)

This means an HTML formatted email with an invisible tracking pixel would count as personal, but a traditional marketing email with a hero image would not. It’s also worth noting that plain text emails will always be considered personal emails.

In Gmail, dark mode inversion is applied automatically on mobile if the user is using dark mode. Either a full color inversion (Gmail iOS) or partial color inversion (Gmail Android) will be automatically applied. This is particularly scary given that Gmail is one of the most popular email clients — around 27% of all email opens happen on Gmail.

Microsoft Outlook (mobile, web) follows the same approach as Gmail: dark mode is applied automatically. However, in Outlook Desktop, there's a toggle button where the user can enable dark mode.

via GIPHY

Frustratingly, dark mode is applied differently than in Gmail, so you won’t be able to guarantee inverted emails will look the same in each client, without testing each individually.

This is where an email production platform like Dyspatch can help. Dyspatch offers integrated Litmus testing, so you can preview and test every email across popular email clients and settings – like dark mode – in a flash. So you’ll never have to deal with accessibility and display issues that wreak havoc on your email deliverability and engagement rates.

Question 2 - Can you prevent dark mode from being applied to an email?

It depends on the email client in question.

You can prevent dark mode from being applied to your emails, if subscribers are using an Apple email client (like Apple Mail and iOS Mail).

You can do this by ensuring your email isn’t perceived as a “personal email”. In other words, by making sure you have at least one visible image.

Unfortunately, in Gmail and Outlook, there’s no way to prevent the automatic conversion from happening. The best we can do is plan for ᴉuʌǝɹsᴉou…I mean, inversion.

(See what I did there?)

One thing vital to recognize is that attempting to force subscribers into accepting something they’ve actively selected against is not a good approach. As email marketers, our goal should be to optimize the user experience as much as possible by reducing friction points. And it’s easy to see why a dark mode user opening a glaringly bright email runs counter to this goal.

Source

So the smart thing to do here is adjust what we’re doing on our end, even if it takes some extra work.

Which brings us to question #3…

Question 3 - Can you target dark mode with HTML or CSS?

Yes! There are two techniques for targeting HTML/CSS specifically in dark mode. Do keep in mind that this is a complex topic, so we’re not going to go into full detail here, but we’ll link to some great resources you should check out.

First, for Apple Mail, iOS Mail, and some versions of Outlook (check the chart below for the full scoop) you can use the following media query:

@media (prefers-color-scheme: dark)

For outliers like Outlook Android and the webmail client Outlook.com, you can add the following as a prefix to CSS styles:

[data-ogsc] and/or [data-ogsb]

Unfortunately, Gmail (Android and iOS) doesn't support either of these techniques, nor does Outlook 2019 for Windows.

You can find more info in this blog post by Campaign Monitor.

Dark mode email client support chart (as of February 2022)

Source: Litmus; Email on Acid

Dark mode email best practices

As if HTML email wasn’t complex enough, the internet found a way to make it more difficult. That being said, here are some top takeaways and best practices to keep in mind when you’re getting down with the dark side:

1. Test your emails in dark mode 

This one goes without saying, but be sure to test your emails in dark mode prior to hitting “Send”. You can find more information on how to effectively preview across multiple email clients below.

2. Make legibility a top priority

Make the legibility of your logo (and any text components) a top priority: If your subscribers can’t easily see what the email says and who it’s from, it’s likely they’ll ignore it, delete it, or flag it as spam – all actions which will drastically affect your future deliverability and engagement.

Whether this means adding a translucent outline, a stroke outline, or a drop shadow to your logo, optimizing your branded component and text is a minimal effort route for greatly improving the experience of users on email clients that apply partial or full color inversions. Here’s an example by our friends at Litmus to show what we mean:

Source

3. Optimize your images for dark mode

You'll also want to make sure all your images are effective in dark mode: Use transparent PNGs wherever possible, and add a transparent outline around text in images so any text will be highlighted if inverted. Adding white strokes around black graphics is another great technique for ensuring the legibility of your email content.

Source

4. Use dark mode code and meta data

Add dark mode meta tags and use dark mode media queries to control the look and feel when inverted.

5. Optimize your CTAs for dark mode

Be especially vigilant about optimization standards when it comes to your CTA buttons. Often they’re specifically designed with branded colors in mind – and these colors might not do well under inverted circumstances. Moreover, buttons in dark mode can just end up looking drab and unappealing overall, like in this example posted in a Hubspot community forum:

Source

6. Use CSS filters to adjust image color and brightness

Consider applying a CSS filter to change the color and brightness of your <imgs> tags so users in dark mode have an optimal reading experience (you can find more technical information in this post by Campaign Monitor).

7. Use background images and gradients sparingly (and carefully!)

As highlighted above, tread carefully with background images and gradients for Gmail users, as it’s hard to ensure the readability of your text.