How I Create Dark Mode Friendly Mailers

Dark mode is a new trend in the tech industry, popularized by its benefits including lower energy consumption and better readability. Now, most email clients support this. Many people assume that this is easy rendering.

However, it’s only true if you obtain the right route and understand the behavior of each and every email client. Let’s learn how we can make our mailers dark mode friendly from my research findings and experiments.

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.

Do all email clients act in the same way?

Unfortunately, some don’t respond like that. For example, the Gmail app (iOS13) client, in addition to identifying the area with the light background and turning it into the dark background, do the opposite as well (dark into light).

Before we go through the improvements let’s figure out what email clients support the dark mode as not everyone supports it.

“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?

• 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

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

Based on my study, I found that overall 81.9% of people loves dark mode.

Figure 1: Users from three different environments — Overall 81.9% of people loves dark mode

Why do people prefer the dark mode themes that much?

• 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

Based on my study, I found that overall 57% of people changed their mobile and desktop appearance into dark mode.

So they can check their devices with low screen brightness. This likely means that those users read their mailers in dark mode.

Some email clients have no color changes. But if dark mode users open their mailers on a web browser, we should force our mailer converted to dark mode, which is the look that most dark mode users are expecting. That’s not a negative impact on the users, we increase the readability. I’ll explain later how we can do that.

#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

What do you think about emails look?

Exactly! It looks ugly in the dark mode and as a user, I don’t want to read the content.

This is the exact same impression that people who use dark mode will have. They won’t be happy about this. That’s why some users tend to change their device settings if they really want to read the emails.

Yes, you read that correctly. Some people do that. I’m one of those users who does that too if I really want to read some email content. But this doesn’t happen all the time. Most of the time I;

• Ignore the messy emails
• Unsubscribe from my email list
• Stop opening future emails from them or delete mailers without opening
• Mark as spam

Recently I’ve researched to find out whether people change the setting the way I did.

Figure 4: Users from three different environments — Overall 38% of users switch the device setting when reading mailers in dark mode

Overall 38% of users switch the device setting when reading mailers in dark mode (This is bad UX).

Others might unsubscribe or ignore mailers without reading. As email designers/developers, we must give a better experience to dark mode users.

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.

Here’s how each email client works:

• 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

I’ve tested how our company’s corporate colors work on each version. Therefore I’m recommending that you too test your company corporate colors to get the proper understanding.

Figure 5: How company corporate colors work on each version

Here you can see how dark mode rendering affects our company branding.

Sometimes we can control it (c.), but some email clients don’t let us change the colors (b.). Therefore, it’s hard to maintain company branding with email client’s behavior.

In the next section, let’s see how we can control the dark mood to give users a better experience using a hacking method (d.).

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

1. No color changes

(iOS mail, Apple mail)

In this version, whether the app is in light mode or dark mode your email doesn’t change. Also, we can’t force them to change it. But we can happy because our emails don’t look messy.

We only have to bother about email clients as follows.

2. Fully inverted colors

(Gmail iOS app, Outlook 2019 for Windows)

Here, it’s not only identified the area with the light background and converted to the dark background and dark text becomes light. Unfortunately, these email clients do the opposite as well: converting a dark background into a light background. Also, they won’t let us change the colors and switch the logo.

But we can only do changes as follows.

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

Tip — As I mentioned earlier we can use a white background as well. But make sure to add some extra spacing (3px width space). Otherwise, mailer does not look nice in 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

Tip — Always make sure to maintain the consistency. If you are using transparent background use that throughout the layout. If you want to add a background image, make sure to add the background color.

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.

Tip — Don’t use pure white (#ffffff) as a background color because it will be too bright and a bit hard on the user’s eyes. Alternatively, you can use an off-white like #f2f2f2 instead.

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

Email clients are still figuring out the solution for this because this is not the right way. You can also contribute to Gmail’s dark mode email bugs. I’m pretty sure they will fix this soon. Till then we have to follow these methods.

3. Partially inverted colors

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

This does not function as earlier versions. Here, it only detects light backgrounds and dark text and inverts it into dark backgrounds and white text. It keeps the dark background as it is. I think that’s how the dark mode concept should ideally act.

Here are the color comparisons in each version as per the experiments I have conducted.

Figure 8: (a) No color changes, (b) Fully inverted colors, (c) Partially inverted colors— Color comparison in each version

Let’s focus on the “(c) Partially inverted colors” section.

As I mentioned earlier, “(c)” only detects light background colors and dark text and changes into the dark background and light text. That’s why only color changes happen in “(e)-(f)”.

When you analyze more, you can see border-color doesn’t change while background color changes in “(e)-(f)”. I’ve added borders in the same background colors and only (c) keeps that as it is.

Sometimes dark mode users might not like default changes, there it comes the custom dark mode theme where we can change the code and colors as follows. This is kind of a hacking solution but it works very well.

Before we go through the steps, here you can understand how our mailers look after I changed the mailer into a custom dark mode theme.

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.

We have a “view online” feature on our mailers. If dark mode users will open our email on the web browser, we need to give them a better experience. Therefore I’m changing the email colors and logos using the following media query.

<style>
@media (prefers-color-scheme: dark) { }
</style>

But some email clients don’t support that, here you can see the chart where I get it from side mail blog. (as of October 2020)

Email’s client support “prefers-color-scheme: dark”

• Apple Mail — iPhone + iPad
• Outlook — macOS
• Outlook.com — webmail
• Mozilla Thunderbird — Windows 10
• Spark — macOS, iOS 13, Android 9

Email’s clients DO NOT support “prefers-color-scheme: dark”

• Outlook — iOS 13, Android 10, Windows 10
• Gmail — Android 10, iOS 13, webmail
• Apple Mail — macOS
• Yahoo! — webmail

Now let’s see how we can add CSS styling into the media query.

<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>

I’ve avoided pure white (#ffffff) as the text color and pure black (#000000) as the background color because I’ve found that it’s a bit harder on our eyes and it’s nice to keep colors between not too bright or not too dim.

Tip — However, I’ve used pure white (#ffffff) as a hover effect to the text link. It helps to grab the user’s attention to the links.

#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.

First, you should add a “.darkmode” class into the HTML <body> tag as follows.

Tip — Here, don’t include “background-color” inside the style. You have to make sure to take it out from the style. Otherwise, mailer won’t show the changes.

<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>

Then you can work on the logos. Here you can see how “.darklogo” and “.lightlogo” classes inserted. This appears in your dark mode vs. light mode logos.

<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.

On the other hand, the majority of people love dark mode and have set it as their default mode. Therefore we have to give a better experience while they are reading emails in dark mode.

As email designers/ developers, we only have to focus on the logo, images, icons, colors (text and background), and custom code (use “prefers-color-scheme: dark” media query). If we’ve done those necessary changes, we can give a better experience to the dark mode users, and it helps to increase the open rate, CTR, CTOR, and read rate of our mailers.

All the best for your next email campaign and I would love to hear your experiences. :)

Photo by Walling on Unsplash