---

Whether you’re designing a website, building an application, or developing an email – dark mode is a force to be reckoned with. There was a time when it seemed like only people who wrote code preferred dark mode settings. Now it’s gone mainstream. That includes dark mode email designs in many inboxes.

Some people like dark mode because they believe it’s easier on their eyes, helps reduce exposure to blue light, or extends device battery life. Other people choose dark mode for purely aesthetic reasons, which is a fancy-pants way of saying they think it looks cool.

Whatever the reason, there’s a good chance that a significant portion of the subscribers on your list are checking out email campaigns in dark mode. Research on email engagement from Sinch indicates at least 25% of consumers view their inbox in dark mode. And that presents some challenges for email teams.

If you’re not optimizing emails for dark mode, your campaigns probably look terrible to some people. The messages could be difficult or impossible to read. Important graphics could be disappearing into the darkness. Dark mode problems could also be messing with your branding in emails.

Let’s shed some light on what it takes to code dark mode emails so that anything you send looks good in either dark or light mode.

What is dark mode and why does it matter for email?

Dark mode is a display setting that can be turned on and off for many devices, applications, and operating systems. Essentially, it changes the user interface so that instead of seeing the traditional dark text on a light background, there’s light text on a dark background.

So a background with hex code #FFFFFF and text color hex code of #000000 switches.

In dark mode, the background hex code becomes #000000 and the text hex code switches to #FFFFFF.

Here’s how that might look when viewing an email in light or dark mode on a mobile device:

Dark mode UI was the norm back in the ‘70s not long after email was invented. Picture those old, boxy PCs with black screens and glowing green text. Light mode eventually became the standard along with LCD screens in the ‘90s.

Twitter and YouTube were among the first popular services to offer dark mode. In 2019, Microsoft, Google, and Apple followed the trend and began offerring dark or “night mode” options for their programs and operating systems.

In 2023, Twitter/X made the move to make its dark mode UI the default. At first, Elon Musk said it would be the only option. Apparently, he believes dark mode is “better in every way.” But backlash from users prompted the company to bring back a light mode setting for the platform.

Once Gmail, Apple Mail, and Outlook started offering dark mode, email marketers began paying attention too. Here’s how an old Email on Acid newsletter looked when we first started testing our own stuff in dark mode four years ago. It’s not terrible. But it’s not ideal either.

So, what does all this mean for email development? More fun and exciting problems to solve that’s what. As if all the inconsistent email client rendering issues weren’t enough – now email marketers need to worry about dark mode?

We hear you. But we also believe coding emails for dark mode is important. While there are some developers who try to override dark mode settings and force a light mode experience for everyone – that’s not giving your subscribers what they want.

By acknowledging and adapting to the subscriber’s preference for a dark theme, you ensure your emails seamlessly integrate into that recipient’s chosen environment. As we embark on this journey through the realm of dark mode, let’s not just witness its ascent but actively participate in enhancing the email experience it promises.

Dark mode email challenges

Coding dark mode emails will take a little extra work. That’s because there are several things that can happen when switching from light mode to a darker theme. As you’d probably expect, not all email clients handle dark mode the same way. And not all of them support the same solutions either.

As an email developer, your challenge is to use progressive enhancements to deliver the best inbox experience to as many people as possible. You may not be able to control everything about dark mode emails, but you should work with what’s possible to make sure your list can engage with your emails.

First, let’s explore the biggest roadblocks to dark mode email development. Then, let’s look at some code snippets that can help.

Color inversion in dark mode emails

One of the key challenges in the dark mode landscape is the unpredictable nature of color inversion. Because it’s not always just light/white backgrounds switching to dark/black. There are also instances when text and background colors are switched to the complementary or opposite color. Strangely enough, it’s also possible that an email with a dark background gets inverted to a light background.

Adding to the challenge, different email clients render dark mode in their own ways. Text and background elements may undergo full, partial, or no inversion at all, depending on the client and platform. A partial inversion usually involves switching only when a light background is detected. If your designs already have a dark them, clients that partially invert colors are likely to leave background text alone.

Brand consistency challenges

Color inversion in dark mode emails can be a struggle when you’re trying to follow specific brand style guidelines. You work hard to design and code emails that are on brand and showcase a consistent visual experience. If there’s full color inversion, a bulletproof button you’ve coded with a brand color could look quite different in dark mode, and it may not jive with your brand at all.

In this example, purple may be a primary brand color you use for calls-to-action in emails. But the inverted green button may not fit your brand at all.

Many marketing teams are now including dark mode options in their brand’s style guidelines. This means a little extra work and careful consideration. However, if you can build dark mode into an email design system, you’ll be able to quickly and effectively iterate on your email campaigns to support darker themes.

We’ll explore ways to target dark mode in emails so you can deliver different experiences to depending on the recipient’s preference in just a bit.

Dark mode email logos and graphics

Graphics you’ve created with a background that matches your HTML background color can be a very noticeable problem in a dark mode email. Check out the old newsletter examples above. Those logos and graphics in a white box look pretty ugly, don’t they?

The easy and obvious fix for this is to use transparent pngs as your images. However, that can still create problems. Darker logos or text in a graphic may disappear once dark mode settings are applied. These visual quirks can disrupt brand identity and user experience, as shown below:

For a bunch of options on how to handle this, check out our tips on fixing dark mode logo problems.

Email accessibility and dark mode

While dark mode might offer advantages for certain vision problems, the color inversion it brings can also pose potential readability issues. Balancing the aesthetic appeal of dark mode with its impact on accessibility becomes a delicate task. When we tested email accessibility and dark mode, we found that sometimes the switch caused issues with color contrast.

It’s important for us to remember that accessibility is based on the individual’s needs and preferences and (especially when we are talking about disability) everyone’s needs are different.

Tracking dark mode usage

Some marketing teams wonder whether developing emails for dark mode is worth the extra time and effort. They want to know how many of their subscribers are actually opening and viewing emails in dark mode and light mode. This isn’t something you find in your typical email analytics dashboard.

Sinch Email on Acid introduced a way to track dark mode email opens inside our platform. This will give you a general idea, but it won’t cover everyone on your list who prefers a darker theme. That’s because the method exclusively tracks email clients with support for the media query prefers-color-scheme, which is used to target dark mode and define specific styles.

Once you can put a number on the percentage of subscribers using dark mode for email, you can make your case for optimizing campaigns for those recipients. Let’s say only 10% of your list is viewing emails in dark mode. That could be around the same percentage who use Outlook, and developers spend plenty of time fixing common Outlook rendering issues.

Up next, we’ll explore effective strategies for overcoming these challenges and optimizing your emails for dark mode. By addressing these intricacies head-on, you can create an engaging and visually consistent inbox experience for every subscriber, regardless of their preferred mode.

Tips and code snippets for dark mode emails

When it comes to crafting emails that seamlessly adapt to dark mode, a few essential steps can make all the difference. From coding practices to design considerations, ensuring your emails look sharp and remain readable across varying interfaces is key.

Whether you’re a seasoned developer or just dipping your toes into the dark side, these insights will pave the way for a smoother and visually pleasing inbox experience for your subscribers.

Dark mode meta tags

Meta tags are used to tell the email client which style sheets what to load or not load. In this case, we’ll be using the meta tags color-scheme and supported-color-schemes to highlight whether the HTML supports light and dark themes.

We’ll add the below meta tag to the head section of our code, which is used to tell if a device has dark mode enabled..

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

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

<style type="text/css"> 

:root { 

Color-scheme: light dark; 

supported-color-schemes:light dark; 

} 

</style> 

Dark mode media queries

After you have your meta tags in for dark mode, you can add this media query to the email’s CSS to adjust the colors for your brand’s preferred dark mode theme.

@media (prefers-color-scheme: dark ) { 

 .body { 

      background-color: #CCCCCC !important; 

 } 

h1, h2, h3, td { 

      color: #9ea1f9 !important; 

       padding: 0px 0px 0px 0px !important; 

} 

} 

In this media query, prefers-color-scheme: dark acknowledges the dark mode setting, and the body tag addresses the body color for the entire email. So, when an email with this statement is opened in in dark mode enabled the defined .body and the h1, h2, h3, td tags take effect.

However, there’s a big caveat to this approach. The media query (prefers-color-scheme) is not supported by every email client. It only works with clients using WebKit as the rendering engine. As of this writing, the CSS query will work with Apple Mail, Thunderbird, and certain versions of Outlook, but Gmail does not support it. For the latest check out this resource from CanIEmail.com.

In theory, you could use (prefers-color-scheme) to “override” dark mode and force it to use a light background color. However, if you’re going to take the time to try and force a white background, you may as well design a dark mode experience instead. Plus, as noted, this CSS query won’t work for every email client.

Finally, it’s important to note that this media query works the other way as well. If you’re starting with an email that has a darker theme, you can use @media (prefers-color-scheme: light) to define styles for light mode viewing.

Logos and images

The prefers-color-scheme media query comes in handy when you want to display a specific image that’s optimized for a dark mode email. This technique is sometimes called the “dark mode image swap.” To make it happen, you essentially include two versions of the image that are stacked on top of each other.

Let’s say you have two version of a logo: your normal design for light mode, and a dark mode version that reverses the color of the text from black to white. You’d want to hide the normal logo when dark mode is used so that the dark mode optimize logo is displayed.

Here’s how the code might look if we wanted to display different logos in dark and light mode:

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/NORMAL-EoA-Logo.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-hide">

  <!--[if !mso]><!-->
  <img src="https://marketing.emailonacid.com/hubfs/images/logos/DARK-MODE-EOA-Logo.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-show">
  <!--<![endif]-->  

Note: the code under <!–[if !mso]><!–> is Microsoft Office conditional code that tells Outlook to ignore the dark mode logo. With Outlook,  you can also use the tag “mso-hide:all” to keep elements hidden in dark or light modes.

Of course, not every email clients supports dark mode targeting like this. For that reason, you should also try to optimize your normal logo for viewing in dark mode. First, be sure to use a transparent PNG. Then, try one of the following options to make sure the logo (or any graphic) is viewable in dark mode.

• Add a white stroke
• Add a drop shadow
• Use a glow effect
• Use a gradient

Here’s how the Sinch Email on Acid logo would display in dark mode with a white stroke that outlines text and fills in gaps:

Graphic designers on your marketing team might cringe at this approach, but it’s better than having your logo disappear into the abyss.

Text and background images

A dark mode email may display inverted text color and HTML background color, but the actual images you add to the design won’t be changed at all. That can cause problems if you’re using a background image in an email with live text overlayed on top.

For example, your text may switch from dark to light, but the text is over a background image that uses a lighter color. Suddenly, your text may become unreadable and fail to meet the right color contrast for accessibility.

Email clients and dark mode rendering

Like usual in the world of email development, it’s never as simple as having a dark mode and non-dark mode, all email clients that feature dark mode will handle it slightly differently.

As explained in this excellent article from our friends at Parcel, you can break down the different dark modes to three different modes; full inversion, partial inversion and no change.

Full inversion will change both your font colors and your backgrounds, partial inversion is very similar but will largely leave your backgrounds untouched, no change won’t inverse any of your content.

Email Client	Auto-Inverts Colors?	Common Dark Mode Challenge
Apple Mail (iPhone/iPad)	Yes	Auto inverts when the background is transparent or pure white (#ffffff).
Apple Mail (macOS)	Yes	Auto inverts when the background is transparent or pure white (#ffffff).
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/app)	No	Does not support the query @media (prefers-color-scheme).

Apple Mail and dark mode

In Apple Mail’s dark mode, it tends to invert pure black (#000000) and pure white hex (#FFFFFF) codes. Apple Mail will completely disregard contrast or other-such rules if you have those hex codes and invert them regardless.

We advise to choose slightly different hex codes, such as #000001 or #FFFFFE, the difference in color is not noticeable and it’ll help you avoid any surprises.

Gmail and dark mode

As is often the case, Gmail can often throw a bit of a curveball when it comes to how it handles our dark mode emails, simply because there are so many versions of Gmail, ranging from iOS to Android to regular old Gmail, nailing down a solution can be quite tough. Previewing your campaigns in dark mode on Gmail helps you understand how to build the best experience for those subscribers.

If you’re struggling with Gmail on iOS dark mode, you can try this insanely clever solution by Rémi Parmentier, utilizing blends (which are supported in Gmail) to control how your email looks when dark mode has its way.

Outlook and dark mode

Ahh, now we get to it, the elephant in the room; Outlook. One significant issue is how Outlook handles color inversions. In dark mode, where backgrounds become dark and text becomes light, Outlook might struggle to accurately invert colors, leading to unexpected and sometimes undesirable outcomes. This can result in poor readability, visual inconsistencies, and an overall less-than-ideal user experience.

Additionally, Outlook’s dark mode implementation might not fully align with standard development practices, introducing quirks and challenges for email developers. These issues can range from the rendering of background images to the handling of certain styles, making it crucial for email designers to employ specific strategies to ensure their emails look as intended in Outlook’s dark mode.

If you’re struggling to get text readable in Outlook, Nicole Merlin has an amazing guide on tackling font colors in Outlook’s Dark Mode, including inside VML.

More dark mode email resources

Dark mode is an ever-evolving problem that email developers are tackling every day and new and exciting solutions are cropping up all the time. It’s impossible for us to cover everything about dark mode in just one article, so we have a great selection of other resources.

• Video: Email After Dark: Coding For Dark Mode
• Video: How To Prepare Your Email Design System for Dark Mode
• Webinar: Expert Advice: Designing Dark Mode Emails
• Article: Dark Mode vs. Light Mode: Which Is Better?
• Article: How to resolve issues with email dark mode

Test and preview emails in dark mode

There’s an excellent way to step out of the shadows and into the light when you’re trying to optimize dark mode emails – preview your campaigns before you hit send. With email testing from Sinch Email on Acid, you can see screenshots of your campaigns on more than 100 clients and live devices. That includes dark mode email previews.

Is your media query working for subscribers using Apple Mail? Dark mode email previews let you know. How are Gmail users experiencing your campaign in dark mode? Run a preview to see screenshots of how your email renders in both the webmail version and the mobile app. Worried about Outlook? We’ve got dark mode email previews for that too. Use the Email Editor to make and test code changes as you troubleshoot.

Sinch Email on Acid helps you optimize your email in many other ways too. That includes checking color contrast for accessibility, validating URLs, and more. Don’t let dark mode scare you away. It’s a UX trend that’s here to stay.