Dark mode is the new light mode.
The launch of dark mode on iPhone and Mac OS, as well as its availability on Samsung Android devices and services like Slack, have made this theme mainstream.
So the Dyspatch team thought it was a good time to investigate exactly how dark mode affects email content. What are the dangers of dark mode? The results of this investigation may surprise you…
Why should EVERY email marketer care?
Every email marketer knows how much effort goes into ensuring emails are pixel perfect. So the thought of an email client inverting your text and background colors willy nilly is a scary one — the dangers of dark mode are real!
The most basic implication has to do with accessibility. What if folks can no longer read the copy in your email? (Spoiler: we found cases where this happened). Worse, what if your call to action is hidden? (Spoiler: we’ve found evidence of this, too).
Yes, dark mode is definitely the biggest monkey wrench thrown at email marketers in the last few years.
But where there’s fear there’s hope! Our team dug into the topic to provide some real insight into what the dangers are, and how you can prepare. Buckle up!
A quick primer on the dark mode theme
First, a quick primer on dark mode and how it impacts email design.
Simply put, the dark mode setting inverts colours on a phone or computer, so you’re using a dark background against light text. This is said to reduce eye strain, preserve battery life, and some folks just think it looks better!
Since most HTML emails have a white background, Google and Apple decided emails would look funny if the rest of the screen had a black background. So they decided to automatically convert emails to match dark mode.
For regular emails sent by an individual, this isn’t a big deal. Most people don’t apply much formatting to their emails aside from maybe font size.
On the other hand, for email developers and marketers who design HTML emails to match the look and feel of their website or app, this automatic color palette conversion poses serious issues.
What are the actual effects?
The impact of dark mode on Gmail – note the call to action on the yellow button
According to our friends at Litmus, there are three different ways an email may be rendered in dark mode:
- No color change — Yes, you read that right. Some email clients don’t change emails at all in dark mode, which can leave you with readability issues.
- Partial color invert — This is when the client only detects areas with light backgrounds, and then inverts them so the light backgrounds turn into dark backgrounds. In these cases, dark text is also inverted. Anything already on a dark background is left as is. The result? Your branding elements, from colors to logos, are manipulated in unpredictable ways.
- Full color invert — In this scenario, all colors in the email are inverted — regardless of whether they’re already on the dark side. This is definitely the most invasive change. It’s also one of the most popular approaches, which poses serious problems for email marketers.
At the end of this post, we’ll share a list of dark mode email client support, also courtesy of the good folks at Litmus.
Sidebar: Dark mode and interactive email
Let’s take a minute to address how this affects interactive or kinetic email.
Color inversions only impacts colors. It doesn’t affect any of the underlying HTML or non-color CSS styles. This means any of the interactive elements you’ve built in will work just fine.
But you’ll need to pay attention to contrast, backgrounds, and ensure transparent images are used properly.
Danger! Background images and background gradients
By far the most explosive finding of our investigation was how Gmail alters emails with a background image or a background gradient on text. Gmail on Android is supposed to do a partial color invert.
We tested two real-world scenarios for marketing emails:
- Having a background image with text on top
- Having a background gradient with text on top
On to the results…
Gmail on Chrome / Gmail on iPhone / Gmail on Android
As you can see above, the unaltered email (left) shows a background image with a slight white-to-blue gradient.
On iPhone (center), the background image has been removed but otherwise the email is fully readable.
Finally, in Gmail on an Android device (right), it appears the background image has been preserved but the black text has been inverted to white, making it completely invisible. Now, that’s a poor user experience!
We’re still investigating safe ways to use background images when sending to Gmail. But right now, you’ll need to test this specific configuration before sending.
Gmail on web / Gmail on iPhone / Gmail on Android
Similar to the previous results, we see the experience on Gmail Web (unaltered) and iPhone is nearly identical. Once again, Gmail on Android is extremely problematic because the text is inverted from black to white, making it nearly illegible on the gradient background.
Admittedly, we cherry picked gradient to highlight the risks. But it’s still alarming to see these results, especially considering gradient backgrounds have become popular in HTML email and client support is rising.
So at this time, we recommend using text in images instead of text on a background image or gradient. This is definitely a step backwards from both an accessibility and email technology perspective. But ensuring you specify alt text for your image will help balance the trade-offs.
Coming up, we’ll answer some of our customers’ most common questions about how to adjust their email creation tactics to ensure a smooth experience for those who use dark mode.
(If you have questions we don’t cover, let us know in the comments at the end of this post!)
Question 1 – When does dark mode get applied to an email?
Broadly speaking, there are three ways dark mode may be applied to your emails.
First, in Apple email clients (Apple Mail, iOS Mail, iOS 13) dark mode is only applied to “personal emails”. While it’s difficult to find an exact definition for this term, to our understanding, personal emails are ones that don’t contain any visible images.
This means an HTML formatted email with an invisible tracking pixel would count as personal, but a traditional marketing email with a hero image would not. It’s also worth noting that plain text emails will always be considered personal emails.
In Gmail, dark mode inversion is applied automatically on mobile if the user is using dark mode. Either a full color inversion (Gmail iOS) or partial color inversion (Gmail Android) will be automatically applied. This is particularly scary given that Gmail is the most popular email client — it’s the top choice for approximately 27.8% of email users worldwide.
Microsoft Outlook (mobile, web) follows the same approach as Gmail: dark mode is applied automatically. However, in Outlook Desktop, there’s a toggle button where the user can enable dark mode.
Frustratingly, dark mode is applied differently than in Gmail, so you won’t be able to guarantee inverted emails will look the same in each client, without testing each individually.
Question 2 – Can you prevent dark mode from being applied to an email?
You can prevent dark mode from being applied to your emails, if subscribers are using an Apple email client (like Apple Mail and iOS Mail).
You can do this by ensuring your email isn’t perceived as a “personal email”. In other words, by making sure you have at least one visible image.
Unfortunately, in Gmail and Outlook, there’s no way to prevent the automatic conversion from happening. The best we can do is plan for ᴉuʌǝɹsᴉou! I mean, inversion.
Question 3 – Can you specifically target dark mode with HTML or CSS?
Yes, there are two techniques for targeting HTML/CSS specifically in dark mode. This is a complex topic, so we’re not going to go into full detail here, but we’ll link to some great resources.
First, for Apple Mail, iOS Mail, and some versions of Outlook you can use the following media query:
@media (prefers-color-scheme: dark)
For the outliers (Outlook Android and Outlook.com) you can add the following as a prefix to CSS styles:
[data-ogsc] and/or [data-ogsb]
Unfortunately, Gmail (Android and iOS) doesn’t support either of these techniques, nor does Outlook 2019 for Windows.
More information can be found in this great blog post by Campaign Monitor.
Question 4 – What are the biggest dark mode “gotchas” for email marketers?
As if HTML email wasn’t complex enough, the Internet found a way to make it more difficult. Here are our top takeaways:
- This goes without saying, but be sure to test your emails in dark mode prior to hitting “Send” — especially on Gmail.
- Be sure your images are ready for dark mode: use transparent PNGs wherever possible and add a transparent outline around text in images so the text will be highlighted if inverted.
- Add dark mode meta tags and use the dark mode media queries to control the look and feel when inverted.
- As highlighted above, be extremely careful with background images and gradients in Gmail, as it’s hard to ensure the readability of your text.
Sometimes, it may feel like email technology takes two steps forward (like with AMP for Email) and then one step backwards. In time, these issues with dark mode will be ironed out, and dark mode may turn out to be a competitive edge for email marketers.
But in the meantime, we’ll continue to investigate edge cases and new techniques to ensure all the hard work you put into making your emails look great pays off.
With Dyspatch, you can quickly apply module changes and theme updates to all your templates, mitigating any dark mode compliance issues. Plus, our underlying DML technology ensures you don’t have to write custom code to maintain device compatibility — we stay on top of email client changes and guarantee your emails will be responsive and mobile-friendly.
If you’d like to learn more, our team is happy to help! Drop a note to firstname.lastname@example.org.
DARK MODE EMAIL CLIENT SUPPORT CHART (AS OF NOVEMBER 2019)
Credit to Litmus.com for investigating client support: https://litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers
|Email Client||HTML Treatment in Dark Mode|
|Gmail App (Android)||Partial color invert|
|Gmail App (iOS)||Full color invert|
|Outlook (Android)||Partial color invert|
|Outlook (iOS)||Partial color invert|
|iOS Mail||No color changes|
|Apple Mail||No color changes|
|Outlook 2019 (MacOS)||Partial color invert|
|Outlook 2019 (Windows)||Full color invert|
|Outlook.com||Partial color invert|