Creating Email Templates for Dark Mode: Marketing Cloud & MCAE

‘Dark mode’ is becoming more and more prevalent in the technology space. In 2019, Apple added Dark Mode to its iOS 13 update. Meanwhile, market leaders such as Gmail and Outlook also added dark mode features to their email clients. How relevant is this to your email campaigns? Very! So why you might go to the effort of making an email template for dark mode?

There are a few reasons and we’ll cover them in this blog. We'll also provide dark mode inspiration in the form of a case study from one of our clients. If you’re keen to skip ahead, use the links below.

• What is dark mode for email?
• Why do users like dark mode?
• How should email templates be optimised?
• Is dark mode the same across email clients?
• Pardot and Marketing Cloud dark mode email templates

Firstly, allow us to cover the basics, what even is dark mode?

What is dark mode for email?

Dark mode inverts the typical screen colour scheme. The background becomes dark and the text becomes light. If your email design uses a light background with dark text, it is simply reversed to the opposite.

Dark mode is a display setting that users can choose to switch on or off, as it suits them. We see dark mode as an option for Apple and Android devices, social networking apps, and email clients.

Why do users like dark mode?

There are many touted benefits to dark mode including:

• Light text on a dark background has higher contrast and reduces eye strain.

• It’s more comfortable for reading in low light settings.

• It reduces blue light exposure which is proven to have health impacts.

• There is evidence that dark mode saves device energy, increasing battery life.

We'll be upfront here and share that there are also arguments against some of the benefits above. Ultimately though, according to a recent study, 81.9% of smartphone users use dark mode in 2022 and this number is sure to increase as dark mode becomes even more popular in years to come! So, whether the claims of positive health impacts and readability are fully accurate or not, the rate of adoption tells us marketers need to cater to dark mode regardless.

We’re already seeing this evidenced in a rising expectation for websites to provide dark mode options too. This is why we’re rolling out this display setting for our own site - check it out here.

How should email templates be optimised?

There’s no disputing the fact that dark mode can severely impact email design.

What looks great in light mode can change almost entirely in dark mode. Not because the layout or structure of the email HTML is altered. It is because a dark background against images with a white background looks odd.

This means that marketers must be designing email templates for dark mode. It’s now a best practice of great email marketing, whether you’re using Pardot (MCAE) or Marketing Cloud templates.

It is not a case of creating duplicate email templates. Nor is it completely reworking your existing email design. Dark mode-friendly means improving your current templates so they render in the best possible way for recipients.

Here’s how to ensure your emails display well in dark mode:

Use png images with transparent backgrounds

Images with white backgrounds will be highly visible and look clunky in dark mode:

The optimal format is PNG images with transparent backgrounds. Your images will look slick and modern in either display setting. Be sure to consider all images in your template including logos and social icons.

Optimise image styling

You can go one step further and add styling that will only be visible with dark mode enabled. Light translucent elements will show up well in dark mode. Adding a light translucent border to your image and text will make them stand out!

Add dark mode styling to your HTML

Dark mode settings are automatically applied to your email design. Whether you have prepared or not, your email will be seen in dark mode. But, there is a difference between an email forced into dark mode and an email that facilitates dark mode.

You can facilitate dark mode in the following ways:

• Include ‘color-scheme’ meta data in your tag

<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>

• Customise dark mode styling for @media ‘prefers-color-scheme: dark’. Here you can add CSS to show or hide content and change font colours. You should also include dark mode-only styles within the HTML itself.

Is dark mode the same across email clients?

That would be too easy.

As always, there are different quirks between the various email clients. Some fully invert colours whilst others partially invert. Some invert media files whereas others don’t.

This means that creating a basic dark mode email template requires substantial testing across all email clients. Luckily, comprehensive Litmus email testing is available for Pardot (MCAE) on Plus & Enterprise plans. Testing is also available on Marketing Cloud accounts Enterprise plans.

Pro tip: Prioritise the email clients the majority of your prospects use are rendering perfectly. But don’t completely overlook those that are less often used.

Pardot & Marketing Cloud dark mode email templates

For some inspiration, here’s one of the custom templates we created for our client, Connor Group, in their Pardot account.

Need a hand with email templates for dark mode?

We get it. Editing your templates for dark mode is another to-do in your long list of tasks - and it’s fairly technical too. It’s why marketers often come to us for bespoke Pardot and Marketing Cloud email templates. Our specialist team of developers has been building them for years and is well versed in dark mode optimisation.

You can browse our library of readymade Pardot email templates online or get in touch to arrange a custom template. We can work with a design you provide or take care of this for you too!