---

There is a challenge rising for email marketers, and it isn’t going away. It’s dark mode for email.

We first wrote about dark mode emails about a year ago. Then we dedicated an entire month to exploring its impact on email marketing. (Check out the content from Darktober including our Designing Emails for Dark Mode webinar.).

Dark mode is still a hot topic among email developers and designers. It’s become a part of the email experience that we can’t ignore. But, as is usually the case in our line of work, dealing with dark mode for email is far from straightforward.

Let’s review what you can do to address some of the main dark mode email challenges.

Jump to a section in this article:

• What is dark mode?
• What does dark mode for email do?
• Optimizing emails for dark mode
• Dark mode for email code snippets
• Dark mode and email client support

What is dark mode?

Dark mode is a setting that shifts an interface’s color palette to display content in high contrast using dark background colors and light foreground. Black text becomes white, and white backgrounds go dark. Ultimately, dark mode is used to minimize blue light and enhance readability to reduce eye strain.

Many developers are already quite familiar with dark mode since it’s a popular way to view code. Dark Mode is also ideal for people with light sensitivity, or even those who work nighttime hours since it’s easier to read in a low-light environment.

At one point, it was suggested that using dark mode on a mobile device could extend battery life, although it appears that the benefit was somewhat overstated. Check out our post on dark mode vs. light mode to learn more about the pros and cons and view our dark mode infographic for more essential info.

Many popular applications have a dark mode option for the user interface. That includes email apps. But (and this should come as no surprise) email clients handle dark mode in different ways. That’s where the biggest challenges come in.

What does dark mode for email do?

It’s not always just the email application’s user interface that switches when dark mode is turned on. Email clients may switch the look of the entire message as well.

Dark mode shifts the background and font colors of an email to light on dark. To do this, it checks any color or background color with a CSS property of background, color, background-color, or an HTML attribute of bgcolor or color. 

If a text or background color is defined, dark mode targets those HTML attributes and CSS properties via internal or inline styles. It then adjusts them to make them lighter or darker. So, if your text is a dark color, the dark mode setting in some clients will change it to a lighter one. The same thing applies to background colors.

All of this to say, since dark mode makes light colors dark and dark colors light, it will change the colors in your email accordingly (and it doesn’t exactly ask your permission).

Dark mode usually doesn’t create problems with plain text emails since the text is black on white, which simply gets inverted. But with HTML emails, where different components have different defined colors, things can get complicated.

Let’s look at an Email on Acid campaign that looked fine in light mode, but the dark mode email experience was less-than-perfect.

Email in light mode

Email in dark mode

For the most part, this email is still readable in dark mode. But if you’re dedicated to designing and developing an ideal email experience for every subscriber, there are probably some things you’d want to change. 

That’s why a growing number of email teams are taking the time to design emails for both light and dark modes. If that extra work doesn’t seem worthwhile, you can start by making some basic dark mode for email optimizations.

Optimizing emails for dark mode

There are two simple steps email marketers can take right away to promote a functional user experience in both dark mode and light mode.

1. Use PNGs with transparent backgrounds

Using transparent PNGs for your images allows the background color change in dark mode to appear seamless. This way, whatever color the background color changes to, it will be reflected in the background of the image. 

As you probably noticed in the Email on Acid dark mode examples above, two of our images (including our logo) did not have transparent backgrounds.

Using transparent png images in emails so a good best practice for email designers. But you’ve got to watch out for black text and icons. That leads us to our second tip…

2. Use white strokes around black design elements

Dark mode emails can sometimes cause an unwanted disappearing act in your campaigns.  Suddenly black text, icons, logos, and more are invisible against dark backgrounds.

While some graphic designers may cringe at the idea of adding white strokes around text and icons it’s an effective way to ensure your emails are readable and actionable. The white stroke will not be visible in light mode, but it helps things stand out when viewed in dark mode.

Dark mode for email code snippets

Those simple optimizations are important, but they may not solve all your dark mode email dilemmas. Email developers and designers have a few choices:

1. Passively accept that your emails won’t always render perfectly in dark mode.
2. Try to hack dark mode and get clients to show the colors you want.
3. Start designing your emails with both a dark mode and light mode theme.

Trying to force mailboxes to render emails in light mode defeats the point. If your subscribers want to view emails in dark mode, the smart thing to do is meet their needs and provide the right experience.

There are a couple of code snippets email developers need to become familiar with in order to build emails for dark mode. 

First, add these meta tags and :root selector styles to the email:

This is used to tell if a device has dark mode enabled.

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}
</style>

Then, add this media query to the email’s CSS:

Adjust the colors for your brand’s preferred dark mode theme.

@media (prefers-color-scheme: dark ) {
 .body {
      background-color: #CCCCCC !important;
 }
h1, h2, h3, td {
      color: #9ea1f9 !important;
       padding: 0px 0px 0px 0px !important;
}
}

In this media query, prefers-color-scheme: dark acknowledges the dark mode setting, and the body tag addresses the body color for the entire email. So, when an email with this statement is opened in Outlook.com or Office 2019 with Dark Mode enabled, the defined .body and the h1,h2, h3, td tags take effect.

However, there’s a big caveat to this approach. The media query (prefers-color-scheme) is not supported by every email client. It only works with clients using WebKit as the rendering engine. As of this writing, the CSS query will work with Apple Mail, Thunderbird, and certain versions of Outlook, but Gmail does not support it. For the latest check out this resource from CanIEmail.com.

In theory, you could use (prefers-color-scheme) to “override” dark mode and force it to use a light background color. However, if you’re going to take the time to try and force a white background, you may as well design a dark mode experience instead. Plus, as noted, this CSS query won’t work for every email client.

Need a little inspiration? Check out some dark mode email examples featuring designs from top brands.

Dark mode and email client support

The biggest dark mode for email challenge is the different ways clients like Gmail, Apple Mail, and Outlook render things.

Some email clients auto-invert colors and some don’t. Others only automatically switch colors in specific situations. Some clients support media queries for dark and light color schemes while others do not. Here’s a breakdown:

Email Client	Auto-Inverts Colors?	Common Dark Mode Challenge
Apple Mail (iPhone/iPad)	Yes	Auto inverts when the background is transparent or pure white (#fffff).
Apple Mail (macOS)	Yes	Auto inverts when the background is transparent or pure white (#fffff).
Outlook (iOS)	Partially	May make background color darker.
Outlook (macOS)	Partially	The only Outlook option that does support @media (prefers-color-scheme). May make background color darker.
Outlook (Windows)	Yes	The only Outlook option that consistently auto-inverts colors.
Outlook.com (webmail)	Partially	The only Outlook option where image swap works. May make background color darker.
Gmail (Android)	Yes (when not already dark)	Does not support the query @media (prefers-color-scheme).
Gmail (webmail)	No	Does not support the query @media (prefers-color-scheme).
AOL (webmail)	No	No current dark mode user interface.
Yahoo! (webmail)	No	No current dark mode user interface.

The operating system or device a subscriber is using could complicate dark mode for email even further. It’s a lot to keep track of, which is why it is helpful to conduct dark mode email testing that provides screenshots previewing campaigns in live environments.

Email on Acid’s predeployment platform provides unlimited dark mode email previews on a variety of major clients and popular devices. It’s the best way to deliver email perfection no matter what mode your subscribers prefer. Email is always evolving, which is why it’s always best to test before hitting send.

Still wondering whether designing and developing emails for dark mode is worth your time and effort? You can also use Email on Acid to find out how much of your list is viewing emails in dark mode.

When Email on Acid ran its own experiment, we found that around 14% of our subscribers were using dark mode. We also expect that number to grow as dark mode rises in popularity.

Download the Dark Mode Pixel Hack for instructions on how to use the Email on Acid platform to conduct a dark mode experiment yourself.