Dark Mode For Email Is Gaining Adoption… Here’s How To Support It
Dark mode reduces screen energy usage and increases focus. Some users also state they feel a reduced eye strain, but that’s been questioned.
Dark mode adoption continues to grow. Dark mode is now available across macOS, iOS, Android, and a host of apps, including Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail, and Reddit. There isn’t always full support across each, though. It’s not often that there are advancements in email technology, so it’s nice to see the adoption of dark mode support in email as well.
We saw 28% of users viewing in Dark Mode in August 2021. By August 2022, that number had increased to nearly 34%.
Litmus
Understanding best practices, code to implement, and 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.
Recently, DK New Media developed a Salesforce Marketing Cloud template for a client that incorporated Dark Mode, dramatically contrasting the email sections when viewed in an email client. It’s an effort that may drive additional engagement and click-through rates for your subscribers.
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 with dark mode settings turned on. You can include 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; overflow: visible !important; float: 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; overflow: visible !important; float: 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; overflow:hidden; float: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 simple 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:
- Litmus – the ultimate guide for dark mode for email marketers.
- CampaignMonitor – the developer’s guide to dark mode for email.
If you want your email templates converted for dark mode support, don’t hesitate to reach out to DK New Media.
