Dark mode for emails: what is it? Which clients support this? What code do you need?

Dark Mode was launched just some years in the past and continues to develop in recognition. Dark Mode is now accessible on macOS, iOS, and Android, in addition to quite a lot of apps together with Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail, and Reddit. However, there is not all the time full support for every of them.

Dark mode reduces display screen energy consumption and will increase focus. Some customers additionally state that they really feel a discount in eye pressure, however this has been questioned .

We lately developed the Marketing Cloud template that included darkish mode in our code, which actually makes e-mail sections stand out in stark distinction when considered in an e-mail consumer. This is an effort that may improve your followers’ engagement and CTR.

Advances in e-mail know-how aren’t widespread, so it is good to see this expertise unfold all through the trade. Understanding greatest practices, code to implement, and buyer support are important to a profitable darkish mode implementation. For this purpose, the Uplers staff has revealed this dark mode email support information .

Dark Mode Electronic Code

Step 1. Turn on metadata to allow darkish mode in e-mail clients – The first step is to allow darkish mode in e-mail for subscribers who’ve darkish mode settings enabled. You can do this by together with this metadata within the tag.

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

Step 2. Enable darkish mode kinds for @media (prefers coloration scheme: darkish) – Record this media question within the inline tags to customise the darkish mode kinds in Apple Mail, iOS, Outlook .com, Outlook 2019 (macOS) and Outlook App ( iOS). If you don’t need the define emblem to seem within the e-mail, you can use the .dark-img and .light-img courses as proven under.

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

Step 3. Use [data-ogsc] prefix to duplicate darkish mode kinds – Enable these codes to make e-mail suitable with darkish mode in Outlook for Android.

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

Step 4. Include darkish mode-only kinds in the primary HTML – Your HTML tags should have the right darkish mode courses.

<!-- Logo Section -->
<a href="http://email-uplers.com/" goal="_blank" fashion="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" fashion="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 darkish mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" fashion="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" fashion="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 with darkish mode suggestions and extra sources

As with most e-mail encoding, this is a difficult course of as a result of numerous e-mail clients and their proprietary encoding methodologies. One downside I bumped into was exceptions … for instance, you need white textual content on a button no matter darkish mode. The quantity of code is slightly humorous … I had the next exceptions:

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

Some extra sources: