---

If Simon and Garfunkel were email developers, they may have penned these lyrics for “The Sound of Silence”:

“Hello dark mode, my old friend,
I’ve come to code with you again.”

Dark mode challenges are among the latest on a long list of things email developers have to watch for when marketing teams prepare to launch new campaigns.

Dark mode emails can cause issues with inconsistent branding, accessibility, and even reduced subscriber engagement. While those factors aren’t typically the email developer’s sole responsibility, developers are often asked to help find a fix.

Pathwire and Ascend2 partnered on the survey, Email After Dark, to find out how marketers are (or aren’t) addressing dark mode emails. The results reveal what brands find most frustrating about designing and developing dark mode emails.

Let’s take a look at some highlights from the Email After Dark survey. Then, we’ll talk about the ways email developers can come to the rescue when the rest of the marketing team freaks out.

Dark mode email survey results

Dark mode email challenges for developers

Our dark mode survey found that 44% of respondents are designing and developing emails for dark mode at least some of the time. Of course, “designing and developing” could mean different things to different people on the marketing team.

Email marketers might create templates that work well in both light and dark modes. Or, they could be coding separate emails for dark mode settings. They may also be previewing emails in dark mode to catch problems before subscribers see them.

What’s really interesting about this result is that it suggests it won’t be long before a majority of marketers consider dark mode when sending emails. The survey found 28% of marketers have plans to start designing and developing emails for dark mode. That means a total of 72% have dark mode on their email marketing radars.

Whether you’re new to dark mode emails, or you just need some advice tackling the challenges, let’s dive in and explore the dark side.

Optimizing logos for dark mode

Topping the list of challenges for email marketing is the optimization of logos and images in dark mode, which 43% of marketers cited as one of their biggest struggles.

Using transparent PNGs for logos and images helps avoid white boxes around graphics in dark mode. However, it doesn’t solve all your logo problems such as black text disappearing or poor contrast. Designers can try other easy fixes such as adding subtle glow or drop shadow to logos.

However, when it comes to email developers, the CSS query @media (prefers-color-scheme) is your secret weapon. This allows you to code separate emails depending on the mode a subscriber is using. That means you can have a logo that’s optimized for dark mode in one email and your normal logo file in the other.

Here’s how that might look:

CSS:

 @media (prefers-color-scheme:dark) {
         .dark-mode-hide{
             display:none!important;
    }
    .dark-mode-show{
 display:block!important;
 }
       }
 

HTML

 <img src="https://marketing.emailonacid.com/hubfs/EOA-Logo-Full-Color-white-envelope.png" width="150" alt="Email on Acid" border="0" style="display:block;max-width:150px;font-family:Arial,sans-serif;font-size:9px;line-height:12px;color:#ffffff;font-weight:bold;" class="dark-mode-hide">

 <!--[if !mso]><!-->
 <img src="https://marketing.emailonacid.com/hubfs/images/logos/EOA-Logo-White.png" width="150" alt="Email on Acid" border="0" style="display:none;max-width:150px;font-family:Arial,sans-serif;font-size:9px;line-height:12px;color:#ffffff;font-weight:bold;" class="dark-mode-show">
 <!--<![endif]--> 

Note: the code under <!--[if !mso]><!--> tells Outlook to ignore the dark mode logo.

Optimizing email code

While the @media query (prefers-color-scheme) is a handy solution, it has a downside. Email client support is limited to those using WebKit as a rendering engine. That means you’re looking at support in Apple Mail, Thunderbird, and some versions of Outlook for Mac.

The lack of @media query support from Gmail is definitely frustrating. That’s probably why, at 34%, optimizing email code for dark mode was the second most-cited challenge.

There are some specific fixes for dark mode in Gmail and Outlook. Check out developer Nicole Merlin’s advice for fixing dark mode issues in Outlook. She also made a video you can watch below.

https://youtu.be/lQ7jwD0N6rA

Rémi Parmentier of HTeuMeuLeu.com also has some expert tips for dealing with the troublemakers of dark mode emails. Find out how to use CSS blend modes to fix Gmail dark mode issues, and learn how to make emails react to Outlook.com’s dark mode.

Of course, the only way to be sure your code is optimized for dark mode settings is to test and preview every email.

Branding and color inversion

Designers and email developers often work together to make sure campaigns are on-brand.

So, when dark mode emails show up in the inbox with off-brand colors, you need to collaborate and figure out what to do about it.

The Email After Dark survey found 33% of marketers call inconsistent branding in dark mode emails as a top challenge. Automatic color inversion, which 31% called a dark mode challenge, is often to blame. Some clients automatically invert all CSS color properties, others only partially invert colors. 

How major clients handle dark mode color inversion

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.

Testing emails before you send them is the best way to catch inconsistent branding. With Email on Acid by Pathwire, you can share unlimited email previews with others on your team to get feedback on whether dark mode emails stray too far from brand guidelines.

My colleague at Pathwire, Sr. Graphic Design Francois Sahli, recommends keeping designs simple. For example, sticking with black text and a white background will make color inversion seamless. Francois also reminds us that we may never get things absolutely perfect.

Reduced email engagement

Of course, the email elements you want your subscribers to engage with are important. If something becomes invisible in dark mode, people won’t click it. That’s why 28% of marketers in our survey worry about reduced engagement from poor UX in dark mode emails.

Email developers should keep a close eye on how call-to-action buttons are coded. If you’re using bulletproof buttons with live text and CSS instead of a button graphic, be sure your button colors still stand out and stay on brand in dark mode.

Gauging dark mode’s popularity

Understanding subscriber behavior may not be on the top of an email developer’s roles and responsibilities. However, it’s easy to understand why email marketers knowing how much of the list views emails in dark mode would be valuable. 

Here's some good news... Email on Acid now provides dark mode open tracking in our analytics. If an email client supports the media query prefers-color-scheme-dark, then you'll be able to see how many subscribers are viewing campaigns in dark mode. This can help you decide how much time and effort to dedicate to dark mode email optimization.

Increased workload for developers and designers

Dark mode settings in email have caused a fair share of headaches among designers and developers. But as always, we learn to adjust. Eventually, we adapt our processes and create resources to help us take on new challenges.

It’s no different with dark mode challenges. 23% of survey respondents called an increased workload a top concern. However, once an email team creates a library of components that work in dark mode, the production process becomes more efficient. 

Even better, you can also work with others in the organization to establish dark mode standards in your brand guidelines. That way, the dark mode experience will be consistent on the web, in applications, and the email inbox. 

Inconsistent email client rendering

Only 20 percentage points separated the top dark mode email challenge and the bottom challenge. That’s a sign that marketers have become very aware of the way dark mode complicates email marketing efforts and teams are being mindful about the email experience.

Just 23% of marketers cited inconsistent rendering and support among email clients, Yet, this issue is directly related to other challenges, such as color inversion and code optimization.

If you’re still in the dark when it comes to dark mode emails, the first thing you should do is start testing templates and new campaigns. With Email on Acid, you can use the Email Editor to view and fix HTML emails in dark mode. Plus, the platform offers dark mode previews from major clients.

Delivering email perfection isn’t easy! But with the right tools and a little effort, email developers can optimize the experience for subscribers no matter the mode.