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; 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 -->View Uplers Interactive Infographic
© 2020 DK New Media, LLC, All Rights Reserved
