CSS

How To Create Dark Mode Email Template In HTML

The dark themes have become more and more popular nowadays, more and more apps and websites start to provide a dark version of their interface. Some email clients offer an option to switch dark and light modes. In this article, We will learn how to support dark light mode in the HTML email template, so let’s start

How to make HTML emails for dark mode

Detecting theme using CSS

To detect a dark theme in CSS we used the prefers-color-scheme media feature. Using it we can target the light or dark themes that the user has selected for their operating system.

Adjusting colors

Design tip: Avoid pure white (#ffffff) as the text color. I found that the contrast minimum ratio of around 4.5 for the main text is a nice compromise. Check the contrast ratio here

<head>
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <style>
        /* Light mode */        @media (prefers-color-scheme: light) {
            body {
                background-color: white;
                color: black;
            }
        }

        /* Dark mode */        @media (prefers-color-scheme: dark) {
            body {
                background-color: black;
                color: white;
            }
        }
    </style>
</head>

Switching between light and dark logo

Nowadays, a typical logo usually has a transparent background and colorful icons. In dark email see the problem because email clients don’t invert image colors, you need to handle it yourself.

We have to approach for logo

Include both light and dark themes of your logo and switch using prefers-color-scheme media query
Make a logo with a white background instead of a transparent background but logo colors, but make sure your logo color is balanced with dark and light mode.

so let’s see the HTML:

<!-- Light theme (so dark logo) -->
<div class="darkLogo" style="mso-hide: all; display: none">
  <image src="dark-logo.png" style="display: none" />
</div>

<!-- Dark theme (so light logo) -->
<div class="lightLogo">
  <image src="light-logo.png" style="display: none" />
</div>

CSS styles:

<style>
  @media (prefers-color-scheme: light) {
    .lightLogo {
      display: none ;
    }

    .darkLogo {
      display: block ;
    }
  }

  @media (prefers-color-scheme: dark) {
    .darkLogo {
      display: none ;
    }

    .lightLogo {
      display: block ;
    }
  }
</style>

I have recommended to you prefer 2nd approach because some email clients do not support prefers-color-scheme. here is the list of some email clients:

Email client	Dark UI	Auto-invert email colors	Supports @media (prefers-color-scheme)
Apple Mail iPhone + iPad	Yes	Yes (if transparent background)	Yes
Gmail Android 10	Yes	Yes (forced if not already dark)	No
Gmail iOS 13	No	No	No
Gmail webmail	Yes	No	No
Outlook iOS 13	Yes	Yes (forced if not already dark)	No
Outlook Android 10	Yes	Yes (forced if not already dark)	No
Outlook Windows 10	Yes	Yes (forced if not already dark)	No
Outlook macOS	Yes	Yes (forced if not already dark)	Yes
Apple Mail macOS	Yes	Yes (if transparent background)	No
Yahoo! webmail	Yes	No	No
AOL webmail	No	No	No
Outlook.com webmail	Yes	Yes (forced if not already dark)	Yes
Windows 10 Mail Windows 10	Yes	Yes (forced if not already dark)	No
Zoho Mail webmail	Yes	Yes (forced if not already dark)	No
Mozilla Thunderbird Windows 10	Yes	No	Yes
Spark macOS	Yes	Yes (if transparent background)	Yes
Spark iOS 13	Yes	Yes (if transparent background)	Yes
Spark Android 9	Yes	Yes (if transparent background)	Yes

I hope this article helps you and you will like it.

Jignesh Patel

Jignesh Patel is a Senior Full Stack .Net Developer has extensive experience with designing and developing enterprise-scale applications. He has good skills in ASP.NET C#, ASP.NET MVC, AngularJS, Angular, Nodejs, Web API, EPPlus, SQL, Entity Framework, JavaScript, Azure Web Jobs, Microsoft Graph API, etc.