How I Create Dark Mode Friendly Mailers

Photo by Pixabay from Pexels

What is the dark mode?

With the new launch of iOS 13, Apple introduces the dark mode. Most popular operating systems, apps, and email clients also support dark mode. Areas with a light background are identified and converted into a dark background, and dark text becomes light.

“More than 55% of emails might be opened with dark mode. Once Gmail follows the dark theme, emails that might be opened with dark mode enabled will increase to 83%”

What email clients support dark mode?

  • Outlook (Android, iOS)
  • Outlook 2019 (Mac, Windows)
  • Outlook.com
  • Hey.com
  • Orange Webmail
  • Apple mail

Why should I consider the dark mode?

#1 People love dark mode

I’ve run a survey on Instagram/Facebook stories and LinkedIn (175 people interacted with those questions).

Figure 1: Users from three different environments — Overall 81.9% of people loves dark mode
  • Most of the developers work on darker interfaces
  • It helps to improve content readability
  • Dark mode helps improve battery life

#2 The majority of people make dark mode the default setting

Figure 2: Users from three different environments — Overall 57% of people changed their mobile and desktop appearance into dark mode

#3 Mailers look messy and it affects company branding

Figure 3: This is how it looks like if we don’t work on the dark mode rendering
  • Unsubscribe from my email list
  • Stop opening future emails from them or delete mailers without opening
  • Mark as spam
Figure 4: Users from three different environments — Overall 38% of users switch the device setting when reading mailers in dark mode
Live Twitter Chat — #Darktober inspired Twitter #DarkModeChat with ActionRocket and EmailonAcid

#4 Email clients respond differently

If you are a digital marketer you know that email rendering is complex. Now with the dark mode, it gets even more complex. Like I mentioned earlier, email clients work differently.

  • Fully inverted: Gmail iOS app, Outlook 2019 for Windows
  • Partially inverted: Gmail Android app, Outlook Android app, Outlook iOS app, Outlook 2019 for macOS, Outlook.com
Figure 5: How company corporate colors work on each version

How can we improve our emails according to the dark mode?

1. No color changes

(iOS mail, Apple mail)

2. Fully inverted colors

(Gmail iOS app, Outlook 2019 for Windows)

Logo

You can settle the logo with an outline, drop shadow, or background color if your logo/icon stays black (black logo is not noticeable when it changes into dark mode). According to the branding, it’s not good to change the logo color completely. Therefore I prefer to add a drop shadow to the logos and icon outlines. But we properly select the solution according to the design. So I strongly recommend testing the email before wrapping it up.

Figure 6: This is how I changed our logo for the dark mode

Image

Try to use transparent backgrounds for images. Some layouts are not good with transparent backgrounds. Continuously test and change what fits for both modes.

Figure 7: This is how we changed our images for the dark mode

Icon

If you are using icons with black outlines, make sure to fill the icon background in white (c). Otherwise, it will not appear in the dark mode. On the other hand, if you are using full-color black icons, as follows you can either add a white outline (a) or add a white background to the icon (b). I would mostly prefer (a) or (c) because it’s jarring. But in the worst-case scenario, we can use (b) as well. Make sure to test the mail before sending it out.

Figure 8: This is how we changed our icons for the dark mode

3. Partially inverted colors

(Gmail Android app, Outlook Android app, Outlook iOS app, Outlook 2019 for macOS, Outlook.com)

Figure 8: (a) No color changes, (b) Fully inverted colors, (c) Partially inverted colors— Color comparison in each version
Figure 9: After mailers developed into a custom dark mode theme

How I improved the default dark mode style

#1 We should enable the dark mode for email clients

First, we should add meta tags as follows into your mailer <head> tag.

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

#2 Add “prefers-color-scheme: dark” media query

Then, you have to add “prefers-color-scheme: dark” as a media quarry into your mailer <style> tag.

<style>
@media (prefers-color-scheme: dark) { }
</style>
  • Outlook — macOS
  • Outlook.com — webmail
  • Mozilla Thunderbird — Windows 10
  • Spark — macOS, iOS 13, Android 9
  • Gmail — Android 10, iOS 13, webmail
  • Apple Mail — macOS
  • Yahoo! — webmail
<style>@media (prefers-color-scheme: dark) {.dakmode {
background-color: #202123 !important;}
.darkLogo {
display: none !important;}
.lightLogo {
overflow: visible !important;
display: block !important;
width: auto !important;
max-width: inherit !important;
float: none !important;
max-height: inherit !important;
visibility: inherit !important; }
P, h2, span, li {
color: #d2d2d2 !important;}
.link:hover {
color: #ffffff !important}
}</style>

#3 Add styles to the email body

Always make sure to add the dark mode class into your HTML body. Otherwise, your changes won’t be visible.

<body class=”darkmode” style=”font-family: ‘Roboto’, Helvetica,sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; margin: 0;padding: 0;” data-gr-c-s-loaded=”true” bgcolor=”#FAFAFA”> </body>
<tr>
<td>
<a href=”https://wso2.com/" style=”text-decoration:none;” target=”_blank”><img alt=”WSO2 Logo” class=”darkLogo” src=”https://wso2.cachefly.net/wso2/sites/all/images/2020/wso2-logo-blacklogo-darkmode.png" style=”width: 100px; -ms-interpolation-mode: bicubic;height: auto; outline: none; text-decoration: none; border: 0;”></a><div align=”center” class=”lightLogo
style=”visibility:hidden; width:0px; max-width:0px; max-height:0px; display:none; overflow:hidden; float:left; line-height:0px;”>
<img alt=”WSO2 Logo” class=”lightLogo” src=”https://wso2.cachefly.net/wso2/sites/all/images/wso2-logo-white-new.png" style=”visibility: hidden; width: 0px; max-width: 0px; max-height: 0px; display: none; overflow: hidden;float: left;line-height: 0px;”></div></td>
</tr>

#4 Always test your emails

We have to always test our mailers before sending it out. Also, you must do the AB testings because email clients are changing, and every time it affects the user experience.

Live Twitter Chat — #Darktober inspired Twitter #DarkModeChat with ActionRocket and EmailonAcid

Conclusion

Since the dark mode is a trending feature, most of the email clients start supporting that. But the biggest problem is that email rendering can be complex with dark mode, and email clients act differently.

Photo by Walling on Unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ruwanthi Sulanjali

Ruwanthi Sulanjali

Speaker at ParDreamin 2021 and Twin Cities Pardot User Group 2021, Founder of DZiel by Ru, Front-End Developer, and Fitness Enthusiast