The dark mode (or night mode) is a functionality allowing to adapt the colors of an email, app, or website, in order to make it darker.
Generally, it is to make a light background darker and to adapt the UI accordingly. This can be done by displaying, for example, a light colored text on a dark background. The UX refers to the User Interface, meaning the general design of a website, app or email.
Meaning that instead of using a default dark colored text displayed on a light background, called Light Mode, a light colored text is displayed on a black background: it is therefore a display setting.
The dark mode has been popularized by Apple on iOs and MacOS, though now a lot more platforms , including Chrome, Gmail, Instagram and YouTube also offer dark mode and dark ‘themes’, variations of light on dark. We talked about the dark mode in this article, check it out if you want to learn more about the latest email marketing trends of 2022!
Dark Mode, why should I use it ?
Using dark mode, or a dark theme, is beneficial in several ways. Here are the three main reasons given by dark mode users:
What are the compatibilities?
Since it is a pretty recent technology this mode isn’t compatible with a lot of ESPs. Here is a list of ESPs that include this functionality:
Not all of these ESPs apply the dark mode the same way. For instance, Outlook.com will invert some background colors automatically. Others will not support dark mode targeting with code (like Gmail on Android that inverts colors at their convenience)
For now, this technology is still developing in emailing since it is yet to be fully supported. Some good examples are, as often in the development of emails, the Apple apps (MacOS, iOS, iPadOS) as well as hey.com that incorporate perfectly media queries (commands that allow to target the display according to the type of screen, necessary for the dark mode)
How to implement dark mode in your emails?
Some email coding and design software like Stipo, can incorporate a dark theme, enabling the use of tools such as drag & drop. However, to achieve truly professional results our experts and email developers recommend using code such as:
1 – In the email marketing header, add those meta tags :
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
2 – In style, this line of code should be added:
:root { color-scheme: light dark; supported-color-schemes: light dark; }
3 –Then you need to add classes in your style, specifying that you are targeting dark mode. For example, for email background:
@media (prefers-color-scheme: dark ) {
.dark-background { background-color: #272623 !important; }
}
4 – After that, you’ll have to duplicate these classes to make them compatible with Outlook on Android. For example:
[data-ogsc] .dark-background { background-color: #272623 !important; }
5 – Finally, you will have to target these classes within your HTML email code in order to activate dark mode styles.
Looking to include dark mode in your emailing campaigns?
Contact us now, one of our email designers will assist you to integrate your html codes
Some Dark mode good practices
- For your images use a transparent PNG format in order to get a transparent background on your images.
- Use colors with an important contrast to ensure an optimal lisibility for your content
- When using images with text, take into account the dark mode: indeed, the text’s color will change but not the background’s. It is therefore important to make sure that even in dark mode, the text is still readable.
- As always, test your emails on different devices / ISPs (with Email on Acid for example)
As you may have guessed, not many ESPs are currently compatible with dark mode, but if your audience is mainly composed of hey.com or Apple apps users, it could be interesting to implement this functionality, making you an “early adopter”!
MailSoar is a deliverability agency who can help your deliverability grow, and thereby help your business grow.
Whether you’re an experienced email-sender looking to perfect the delivery of your infrastructure or that a big part of your business ROI is tied to email landing at the right place, our team of experts is used to manage the ongoing deliverability of massive senders from all industries.
Contact MailSoar to optimize your email deliverability and increase your mailing reputation with the best solutions.
