Blog

Dive into the world of Marketing Automation:

Practical & helpful knowledge that makes your daily life with Marketing Automation easier!

Tuesday, 02 February 2021

Dark Mode for emails and how to deal with it as a marketing expert

Jordy Sterk

Developers have been using dark mode for their screens for years and Google rolled this out for the browser in early 2019. Google was not the first to do so. In 2016 Twitter already had a version and there were also dark modes for Android phones, Microsoft Outlook, YouTube, Gmail, Reddit, Safari and Apple's Mojave system. In fact, Spotify has always applied this mode as a standard appearance. And now this development is rapidly coming to email. In this blog more about what dark mode actually is and what you as an email marketer could do with it.

Dark Mode for Google Chrome has been around since 2019, but more and more emails are also being displayed in Dark Mode. There are three different display modes for this

What is dark mode?

Dark mode creates a higher contrast by giving emails a dark background and making the foreground light.

What advantages do your readers have?

Reading the email becomes more comfortable for many people and is less tiring on the eyes. Especially in a dark environment.

Various sources claim that this mode is better for the eyes. However, this is only true if the environment is dark.

Our eyes are used to looking at objects on a bright background with sunlight or a lamp. The muscles of our eyes are trained for this contrast, so they don't have to strain much during the day to read a dark text on a white background.

However, if your readers check emails before going to bed, the dark mode is much more comfortable. The eyes get used to the dark space and can do their job better when the screen is dark too.
OLED and AMOLED screens consume less energy in this mode. Which is good for the battery! If your readers have an LCD screen, the reduction in energy consumption is relatively good.

How does it work?

It makes dark components of the email lighter and light components darker. This often results in a dark background with light texts. Dark mode looks at the CSS of the email or the HTML attributes and adjusts it accordingly. This means that images are not adjusted to dark mode. It can therefore happen that an image suddenly has a border when your email is put in darhk mode.

Which clients support this mode?

Dark mode has three different types and which type is supported differs per client:

1. Dark UI (User Interface) - only the colour of the inbox changes:

Some clients, such as Apple Mail, allow the user to use the app even in dark mode. As a result, the inbox turns black with white letters. However, this setting has no impact on the emails themselves. These keep their original colour.

With Dark UI, only the colour of the inbox changes. The email itself remains unchanged.

2. Colours partially adjusted:

Client only checks if there is a dark background and / or light text. If so, this will be adjusted. If you already have a dark background in the email, it will not be replaced for a light background.

3. Auto-invert - full colour adjustment:

All colours are automatically inverted, which means that emails with a dark background and light text get a light background and dark text. The design is therefore completely inverted.

Overview of which email clients support which type of dark mode:

The various email clients each support one of the three different types of dark mode.

From standard HTML email to colour schemes in CSS

As indicated in the overview above, you now know how most regular email clients handle your emails when they use dark mode.

However, as an email marketer you may also have developed your own color themes. In that case, you also want the color themes to be maintained, or at least displayed nicely in dark mode. To do this, you need to dive into the CSS. You can write different preferences in the CSS via 'pre-color scheme'.

There are two ways to do this:

@media (pref-color-scheme: dark) works for Outlook and Apple.
data-ogsc] and/or [data-ogsb] can be set for Outlook on android systems. An example of this method is shown in this image:

There are two possibilities for the CSS commands. @media oder mit [data-ogsc]. Here is an example of the data-ogsc command.

It is important that you know which email clients are the most popular with your email recipients. The CSS can also be combined so the email is easy to read with multiple email clients.

Depending on the email client, different CSS commands must be used so that the email is nicely readable in dark mode.

What does this development mean for you as an email marketer?

Dark mode is a rapidly emerging development. More and more email clients will implement dark mode into their software. So you need to ask yourself as an email marketer: Is my email still readable in dark mode?

We have put together some tips:

Use images with a transparent background, so that they change perfectly in dark mode.
If you have transparent black images, make sure to add a white border or glow. Otherwise the image will not be visible in dark mode.

For images in emails that could be displayed in dark mode, it is essential to add a white border. Otherwise, the image may not be visible in dark mode.

To make sure the text is always easy to read, it is better not to use white texts anymore. You can then go for a colour that is neither dark nor light, such as blue. Here's a tool, contrast ratio, with which you can see the contrast effect of the colour when switching to dark mode.
With fixed images, such as your logo, you can create two versions. And hide and show one with css.

Conclusion

Dark mode has been rapidly growing into email clients, and you should definitely consider testing this. Users use it for a reason, let's go with the flow and implement this in your emails too!

Our experts know how to deal with the complexity of dark mode. If you have questions, we're happy to answer them and help you get the most out of your marketing.

Tags: