---

Since 2019, the number of users turning off the lights with dark themes has sky-rocketed, and it’s expected to continue to climb. A significant number of your subscribers are also likely viewing emails in dark mode.

Previously, we talked about how to implement dark mode in your emails. But the dark mode rollout across browsers, devices, and web apps also poses unique problems for email testing. At Email on Acid, we’ve got you covered. Below, we’ll talk about the ins and outs of dark mode email testing and help you figure out how to make this part of your team’s pre-deployment checklist.

Why do I need to do dark mode email testing?

Our mantra here at Email on Acid is “Test every email, every time.”  After all, testing takes the guessing out of preventing dark mode disasters from hitting your subscribers’ inboxes.

Since this trend is here to stay, we better start testing. Even Google’s desktop search is testing out a new dark theme. (Currently, the homepage for an “incognito” Google search is in dark mode.) If dark mode email testing isn’t part of your team’s pre-deployment checklist, we’re here to help you make the shift with our Campaign Precheck tool.

What are common problems in dark mode emails?

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

Dark mode usually doesn’t create problems with plain text emails since the black text on a white background simply gets inverted. But with HTML emails, where different components have defined colors, things can get complicated. Text colors might change and have unintended effects. Black logos and graphics may look like they’ve “disappeared” from your email, or white backgrounds may appear behind images. 

We’ve posted some tips on optimizing emails for dark mode, but testing helps you catch mistakes that slip through the cracks.

How do different email clients handle dark mode?

An even more significant challenge is the different ways email clients like Gmail, Apple Mail, and Microsoft Outlook render dark mode. Some email clients auto-invert colors and some don’t. Other email web apps only automatically switch colors in specific situations. Some clients support media queries for dark and light color schemes, while others don’t. Most notably, Gmail does not support the prefers-color-scheme media query.

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

Email Client	Auto-Inverts Colors?	Common Dark Mode Challenge
Apple Mail (iPhone/iPad)	Yes	Auto inverts when the background is transparent or pure white (#fffff).
Apple Mail (macOS)	Yes	Auto inverts when the background is transparent or pure white (#fffff).
Outlook (iOS)	Partially	May make background color darker.
Outlook (macOS)	Partially	The only Outlook option that does support @media (prefers-color-scheme). May make background color darker.
Outlook (Windows)	Yes	The only Outlook option that consistently auto-inverts colors.
Outlook.com (webmail)	Partially	The only Outlook option where image swap works. May make background color darker.
Gmail (Android)	Yes (when not already dark)	Does not support the query @media (prefers-color-scheme).
Gmail (webmail)	No	Does not support the query @media (prefers-color-scheme).
AOL (webmail)	No	No current dark mode user interface.
Yahoo! (webmail)	No	No current dark mode user interface.

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

Here are some example email previews illustrating that point:

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

There are many moving parts in the shift to the dark side. That’s why you need a robust email testing tool to ensure accuracy in dark mode emails. Keep reading for Email on Acid’s take on dark mode email testing.

How do I test dark mode emails?

At Email on Acid, dark mode email testing is part of our automated Campaign Precheck tool. In this pre-deployment pipeline, our Email Previews feature, which captures screenshots from simulators and live devices, conducts dark mode testing along with light mode testing.

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

How do I run a manual email test? 

If you have your email code available in a URL, a ZIP file, or you want to copy and paste from a document, you can run a manual test with the following steps:

1. Click on Email Testing on the navigation bar.

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

3. Fill out the Subject and Content details. Then, copy and paste your HTML, or browse for and upload your ZIP file.

4. Click Run Email Test.

How do I run a test from my ESP?

You can also send your test email from your ESP to your Email On Acid projects page. We recommend using this option to check if your ESP is changing anything in your code when you hit send.

First, send your email to your Email on Acid projects page. Then, use the Email Preview feature to check for bugs. Let’s do this with the steps below:

1. Click on Email Testing on the navigation bar.

2. Click No.

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

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

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

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

Now, you can use the previews in the Email Test Summary tab to catch dark mode disasters before they happen. Check out our help docs to learn more about email testing at Email on Acid.

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

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

• Don’t forward an email to the provided address when running a test from your ESP. This can result in potential issues with previews.
• Don’t send more than one email at the same time. This can cause previews to load incorrectly. Send each email at least one second apart.
• Do check that the examples you’re previewing fit your subscriber base.

Wrapping up

Our Email Previews in our Campaign Precheck tool make it easy to conduct dark mode email testing. At Email on Acid, we believe testing ensures you deliver perfection no matter the mode. While optimizing emails for dark mode comes with its challenges, a little extra effort improves the ROI of email marketing and gives you a competitive edge.

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