---

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 an accessibility 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.

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

Want more info on dark mode? Check out the content we have planned for Darktober 2020 and register for our Desiging Emails for Dark Mode webinar!

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:

And here’s how it renders 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;

}

</stlye>

*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.

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.