Take a walk on the dark side

Dark Mode for Email: What it is and How to Cope

16

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:

darth vader meme with cookies

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

Light mode email example

Email in dark mode

Dark Mode email example

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

Example of a white brush stroke

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.

Do More in Less Time with Email on Acid

Stop switching back and forth between platforms during pre-deployment and QA. With Email on Acid you can find and fix problems all in one place. Double check everything from content to accessibility and deliverability. Plus, with accurate Email Previews on the most popular clients and devices, you can confidently deliver email perfection every time.

Start for Free

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

16 thoughts on “Dark Mode for Email: What it is and How to Cope”

  1. Very good tip of outlining black content. Whilst reading I was thinking “well, need to start thinking to find an accent colour that works well in dark and light for icons and logo variations.
    Still not sure outline would work nicely on (small) icons.

    Anyway, any solutions we’ll have, will still be stuck with the problems of legacy Outlook clients (which I’m not even sure how many real customers use, I’m convinced that audience is mostly corporations).

  2. In addition to the clients listed above, dark mode is also an Operating System setting. The newest MAC OS has it, and i think the newest windows versions (not sure bc i dont have windows). Also iOS 13 is supposed to have dark mode. Hence it will affect MANY users.

    One problem we’ve already noticed is when using a light-colored background image (with a light-colored bgcolor set as a backup) with dark text overlaid, that the text will be rendered illegible in dark mode. It changes to light text on a light background image (the bg color goes dark but you do not see that unless bg images are not supported). This requires immediate rethinking of how we build our emails.

  3. Same issue I encountered. One of my clients has a transparent logo, but all black. So imagine if you turn black mode ON, the logo disappears.

    Temporary work I did is made the logo white and added a black background, additional padding + border radius, then it doesn’t look bad at all.

    There should be a media query to easily switch a logo in an email, but I haven’t figured that out yet.

  4. Today I received an email sent by someone using dark mode. They sent the simple text-only email formatted as HTML and upon opening it I found white text on a white background. I was able to reveal the text, but when I asked him, he was unaware and declared dark mode is a disaster.

    1. Oh no! Hopefully, people will get used to Dark Mode and start incorporating it into their testing checklists so that this doesn’t happen again!

    1. Our in-house email dev tells me it can be either.

      So the answer can be both, technically. But I usually just target body. I usually go body, table, tr, td{ ...dark mode styles... }

      That’s to make sure you change the background color anywhere it’s declared, it’s pretty common to have bg color on the body AND

      AND

  5. Hello

    I tried your method on my html mailing project . However unfortunately It doesn’t work or probably I miss some details. Could you help me please?

Leave a Reply

Your email address will not be published. Required fields are marked *