Take a walk on the dark side

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

6

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.

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. Apple Mail and their Outlook Mobile app only apply the Dark Mode function to the app interface, so emails viewed on there still render in their defined colors.

For any email developers with 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

Some email developers have mentioned there is a hack for Dark Mode, but so far there isn’t a clear cut one available via CSS.

We’ve tried something like this with an MSO conditional statement:

<!--[if mso]>
<style type="text/css">
@media (prefers-color-scheme:  light) {
html {
background: #FFFFFF !important;
font-color: #000001 !important;
}
}
</style>
<![endif]-->

In this conditional statement, prefers-color-scheme: light acknowledges the Dark Mode setting, and the html {} tag addresses 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 background and font-color take effect.

However, this only worked some times. 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.

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: Ed Ball

Hailing from the global marketing agency world, Ed has developed emails for the United States Military, big Pharma, and Fortune 500 companies. Now an in-house email developer at Email on Acid, he pushes the envelope daily, exploring the true extent of what's possible in email. During his down time, you can find Ed jamming on his guitar.

Author: Ed Ball

Hailing from the global marketing agency world, Ed has developed emails for the United States Military, big Pharma, and Fortune 500 companies. Now an in-house email developer at Email on Acid, he pushes the envelope daily, exploring the true extent of what's possible in email. During his down time, you can find Ed jamming on his guitar.

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

Leave a Reply

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

Free Email Goodies