How to Enable and setup Dark Mode in Html Email?

1. Enable Dark Mode in 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 :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 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.

<!-- start HEADER_LOGO -->
<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" />
 
    <!-- The following Dark Mode logo image is hidden 
    with MSO conditional code and inline CSS, but will be         
    revealed once Dark Mode is triggered -->
 
    <!--[if !mso]><! --><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><!--<![endif]-->
 
</a>
<!-- end HEADER_LOGO -->

If you are looking for this kinds of Responsive HTML Email Coding??

You can message me any timeClick here.