The Impact of Dark Mode in Emailing

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:

Your eyes are resting

It reduces eye strain when the user is in a dark environment and uses less blue light.
Better visibility

It allows better visibility when the user is in a low light environment.
Less energy consuming

It is less energy consuming on OLED screens (if a dark background #000000 is used. It doesn’t work with dark blue for example). Google confirmed during a webinar that dark mode allowed a saving of up to 50% of the battery life of devices with this technology.

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:

Gmail

On the mobile app
Outlook

Outlook 2019 (Mac OS & Windows), Outlook.com and the IOS and Android Apps
Apple

Having democratized the dark mode, all Apple Mail applications offer this option
Hey.com

A modern emailing service released in 2020 similar to Gmail and Outlook

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?

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.

The Impact of Dark Mode in Emailing

Summary

Dark Mode, why should I use it ?

What are the compatibilities?

How to implement dark mode in your emails?

Some Dark mode good practices

MailSoar is a deliverability agency who can help your deliverability grow, and thereby help your business grow.

Subscribe Now

Deliver your emails to the main inbox

Book a meeting now