How To Adapt Emails To Dark Mode

Dark Mode is a modified color scheme for the interface of programs and applications in which dark text on a white background is converted to light text on a black background. And the colors of all design elements are shifted by a couple of tones in one direction or another. Gradually, this function is being added to all services, including email clients. So it needs extra effort if you want your promo messages to look beautiful.

Why people prefer to switch to Dark Mode

Night Mode has become one of the design trends of 2019, which continued into next years. Google conducted a study and found out that black background saves the power of mobile devices. Experts tested Dark Theme on the YouTube app, which was one of the first to adapt.

Pixel color affects display power consumption, and white is the most power-hungry. If you set the screen to Night Mode, the battery consumption is reduced by up to 63%. But this conclusion applies exclusively to OLED displays. In the case of LCDs, there is no change in power consumption. 

How to enable Dark Mode in email clients

In the web version of Gmail, you can choose a black background as a theme. Open Quick Settings > Theme > View All > Dark.

The background will turn black, and the text will turn white and light gray, but only in the Gmail interface. Emails won't be adapted.

By the way, there is no such problem in Gmail on mobiles. You just enable Dark Mode in the Gmail app and it works perfectly.

In Outlook Dark Mode also works correctly and inverts the color scheme of the entire email body. To switch to the night mode, open File > Office Account > Office Theme > Black.

Also, if part of the content is quite difficult to read, you can quickly turn off the Dark Mode in the message. Just click on the sun icon.

To activate the Dark Theme in Yahoo Mail, open Settings at the top right. In the menu, you’ll find two Night Mode themes: Blue night and Dark gray. Choose any of them and click on the Dark option.

Dark mode email features to note

Night Mode is supported by all mobile versions of popular email clients. And although many browser versions do not fully support it yet, it’s definitely worth it to keep working on adapting your emails. After all, 41.9% of emails are read by people in mobile apps (39.9% – in browsers and 18.2% – in desktop programs).

Email services work with Dark Theme differently. For example, Gmail for Android devices automatically inverts all colors. The desktop version of Outlook for Windows does the same. But Gmail on macOS and iOS replace only light ones.

Therefore, it is difficult to fit your campaign for all the variety of mail systems, but it is quite possible to adapt your email marketing to Dark Mode.

How to design emails for Dark Mode

On the Internet, you can find tips and tricks on how to set up an automatic display of emails in Night Theme using code snippets added to templates. It is difficult to say how effective they are. In fact, for optimization, it is enough to choose a suitable template and carefully prepare it for Dark Mode.

Pay attention to images

It is recommended to use images with a transparent background. Dark Mode email design requires this from the following elements:

• logo and slogan;
• social media icons;
• product cards;
• photo of the author.

What to do with a black logo?

The main thing you need to consider is that the logo symbol or text should contrast with the background of the email. If your company logo is made in bright colors, then it is enough to make it with a transparent background. It will look good in any mode. But if it is black, then in the Night Mode the logo will disappear. In the example below, the brand logo is hard to recognize.

You can solve the problem by adding a minimal light stroke or shadow to the logo. In the regular mode, these elements won’t break the design, but they will save it if the Dark Theme is enabled.

Author's photo and social media icons

Also, if you are using your representative's photo in campaigns, don’t forget to modify it, adding transparent background. And don’t forget to do the same for social media icons. Otherwise...

Be creative with product cards

At the same time, when you add product cards to an email template, you can use both transparent and white backgrounds. Just make sure all images are the same size. But if you want to show photos with a person interacting with your product, for example, to demonstrate clothes or accessories, leave a contrasting background. It’s better to choose gray or some other muted color.

Find a catchy background

You can create a colored background for your message that doesn't change in light and dark modes and looks beautiful in both. Let’s check how to do this in our omnichannel CDP. When creating a new message, click on the Appearance tab located on the left. In the General Settings section, find Email Background Color and pick the one you like.

If needed, add a picture as a background. Go to Appearance > General settings > find the Background image item and activate the switcher next to it.

You can slightly change the background image by applying filters and changing the color intensity. To do this, click on the magic wand icon.

The background added in these ways won't change when Dark Mode is enabled or disabled.

Plain text and Night Mode

If you decide to use plain text in your campaign, which is similar to personal correspondence, then you should understand how email clients will display it in the Dark Mode.

As we said above, Gmail and Yahoo Mail do not completely invert emails to dark mode on desktops. Your subscribers will see the regular design of the message (black text on a white background).

But on mobiles and in the desktop version of Outlook, the message text is shown in a light color on a dark background.

Therefore, you don’t have to worry about the emails being unreadable at night. But before sending, make sure your emails look as intended and test them in both modes on desktop and mobile.

Examples of email in dark mode

You can get some inspiration and see how good Dark Mode email layouts look in our collection of Email Examples.

Also, see similar designs by going to Types of emails > Greetings > Halloween.

You’ll find more examples of Dark Mode email campaigns on the Stripo website. Open the Templates tab. Designs suitable for Night Mode can be selected using the Seasons filter. For example, tick Halloween and Black Friday.

Also, you can find many beautiful email designs on Pinterest. There are entire blogs about email design and separate boards with thematic collections of emails. Among them, there are attractive ideas that will inspire, charge creativity and help you create your own memorable templates for Dark Mode.

The Dark Mode on email adds extra work to designers and marketers. We have to find a design that applies to all email clients and run more tests to see how the message is displayed in different modes. Of course, not all users turn on a black background on their devices, but it's still better to give them a choice. By implementing a dark email template, your company will demonstrate that it cares about its customers.