Dark Mode has entered almost every app, browser, device, and of course email inboxes and taken the entire VIRTUAL EXPERIENCE to the next level.
One of the fastest-growing marketing trends, it is a reversed color scheme that imparts a soothing experience to the eyes. It lets you view light-colored text, UI elements, and icons on dark backgrounds.
Apple introduced Dark Mode in its 15th release of desktop Operating System, macOS Mojave.
Gmail launched Dark Mode for Android and iOS devices and even iOS Mail in the same year.
Here are 2 recent studies that throw light on how dark mode is being preferred by more and more people.
According to Android Authority (March 2020),
91.8% of people use dark mode, wherever available.
Earlier, Polar (November 2019) revealed similar results:
95% prefer dark mode.
Which theme do you prefer?
While merely 7.5% of people use dark mode on Apple Mail, almost 37% of people have adopted dark mode on their iOS.
Take a look at this example for a better understanding of what an email looks like in the dark mode.
Why are more and more people embracing dark mode on their devices to view emails? Here are 4 primary reasons.
Less exhausting for the eyes in less illuminated rooms
Saves battery life, as it reduces screen brightness
Makes content more legible, thereby increasing readability and content consumption
Classy look and feel
While dark mode is an unstoppable trend, there are some challenges that are holding back some brands from making the most of it. Take a look:
Email clients render dark mode emails in 3 different ways
Desktop, web, and legacy mobile email clients are a blessing!
They do not change anything in the email, irrespective of the mode.
Partial Color Inversion of Outlook.com: Just the light background and dark text get reversed with all the other elements of the email remaining as it is.
Full Color Inversion of Windows: All the colors of the email will be inverted, which implies that if you have sent an email with a dark theme, it might become a light-themed email in Dark Mode. (Inconveniently funny!)
The advanced Apple Mail lets you customize the email campaign for light as well as dark modes with the help of CSS. HTML meta tags, CSS target, and updated properties can help email developers do a variety of things like changing the font colors, visuals, as well as backgrounds.
Dark mode might not suit every brand personality
It can hamper the deliverability if your email fails to render properly in dark mode
A dark mode email might lose its color contrast, leading to accessibility problems
Although it is generally believed that dark mode is better for readability, it might not be the case always
If not done right, it may lead to a broken layout as shown in this image
.COMNow, considering these challenges, how to ensure the mode is dark and not the experience?
Include images with transparent backgrounds
Give a translucent outline to transparent PNGs with dark text so that your email renders well even on email clients that do not support dark mode
If your logo is black, add transparent images so that the background color changes smoothly in dark mode. If you don’t do so, your email may look like this!
It is advisable to have a white stroke on your black font in images or icons
Always test your emails for proper renderability in dark themes
If you are unsure of how to do it?, simply send a plain text email rather than an HTML template .
The first step is to enable dark mode in the email for subscribers who have their dark mode settings turned on. You can do so by including this metadata in the <head> tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Write this media query in your embedded <style> tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), and Outlook App (iOS).
If you do not want an outlined logo in your email, you can use .dark-img and .light-img classes as shown below.
@media (prefers-color-scheme: dark ) {
.dark-mode-image { 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; }
.light-mode-image { display:none; display:none !important; }
}
Include these codes for the email to be compatible with dark mode in Outlook app for Android.
[data-ogsc] .light-mode-image { display:none; display:none !important; } [data-ogsc] .dark-mode-image { 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; }
Your HTML tags must have the correct dark mode classes.
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="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 dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" 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.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="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 -->
+1 213 674 6665
contact@uplers.com
