How I Create Dark Mode Friendly Mailers

Photo by Pixabay from Pexels

What is the dark mode?

“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%”

  • Gmail (Android, iOS)
  • 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

Figure 1: Users from three different environments — Overall 81.9% of people loves dark mode
  • It’s easy on the eyes because it reduces screen brightness
  • 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
  • Ignore the messy emails
  • 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

  • No color changes: iOS mail, Apple mail
  • 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

2. Fully inverted colors

Logo

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

Image

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

Icon

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

3. Partially inverted colors

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

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

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

<style>
@media (prefers-color-scheme: dark) { }
</style>
  • Apple Mail — iPhone + iPad
  • Outlook — macOS
  • Outlook.com — webmail
  • Mozilla Thunderbird — Windows 10
  • Spark — macOS, iOS 13, Android 9
  • Outlook — iOS 13, Android 10, Windows 10
  • 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

<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

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

Conclusion

Photo by Walling on Unsplash

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Fragment Shadow / TouchDesigner online interactive workshop -report

No Words — A Zoom Game

#NEPALVSCOVID19 — A Virtual Design Thinking Challenge

Movie Streaming Application — UX/UI Case Study

5 Important Commercial Interior Design Firms You Need to Know

WWBC: The Worldwide Bear Conference 2021

How to Prototype Your New Electronic Hardware Product

The Power of Everything — How capturing 100% of a digital experience opens worlds of new…

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

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

More from Medium

10 Best Fonts For Successful Content Marketing

Blog banner of 10 best fonts for successful content marketing

E-Waste Solution UX Case Study

5 Signs It’s Time to Rebrand.

“Brand Identity Design”