Take a walk on the dark side

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


What is Dark Mode?

Come to the dark side, we have cookies.

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

Dark Mode is a setting that shifts the interface’s color palette to display content in high contrast using dark background colors and light foreground. Ultimately, it minimizes blue light and enhances readability to reduce eye strain.

Dark Mode is ideal for people with light sensitivity, or even those who work nighttime hours since it’s easier to read in a low-light environment.

The jury’s still out on how “good” Dark Mode is for you, but that’s not stopping users from embracing it.

What Does it Do?

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, Dark Mode changes it to a lighter one. Same thing applies for background colors, too.

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

How Does This Impact Emails and What Clients Support Dark Mode?

Dark Mode doesn’t create any problems with plain text emails since plain text is black on white. But with HTML emails, where different components have different defined colors, things can get complicated.

Let’s look at one of our own recent emails as an example. Here’s how they normally render in Outlook:

Email in light mode

And here’s how it renders in Dark Mode:

Email in Dark Mode

There is a Dark Mode function users can opt to enable in Outlook.com, Office 2019, Apple Mail and their Outlook Mobile app. However, only emails that display in Outlook.com and Office 2019 are affected by it. Originally Apple Mail wouldn’t change an HTML email, but with recent findings when you add certain Meta Tags to the HTML Apple Mail will render the email in Dark Mode if the device has the setting applied. If you want to find out what the Meta Tags are keep reading below.

For any email developers with a morbid curiosity as to how Microsoft’s color-changing algorithm works, you can check it out here.

The Dilemma

We’ve recently chatted with email developers and marketers facing challenges around Dark Mode. With the inability to define exactly what subscribers will see in Dark Mode (as of now), it’s difficult to know exactly how the email will look when it renders, and therefore supremely hard to control.

The dilemma email marketers face is do they try and hack Dark Mode and force the colors they choose to ensure the email renders as they intend? Or, do they accept that the end user wants to view things in this manner and hacking the Dark Mode is fighting the user’s needs?

Option A: Accept It

If someone has chosen to view their emails in Dark Mode, they have chosen so for a reason. To create a hack to override the interface from changing colors is just a little too Big Brother.

George Orwell would not be pleased.

Option B: Hack It

Add these Meta Tags and :root selector with styles to the email.

<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;



*Note: This is used to tell if the device has Dark Mode or Light Mode enabled.

Add this Dark Mode media query to your CSS:

@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 new 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, this only worked sometimes. There’s no rhyme or reason as far as we can tell as to when it will work and when it won’t, but it’s worth a try if enough of your subscribers are on either of those clients.

Tips to Optimize for Dark Mode

Test your design in both light and dark appearances

First and foremost, because of the interesting ways an email renders in Dark Mode, it is best to test your email design for any issues before the send.

In fact, Email on Acid will be launching Dark Mode previews this fall. Soon you can check your email and know how it will render for Outlook subscribers who use the feature.

Use transparent images

A transparent image will allow the background color change to seem more seamless with the design still intact. Be aware of images or icons that are black.

As you can see in the example above, two of our logos were not transparent. This is something we’ll optimize for next time and make our emails that much better for subscribers.

Put a white stroke on your black font for images or icons

Since anything with the color black disappears on a black background, you can put a white stroke on your dark text or icons to improve readability when the background colors change.

Example of a white stroke

Stay Tuned and Share Your Tips

Dark Mode previews are coming to Email on Acid this fall! Sign up for emails and get notified when we release Dark Mode previews for your email testing pleasure.

Have tips of your own for targeting Dark Mode in Outlook? We’d love to hear them. Sharing is caring, so leave your best tips in the comments.

Get the Dark Mode Pixel Hack

View email developer Ed Ball’s step-by-step instructions for using analytics tracking pixels to find out how much of your list is opening emails in dark mode.

email developers code in dark mode
Don’t guess, test

Email clients are constantly changing, which is why it’s important to test your email every time; what worked yesterday might not work today. Email on Acid offers unlimited email testing on more than 90 clients and devices, so you can make sure your email looks good before it hits the inbox. Want to see for yourself? Take advantage of our free, seven-day trial.

Test Today

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.

14 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!

  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 *