
The Dark Mode Email Development and Design Guide
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.


Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
Very good tip of outlining black content. Whilst reading I was thinking “well, need to start thinking to find an accent colour that works well in dark and light for icons and logo variations.
Still not sure outline would work nicely on (small) icons.
Anyway, any solutions we’ll have, will still be stuck with the problems of legacy Outlook clients (which I’m not even sure how many real customers use, I’m convinced that audience is mostly corporations).
In addition to the clients listed above, dark mode is also an Operating System setting. The newest MAC OS has it, and i think the newest windows versions (not sure bc i dont have windows). Also iOS 13 is supposed to have dark mode. Hence it will affect MANY users.
One problem we’ve already noticed is when using a light-colored background image (with a light-colored bgcolor set as a backup) with dark text overlaid, that the text will be rendered illegible in dark mode. It changes to light text on a light background image (the bg color goes dark but you do not see that unless bg images are not supported). This requires immediate rethinking of how we build our emails.
Hey Patrick, try ‘mso-effects-shadow-color: #000001;’ on your live text and see if that helps 🙂
You’re right, it affects many users. I actually just tested this and found that more than 55% of emails you sent might be opened in dark mode. When Gmail starts supporting dark mode, it’ll skyrocket to 83%. 🤯
I tested all major email clients, you can see all the findings and screenshots here: https://sidemail.io/articles/dark-mode-in-html-email/
Same issue I encountered. One of my clients has a transparent logo, but all black. So imagine if you turn black mode ON, the logo disappears.
Temporary work I did is made the logo white and added a black background, additional padding + border radius, then it doesn’t look bad at all.
There should be a media query to easily switch a logo in an email, but I haven’t figured that out yet.
Can’t wait to have Dark Mode implemented for all email clients and in all apps
there is no Outlook.com. It redirects you to Outlook 360.
Today I received an email sent by someone using dark mode. They sent the simple text-only email formatted as HTML and upon opening it I found white text on a white background. I was able to reveal the text, but when I asked him, he was unaware and declared dark mode is a disaster.
Oh no! Hopefully, people will get used to Dark Mode and start incorporating it into their testing checklists so that this doesn’t happen again!
How does it affect excel format copies/pictures?
Hey Nathan! Can you clarify your question a bit?
I’m not Nathan, but here for this question. I copy cells in Excel and paste special using the picture paste in outlook. I have users who can’t see it in dark mode. There are other types of paste, so maybe I will try those and see how they work.
Thanks, David. Interesting problem. I’m not a dev, but here’s a thought…
Since Excel has a dark mode setting, could you try using a media query to swap the cells if the recipient is using dark mode?
In Option B, shouldn’t that be body, not .body?
Our in-house email dev tells me it can be either.
Hi, you mentioned the use of :root selector but isn’t selector rejected by gmail now? or is my knowledge outdated now?
I want to hack it but cannot find anything to work for OWA :/
Hello
I tried your method on my html mailing project . However unfortunately It doesn’t work or probably I miss some details. Could you help me please?
I have a PC, email is bellsouth.net I cannot read my emails from CVS and X-finity, it shows dark mode and has numbers and letters. I can’t get my coupons and can’t read what X-Finity is sending me.
This probably isn’t your fault, Diana. It sounds like CVS and Xfinity should be testing and previewing their emails more closely. One thing you could do is look for a “view in browser” link in those emails. That would open up the email outside your inbox as a web page.
You may want to check if your device or web browser is using dark or light mode and switch to see if that makes your emails more readable.