Dark Mode for Email Marketing: A Quick Guide

To get a good night’s sleep, experts say to limit screen time at night.

And yet, we do it anyway – staring into the blinding screen as we scroll through Facebook, check email, and catch up on cat videos before bed.

The good news? Dark Mode settings make it easier to satiate our late-night phone habits, darkening the colors on mobile phones to make screens easier on weary eyes.

The bad? Dark mode presents yet another challenge for email developers, who must tweak their HTML to ensure that emails render correctly – Dark Mode or not. As with many aspects of email HTML, each email client handles Dark Mode differently, and of course, some email clients don’t support it at all.

So how can you give your Dark Mode audience a good email experience without leaving out the rest of your subscribers? We’ll shed some light on Dark Mode email here.

First, we’ll focus on what email marketers should know about dark mode and its role in the email experience. The second part of this post will provide email HTML considerations for developers and best practices for designers looking to implement dark mode tweaks in their email templates.

Part I: Dark Mode Email Basics

What is Dark Mode?

Dark Mode is an inverted color scheme using light design elements and text against dark backgrounds.

From apps like Instagram and Twitter to operating systems and now email clients, Dark Mode settings are growing in popularity, giving users more control over their experience. Some users turn to dark mode to make things easier on the eyes in low-light environments – like when you’re checking one last email before bed. Others simply prefer the aesthetics of dark color schemes. In some cases, Dark Mode can even prolong battery life.

Whatever your audience’s reasons for using Dark Mode, it’s important to respect their choice and provide them with a good email experience.

How does Dark Mode impact the email experience?

As it sounds, Dark Mode inverts the colors of the email client’s interface, as well as the contents of the email. Simply speaking, it makes light colors in your email dark and dark email colors light. In some email clients, it will change your email’s colors without your permission.

Because many people use Dark Mode to improve their user experience with colors that are easier on their eyes, you must make sure your emails don’t detract from their reading experience. If your emails appear too bright or colors are illegible in Dark Mode, readers may delete your email as quickly as they opened it.

This makes it all the more important to test your emails before you hit “send.” Of course, it’s always necessary to test your emails first, but Dark Mode requires keeping an even closer eye on rendering.  That way, you ensure that your subscribers receive the best email possible, no matter the email client or color setting.

If you want to adjust how your email template renders in Dark Mode, you can implement the tips and tricks in Part II of this post, or talk to your Upland Customer Success Manager about making some tweaks to your template.

Which email clients support Dark Mode?

If you’ve been in the email industry for any length of time, you know that support for certain features varies widely. Dark Mode is no different.

Email clients that currently offer some support for Dark Mode rendering include:

• Apple mail app iOS13
• Apple mail macOS
• Gmail app Android
• Gmail app iOS13
• Outlook app: iOS13
• Outlook 365
• Outlook macOS
• Outlook Windows 10
• Outlook.com

If your audience opens your email in these clients, there’s a chance they’re opening your email in Dark Mode. However, not every email opened in Dark Mode will look the same. Email clients have several different methods of converting emails into Dark Mode, which we’ll discuss in the next part.

Part II: Dark Mode Email Development and Design

Creating emails that look great in the dark starts with understanding how Dark Mode affects email. In this part, we’ll discuss how email clients render emails in Dark Mode, what tweaks you can make to your email HTML, and some design best practices to deliver emails that are easy on Dark Mode users’ eyes.

How does Dark Mode affect how emails are rendered?

As Dark Mode becomes more popular, email client developers are still figuring out the best ways to implement dark mode in email clients. Currently, email clients turn to one of several approaches to converting email colors to Dark Mode.

• Converting Transparent Backgrounds to Dark Colors: Like it sounds, email clients that use this technique will convert areas with transparent background colors to darker colors. If you do not explicitly set a background color, dark mode users will see a dark background.
• Automatically-Inverted Colors for All Non-Dark Backgrounds: These Dark Mode-supporting clients will detect light backgrounds and convert them to darker colors.
• Inverted Text Colors: Accordingly, clients that invert an email’s background colors will also invert the text to ensure it doesn’t blend into the background.
• No Automatic Changes: As strange as it sounds, some clients that support Dark Mode don’t convert emails into dark color schemes by default. They do, however, provide support for email developers who want to alter how emails look in Dark Mode.

In fact, both Apple Mail and Outlook allow you a level of control over Dark Mode appearance with media queries or other code tweaks. In other Dark Mode clients, you’ll need to balance the needs of your Dark Mode and default display audiences to create email.

At any rate, to ensure your emails look their best, you’ll need to keep a few Dark Mode development and design tricks in mind.

Developing Email for Dark Mode

Here are a few HTML and CSS tips for creating great email in Dark Mode.

CSS Media Queries

In CSS, media queries (@media) detect different a user’s screen size, resolution, or browser, allowing you to tailor your email to different devices. Email clients like Apple Mail and some Outlook clients support the prefers-color-scheme: dark media query for targeting Dark Mode users with alternate code.

To use media queries for Dark Mode, add the following meta tags to your email:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Then, add your media queries to the CSS in your <style> tag:

<style>
       body {
       background: #ffffff;
       color: #4a4a4a;
       }

@media (prefers-color-scheme: dark) {
       body {
       background: #000000;
       color: #cccccc;
       }
       }
</style>

You can use Dark Mode media queries to:

• Change the colors of your text, hyperlinks, and backgrounds in Dark Mode.
• Show or hide certain parts of your email, depending on whether the recipient uses Dark Mode.
• Swap or adjust images for optimal viewing across email clients.

Let’s talk a bit more about that last point.

Using CSS Media Queries to Swap or Adjust Images

Once you’ve adjusted the colors of your email for Dark Mode, you may find that your email’s images look out of place. You can use media queries to 1) display an alternate image in Dark Mode, or 2) add a CSS image filter that dims your image.

To display alternate images in Dark Mode, first set up your media queries with classes for both light and dark images.

@media (prefers-color-scheme: dark) {
.lightimg {
display: none !important;
}
.darkimgWrapper,
.darkimg {
display: block !important;
width: 300px !important;
}
}

Then, add your images to the body of your HTML, placing your dark image in a DIV tag and including the mso-hide style to ensure compatibility with older Outlook versions:

<img src=" https://place-hold.it/300x80" width="300" height="auto"
style="display: block; height: auto;" class="lightimg">

<div class="darkimgWrapper" style="mso-hide: all; display: none">
<img src=" https://place-hold.it/300x80/000000" width="0" class="darkimg"
style="display: none;">
</div>

You may notice in this example that the image width is set to “0.” To further ensure proper rendering, the image width is declared in the media query instead of the HTML body. This will prevent Outlook from displaying both images, just in case the mso-hide and display: none fail to work.

Rather than replace your image completely, you may want to simply apply a filter over your image in Dark Mode. This can be useful for large photos with lots of bright areas. To apply a filter, include the following style in your media query, adjusting the values to your preference:

{ filter: brightness(.8) contrast(1.2); }

Below, you can see examples of the original image (left) and an image with the filter applied (right).

The lower brightness value dims your image, while the increased contrast can help preserve the details in your image.

Outlook Method for Android and Outlook.com Dark Mode Emails

Finally, for the Outlook clients that don’t support Dark Mode media queries (Outlook Android and Outlook.com) you may add the [data-ogsc] and/or [data-ogsb] prefixes to your CSS styles.

For example, the following style customizes the background color of a Dark Mode email:

[data-ogsc] .darkMode { background-color: #34495E !important; }

Best Practices for Designing Dark Mode-Friendly Email

Now that we’ve covered email development for Dark Mode, let’s discuss a few best practices for designing your Dark Mode emails.

Background Colors in Dark Mode

When specifying a color for Dark Mode emails, make sure you choose a color that ensures your email content remains readable. Also, keep in mind that users who use dark mode do so because they want to see dark colors. To provide your dark mode users with a good email experience, avoid blinding them by forcing your emails to display light backgrounds.

Dark Mode Images

If you use non-transparent images for things like your logo, it’s important to consider how these images will look for Dark Mode users. For example, the two images below show how an image with a white background appears once the background is converted to Dark Mode colors.

To avoid that unsightly white square, you can choose images with colors that look good in both default and Dark Mode viewing, or you can optimize your logo for dark mode. One way to ensure your logo and other images look great across modes is to create a version of your logo with a white stroke outline (below, left) or a subtle light glow (right).

These outer effects will appear invisible on light backgrounds while ensuring your images don’t get lost on Dark Mode clients. As stated in the previous section, you can also use media queries to display alternate images for Dark Mode clients. Below, you’ll see examples of images that can be swapped out using media queries to ensure the logo looks good in both default and Dark Mode viewing environments.

Dark Mode Text

Finally, when it comes to crafting your email text, keep these two tips in mind:

• Don’t put all your text in images. While putting your text content in images seems like an easy way to get things just right across email clients, this creates email accessibility issues for subscribers who use screen readers to read your email. It may also impact deliverability, as email with high image-to-text ratios can trigger spam filters.
• Avoid putting pure white text on pure black backgrounds. Because many users choose dark mode to ease eye strain, it’s important to make sure your dark mode color schemes aren’t equally hard on the eyes.

The Light at the End of the Dark Mode Tunnel

While dark mode presents additional challenges for email development, dark mode doesn’t have to be daunting. With careful creative, a dash of CSS, and rigorous testing, you can create emails that look great, dark or light.

Not ready to design your next email template on your own? Talk to your Customer Success Manager to see how Upland can help, or contact us here.