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 !important;
}
.darkLogo {
display: block !important;
}
}
@media (prefers-color-scheme: dark) {
.darkLogo {
display: none !important;
}
.lightLogo {
display: block !important;
}
}
</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.
