Making Money On-line: Dark Mode for Email: How Marketers Should Adapt

Dark mode is a major trend in user interface experiences across a wide range of apps, including email clients. As support for dark mode continues to grow, the question that our clients are asking us is: Should my company change its designs and code to be compatible for dark mode for email and, if so, exactly what changes should we make?

Before we answer that question, let’s take a step back and address the basics, like...

What Is Dark Mode?

Instead of the usual dark text on a light background, dark mode features the inverse: light text and a dark background. You can see the difference below in how Oracle Marketing Cloud’s Twitter page renders in both light mode and dark mode.

What’s Driving Dark Mode’s Popularity?

While it’s unclear if dark mode is better for you or not, several things are clear:

Dark mode is easier on your eyes in low-light environments, such as reading in bed with the lights off or coding emails in a work or home office with the lights off and shades drawn. Dark mode is definitely part of conversation about office ergonomics, such as the rising popularity of standing desks.
It can extend the battery life of your device if it has an OLED screen. However, it doesn't save power at all if your device has an LCD screen, which most laptops and all but the most recent smartphones do.
Some people prefer it because they’re sensitive to light or have cataracts, so should probably think of dark mode as being part of inclusive design. However, the biggest reason appears to be that some people simply like it better. And in a world where we want to give people choices.

While some people use dark mode all the time, some use it situationally and others not at all. But it’s popular enough that support has exploded.

Where Is Dark Mode Supported?

Design software like Adobe Creative Suite and many photography websites and programs have used dark mode for years and years. But now support has really taken off, with the latest versions of Windows, macOS, iOS, and Android all support dark mode.

That has allowed some of the most popular apps and websites to embrace dark mode, including Amazon Kindle, Chrome, Facebook Messenger, Firefox, Medium, Pinterest, Reddit, Slack, Twitch, Twitter, and WhatsApp, among others.

Email clients have also added support for dark mode over the course of the past year or so. Apple Mail and the flavors of Outlook and Gmail have led the way. Generally speaking, approximately half of all emails are opened in environments that support dark mode, according to October 2019 data from Litmus’s EmailClientMarketShare.com. Again, the key word there is “support,” since usage varies.

Regardless, the potential audience is large.

Do You Need to Worry about Dark Mode for Email?

Dark mode can seriously mess up how your emails render, making text unreadable in some cases. Depending on the email client, dark mode either fully or partially inverts colors.

You can see the differences in how Apple Mail 12 and Outlook 19 implement dark mode affected the Oracle CX Marketing Consulting newsletter below. Whereas Apple Mail’s dark mode affects only the app’s interface (in this case), Outlook’s dark mode affects the email pretty dramatically, making portions of it hard or impossible to read—at least prior to us implementing some fixes that we’ll discuss later.

“I am seeing the most frustration with how dark mode is done in Outlook (macOS), Outlook.com, and in Outlook on mobile for iOS,” says Lauren Beltramelli, Email and Web Developer for Creative Services, Oracle CX Marketing Consulting.

It’s so messy that we recommend that marketers seriously question whether it’s worth the extra design development time to design/code around dark mode. However, if a lot of your subscribers are reading your emails on Outlook email clients, then you’ll want to take action.

How Can You Adapt to Dark Mode for Email?

First, let’s recognize that this is a relatively new trend and therefore unsettled. In working with our clients, we’ve seen lots of dark mode advice that was meant for web development only and other advice that possibly worked at one point but doesn’t anymore. We hope that implementations of dark mode in email will standardize over time, but we know that could take a while.

Let’s also recognize that marketers need to respect consumers’ choices regarding whether to use dark mode. We should let them pick the user experience that’s going to work best for them and then adapt accordingly.

“Forcing your email to stay in light-mode isn’t a good answer,” says John A. Lillard, Principal Consultant for Implementation Services, Oracle CX Marketing Consulting. “It’s better to let your clients choose.”

With that in mind, and based on what works right now, here’s our advice:

1. Add Strokes to Logos and Icons

Adding a stroke to your logo in the same color as your background color makes it effectively invisible in light mode. However, when dark mode is turned on, that stroke keeps your logo from blending into the background. Given how important it is to be instantly recognizable in the inbox, you’ll want to do this to maintain brand trust.

You can see the effect that adding a 1 pt. stroke—plus glow—to our logo had on the Oracle CX Marketing Consulting newsletter.

2. Watch Your Background Colors

Dark mode changes text colors and background colors, too, but not always in a way that makes the text legible. Test the rendering of your emails across inboxes or by using Litmus, Email on Acid, or another service to see if you have any bad text–background color combinations.

Background images are a common element of bulletproof buttons, which maintain their integrity when images are blocked, so pay extra attention to how dark mode affects your calls-to-action. The last thing you want is for your CTAs to disappear or become suspicious.

3. Watch Your Background Images, Too

Given the layering effects that dark mode causes, background images can cause legibility issues. If you’re going to use them, be sure to test the rendering.

4. Consider Transparent .PNGs

In some cases, using a transparent PNG can help a background color that’s turned dark in dark mode darken the PNG, allowing text that’s been turned light to be legible. Again, this is a case where rendering testing is key to identifying these situations.

5. Consider White or Light Font Colors

While background colors and images are half of the legibility equation, the other half is font color. And here dark mode behaves a bit more predictably.

“What’s dark goes light, but what’s light tends to stay light,” says Eric Santiago, Email and Web Developer for Oracle. "That's especially true if you're using pure white."

You can see how this can play out in our Oracle CX Marketing newsletter below. In the hero module, the white text that we use is unaffected by dark mode, staying white. However, in the second module, the headline that is in #000000 black is inverted to pure white and while the copy under it is inverted from #312d2a to a light gray that becomes unreadable in this case.

6. Plain-Text Emails More Likely to Be Affected

For better or worse, plain-text emails are more susceptible to dark mode changes, at least in some email clients. For example, Apple Mail’s dark mode only affects plain text and HTML emails that are so lightly coded as to be effectively plain text, says James Wurm, Head of Coding Services, Oracle CX Marketing Consulting.

“So for most marketers, their promotional emails won’t be affected, although some of their transactional emails might,” he says.

7. Selectively Add -webkit-text-fill-color to Your Inline Styles

A fix that works for Outlook 2019 for Mac only is to add -webkit-text-fill-color to the inline styles for your text blocks that are adversely affected by dark mode. This overrides dark mode’s color inversion, allowing you to keep your text color unchanged in that email client.

Here’s an example of it being used in the code for our newsletter:

<div style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; color: #312d2a; -webkit-text-fill-color: #312d2a; font-size: 15px; line-height: 20px; font-weight: 600; text-align: left;" class="fs_16 lh_20"><i>Powered by Oracle CX Marketing Consulting</i></div>

8. Selectively Use Graphical Text, Plus Alt Text

“The only thing that works 100% of the time to counteract dark mode is putting your text in images,” says Beltramelli. “If you have an all-image email, in dark mode it will look the same as in light mode.”

That said, we’re not recommending that our clients move to all-image emails. After all, all-image emails don’t look good when images are blocked and can contribute to deliverability problems.

However, if a particular module or portion of your email is getting is not legible because of dark mode and our other tips aren’t helping, you might consider converting just that section into all-images. Just be sure to add alt text to those images to help with image blocking and deliverability.

Whichever combination of those eight potential solutions you decided to use, keep in mind that there’s no such thing as perfect rendering when it comes to dark mode. The goal is better. Did your adjustments make your email more legible in dark mode for email? If yes, then that’s a success.

While some of the adjustments you’ll want to make are situational, you’ll want to bake some of them permanently into your email build process. If you don’t make changes now, but sure to account for dark mode when you redesign your email templates next or roll out a new modular build architecture, says Jason Witt, Senior Creative Director for Creative Services, Oracle CX Marketing Consulting.

“We are seeing some clients optimize components of their email architecture to accommodate for dark mode and others that are redesigning their email templates from the ground up to account for the effects of dark mode,” he says. “Either way, brands will need to account for how their logos, iconography, colors, live text, and imagery will be affected to ensure a great subscriber experience.”

—————

Need help optimizing your email designs? Oracle CX Marketing Consulting has more than 500 of the leading marketing minds ready to help you to achieve more with the leading marketing cloud, including Creative Services and Coding Services teams.

Learn more or reach out to us at CXMconsulting_ww@oracle.com

To learn more about email marketing and the tools to make it successful, visit us at: https://www.oracle.com/marketingcloud/.