How it helps and why it is important

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

Since 2019, the number of users turning off the lights on dark themes has skyrocketed, and this number is expected to continue to rise. A significant number of your subscribers probably read emails in dark mode, too.

Previously, we talked about how to implement dark mode in your emails. However, the introduction of dark mode in browsers, devices, and web applications also brings unique issues for email testing. Email on Acid has got you covered. Below, we'll talk about the pros and cons of testing emails in dark mode and help you figure out how to make it part of your team's pre-deployment checklist.

Why do I need to test email dark mode?

Our mantra here at Email on Acid is “Test every email, every time.” Because testing takes the guesswork out of how to prevent dark mode disasters from landing in your subscribers’ inboxes.

Since this trend is here to stay, we better start testing. Even Google's desktop search is testing a new dark design. (Currently, the homepage for an “incognito” Google search is in dark mode.) If testing emails in dark mode isn't on your team's pre-deployment checklist, we can help you make the transition with our Campaign Precheck tool.

What are common problems with emails in dark mode?

But why do you need to test dark mode? Essentially, dark mode interacts with CSS styles to make light colors dark and dark colors light on web pages. This means that dark mode will change the colors in your email by either inverting the background color or darkening it while making dark text lighter. Dark themes can also turn dark backgrounds into light ones.

For plain text emails, dark mode usually doesn't cause any problems, as it simply inverts the black text on a white background. However, things can get complicated for HTML emails, where different components have defined colors. Text colors can change and have unintended effects. Black logos and graphics can look like they've “disappeared” from your email, or white backgrounds can appear behind images.

We've published some tips on optimizing emails for dark mode, but testing can help you catch errors that might otherwise be missed.

How do different email clients handle dark mode?

An even bigger challenge is the different ways email clients like Gmail, Apple Mail and Microsoft Outlook display dark mode. Some email clients invert colors automatically, others don't. Other email web apps only switch colors automatically in certain situations. Some clients support media queries for dark and light color schemes, others don't. In particular, Gmail doesn't support the “prefers-color-scheme” media query.

Here are some examples of discrepancies in dark mode email clients:

These discrepancies become even more complicated depending on how your users open their emails. For example, if a subscriber uses Apple Mail in dark mode to check email from Gmail or Outlook, the email may appear differently than if they had viewed the content directly in the Gmail or Outlook mobile apps.

Here are some examples of email previews that illustrate this point:

Sent to Outlook/Hotmail
Opened with Apple Mail

Sent to Gmail
Opened with Apple Mail

Both emails appear essentially the same in the previews above, which use Apple Mail. However, you'll see below that these emails appear quite differently when opened directly in the Outlook or Gmail apps in dark mode, with elements appearing dark gray instead of white.

Opened directly in the Outlook app

Opened directly in the Gmail app

There are a lot of moving parts when moving to the dark side, which is why you need a robust email testing tool to ensure the accuracy of dark mode emails. Read on to find out Email on Acid's take on dark mode email testing.

How do I test emails in dark mode?

At Email on Acid, dark mode email testing is part of our automated campaign precheck tool. In this pre-deployment pipeline, our Email Preview feature, which captures screenshots from simulators and live devices, performs dark mode testing as well as light mode testing.

Email preview in light and dark mode.

Follow the steps below to test dark and light mode emails on dozens of live clients and devices using our Campaign Precheck tool, either by running a manual test or a test from your email service provider (ESP).

How do I run a manual email test?

If your email code is available in a URL or a ZIP file, or you want to copy and paste it from a document, you can perform a manual test using the following steps:

1. Click on Email testing in the navigation bar.

2. Click on Yes to confirm that your code is available in a URL or a ZIP file, or you want to copy and paste it from a document.

3. Fill in the Topic and content Details. Then copy and paste your HTML or browse to your ZIP file and upload it.

4. Click on Run email test.

How do I perform a test from my ESP?

You can also send your test email from your ESP to your Email On Acid project page. We recommend using this option to check if your ESP changes anything in your code when you click Send.

First, send your email to your Acid Projects email page. Then use the Email Preview feature to check for errors. To do this, follow these steps:

1. Click on Email testing in the navigation bar.

2. Click on NO.

Use the email address shown to send your test email from your ESP to Email on Acid.

3. Send the email from your ESP and then click Projects on the navigation bar to find and review your project.

How do I check the results of my dark mode email test?

Navigate to Email Test Summary Tab of your results to preview your emails in dark mode and light mode.

Now you can see the previews in Email Test Summary Tab to catch dark mode disasters before they happen. For more information about email testing at Email on Acid, see our help docs.

What mistakes should I avoid when running an email test in dark mode?

Running a dark mode email test is the same as running a regular test. Here is a list of common mistakes to avoid to run a successful test:

• Not Forward an email to the address provided when running a test from your ESP, this can cause potential problems with previews.
• Not Do not send multiple emails at once. This may cause the preview to not load properly. Send each email at least one second apart.
• Do Check that the examples shown in the preview match your subscriber base.

Packing

Our email previews in our Campaign Precheck tool make testing emails in dark mode easy. At Email on Acid, we believe that testing ensures you deliver perfection no matter the mode. While optimizing emails for dark mode comes with its share of challenges, a little extra effort will improve email marketing ROI and give you a competitive edge.

Take Email on Acid for a test drive and see how we can help you

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and real email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet us at @EmailonAcid on Twitter for more interesting stuff and great conversations about email marketing.

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps