How to Enable Dark Mode in Html Email?

We have to follow the below steps to enable Dark mode in HTML Email. Such as:

1. Enable Dark Mode in an email client user agents
By including this metadata in your: tag, you can ensure that Dark Mode is enabled in your email for subscribers that have Dark Mode turned on:

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

2. Add: a root selector with styles to the email:

<style type=”text/css”>
:root {Color-scheme: light dark; supported-color-schemes:light dark;}
</stlye>

3. Add Dark Mode styles for @media (prefers-color-scheme: dark), Add this media query in your embedded <style></style> section for custom dark mode styles in iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS), and Outlook App (iOS).
Duplicate Dark Mode styles with [data-ogsc] prefix, Add this styling for support in the Outlook app (Android).

@media (prefers-color-scheme: dark ) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img { 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; }

/* Hides Light Mode-Only Content, Like Images */
.light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
.darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */
h1, h2, p, span, a, b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
.link { color: #91ADD4 !important; }

/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { 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; }

/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color: #91ADD4 !important; }
}

4. Apply your Dark Mode-only styles to your body HTML
Make sure all of your HTML tags have the appropriate Dark Mode classes inserted. Here is an example of the .dark-img and .light-img classes as they appear in our Light Mode vs. Dark Mode logos.

<a href=”http://litmus.com/” target=”_blank”>

<img class=”light-img” src=”https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png” width=”163″ height=”60″ alt=”Litmus” style=”color: #33373E; font-family:’proxima_nova’, Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;” border=”0″ />

 

<div class=”dark-img” 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.litmus.com/_email/_global/images/logo_icon-name-white.png” width=”163″ height=”60″ alt=”Litmus” style=”color: #ffffff; font-family:’proxima_nova’, Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;” border=”0″ />
</div>

</a>

Check our services by clicking here.