Email Marketing & Email Marketing Automation

Dark Mode For Emails: What Is It? Which Clients Support It? What Code Is Needed?

Douglas Karr Tuesday, February 2, 2021

0 1,008 2 minutes read

Dark mode was launched just a few years ago and adoption continues to grow. Dark mode is now available across macOS, iOS, and Android as well as a host of apps including Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail, and Reddit. There isn’t always full support across each, though.

Dark mode reduces screen energy usage and increases focus. Some users also state they feel a reduction in eye strain, but that’s been questioned.

Recently, we developed a Marketing Cloud template that incorporated Dark Mode into its code that really makes the email sections dramatically contrasted when viewed in an email client. It’s an effort that may drive additional engagement and click-through rates for your subscribers.

It’s not often that there are advancements in email technology, so it’s nice to see the adoption of this experience across the industry. Understanding best practices, code to implement, as well as client support is critical to your implementation success of dark mode. For that reason, the team at Uplers published this guide to dark mode email support.

Dark Mode Email Code

Step 1: Include metadata to enable dark mode in email clients – The first step is to enable dark mode in the email for subscribers who have their dark mode settings turned on. You can do so by including this metadata in the <head> tag.

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

Step 2: Include dark mode styles for @media (prefers-color-scheme: dark) – Write this media query in your embedded <style> tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), and Outlook App (iOS). If you do not want an outlined logo in your email, you can use .dark-img and .light-img classes as shown below.

@media (prefers-color-scheme: dark ) { 
.dark-mode-image { display:block !important; width: auto !important; overﬂow: visible !important; ﬂoat: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; } 
.light-mode-image { display:none; display:none !important; } 
}

Step 3: Use [data-ogsc] prefix to duplicate dark mode styles – Include these codes for the email to be compatible with dark mode in Outlook app for Android.

[data-ogsc] .light-mode-image { display:none; display:none !important; } 
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overﬂow: visible !important; ﬂoat: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

Step 3: Include dark mode-only styles to the body HTML – Your HTML tags must have the correct dark mode classes.

<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overﬂow:hidden; ﬂoat:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" /> 
</div><!--<![endif]-->
</a> 
<!-- //Logo Section -->

Email Dark Mode Tips and Additional Resources

I’ve been working on the Martech Zone daily and weekly newsletters to support dark mode, be sure to subscribe here. As with most email coding, it’s not a simple process due to the different email clients and their proprietary coding methodologies. One issue I ran into was exceptions… for example, you want white text on a button regardless of dark mode. The amount of code is a bit ridiculous… I had to have the following exceptions:

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }

Some additional resources: