
Dark Mode for Email: What it is and How to Cope
What is Dark Mode?
Come to the dark side, we have cookies.
There is a challenge rising for email marketers, and it isn’t going away. It’s Dark Mode for email.
Dark Mode is an accessibility setting that shifts the interface’s color palette to display content in high contrast using dark background colors and light foreground. Ultimately, it minimizes blue light and enhances readability to reduce eye strain.
Dark Mode is ideal for people with light sensitivity, or even those who work nighttime hours since it’s easier to read in a low-light environment.
Jury’s still out on how “good” Dark Mode is for you, but that’s not stopping users from embracing it.
Want more info on dark mode? Check out the content we have planned for Darktober 2020 and register for our Desiging Emails for Dark Mode webinar!
What Does it Do?
Dark Mode shifts the background and font colors of an email to light on dark. To do this, it checks any color or background color with a CSS property of background
, color
, background-color
, or an HTML attribute of bgcolor
or color
. If a text or background color is defined, Dark Mode targets those HTML attributes and CSS properties via internal or inline styles. It then adjusts them to make them lighter or darker. So, if your text is a dark color, Dark Mode changes it to a lighter one. Same thing applies for background colors, too.
All of this is to say, since Dark Mode makes light colors dark and dark colors light, it will therefore change the colors in your email accordingly (and it doesn’t exactly ask your permission).
How Does This Impact Emails and What Clients Support Dark Mode?
Dark Mode doesn’t create any problems with plain text emails since plain text is black on white. But with HTML emails, where different components have different defined colors, things can get complicated.
Let’s look at one of our own recent emails as an example. Here’s how they normally render in Outlook:
And here’s how it renders in Dark Mode:
There is a Dark Mode function users can opt to enable in Outlook.com, Office 2019, Apple Mail and their Outlook Mobile app. However, only emails that display in Outlook.com and Office 2019 are affected by it. Originally Apple Mail wouldn’t change an HTML email, but with recent findings when you add certain Meta Tags to the HTML Apple Mail will render the email in Dark Mode if the device has the setting applied. If you want to find out what the Meta Tags are keep reading below.
For any email developers with a morbid curiosity as to how Microsoft’s color-changing algorithm works, you can check it out here.
The Dilemma
We’ve recently chatted with email developers and marketers facing challenges around Dark Mode. With the inability to define exactly what subscribers will see in Dark Mode (as of now), it’s difficult to know exactly how the email will look when it renders, and therefore supremely hard to control.
The dilemma email marketers face is do they try and hack Dark Mode and force the colors they choose to ensure the email renders as they intend? Or, do they accept that the end user wants to view things in this manner and hacking the Dark Mode is fighting the user’s needs?
Option A: Accept It
If someone has chosen to view their emails in Dark Mode, they have chosen so for a reason. To create a hack to override the interface from changing colors is just a little too Big Brother.
George Orwell would not be pleased.
Option B: Hack It
Add these Meta Tags and :root selector with styles to the email.
<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; } </stlye>
*Note: This is used to tell if the device has Dark Mode or Light Mode enabled.
Add this Dark Mode media query to your CSS:
@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 new 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 Outlook.com or Office 2019 with Dark Mode enabled, the defined .body
and the h1,h2, h3, td tags take effect.
However, this only worked sometimes. There’s no rhyme or reason as far as we can tell as to when it will work and when it won’t, but it’s worth a try if enough of your subscribers are on either of those clients.
Tips to Optimize for Dark Mode
Test your design in both light and dark appearances
First and foremost, because of the interesting ways an email renders in Dark Mode, it is best to test your email design for any issues before the send.
In fact, Email on Acid will be launching Dark Mode previews this fall. Soon you can check your email and know how it will render for Outlook subscribers who use the feature.
Use transparent images
A transparent image will allow the background color change to seem more seamless with the design still intact. Be aware of images or icons that are black.
As you can see in the example above, two of our logos were not transparent. This is something we’ll optimize for next time and make our emails that much better for subscribers.
Put a white stroke on your black font for images or icons
Since anything with the color black disappears on a black background, you can put a white stroke on your dark text or icons to improve readability when the background colors change.
Stay Tuned and Share Your Tips
Dark Mode previews are coming to Email on Acid this fall! Sign up for emails and get notified when we release Dark Mode previews for your email testing pleasure.
Have tips of your own for targeting Dark Mode in Outlook? We’d love to hear them. Sharing is caring, so leave your best tips in the comments.
Get the Dark Mode Pixel Hack
View email developer Ed Ball’s step-by-step instructions for using analytics tracking pixels to find out how much of your list is opening emails in dark mode.


Author: Ed Ball
Hailing from the global marketing agency world, Ed has developed emails for the United States Military, big Pharma, and Fortune 500 companies. Now an in-house email developer at Email on Acid, he pushes the envelope daily, exploring the true extent of what's possible in email. During his down time, you can find Ed jamming on his guitar.

Author: Ed Ball
Hailing from the global marketing agency world, Ed has developed emails for the United States Military, big Pharma, and Fortune 500 companies. Now an in-house email developer at Email on Acid, he pushes the envelope daily, exploring the true extent of what's possible in email. During his down time, you can find Ed jamming on his guitar.
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?
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?