Dark Mode is a feature introduced recently through on Apple and Android devices, and is getting used by those who want better text readability, want to save battery life, or simply prefer the dark appearance. Your emails will generally remain unaffected when a user enables dark mode, but did you know you have the ability to style your emails based on your recipient’s color scheme? Doing so can enable your emails to be more in sync with a user’s preferences, and can also just be a fun way to show off!
Enabling dark mode styles is done through adding targeted css. Here’s an example of what was used in our email:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
Once you have that in place, the below CSS media query will target users who have dark mode enabled. Anything you put inside this media query will apply to dark mode only.
@media (prefers-color-scheme: dark ) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-logo { display:block !important; width: 250px !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-logo { display:none; display:none !important; }
/* Custom Dark Mode Background Color */
.dark-mode { background-color: #333333 !important; }
.wrapper { background-color: #444444 !important; }
/* Custom Dark Mode Styles */
h1, h2, p, span, a, b { color: #ffffff !important; }
a { color: #94d9d6 !important; }
.cta-button { background-color: #EFEFEF !important; }
.cta-button a { color: #333333 !important; }
}
In order to have a dark mode logo, we have to include two image files within the html and hide the dark mode version when it isn’t enabled. And because various inboxes will sometimes ignore certain styles, including this html has to be done in a very specific way, as seen here:
<div class="dark-logo" 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://emailer.emfluence.com/clients/emfluence/uploadedfiles/2019/tip-of-the-month/dark-mode/logo-white.png" width="250" alt="emfluence digital marketing" border="0" />
</div>
The result is an email that looks entirely different in dark mode:
As always, be sure to test your emails prior to sending!
Want more tips like this in your inbox? Be sure to subscribe to our monthly newsletters on Email Tips and the latest trends in email and marketing automation strategy: https://more.emfluence.com/subscriptions
