2022-09-28T10:53:15+01:00
Development Marketing Cloud
2022-09-28T10:53:15+01:00

Creating Email Templates for Dark Mode: Marketing Cloud & MCAE

September 28, 2022

Creating Email Templates for Dark Mode: Marketing Cloud & MCAE

MarCloud Apple iPad retina favicon

Development • Email Templates

‘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.

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.

Two MarCloud logos side by side showing poor render on dark background

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.
  • 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.

MarCloud website in light and dark mode side by side

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.

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:

Two MarCloud logos side by side showing poor render on dark background

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.

MarCloud logo in light and dark mode

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!

Marcloud logo in dark mode with translucent styling

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.

Connor Group dark mode email template

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!

Need a hand getting the most out of your Pardot or Marketing Cloud account?

MarCloud is a team of certified Pardot, Marketing Cloud, and Salesforce specialists. We help businesses to unlock the potential of marketing automation.

Ready to save time, deliver more quality leads, and generate more revenue? Here's how we help.

VIEW SERVICES

Tom Ryan

Tom is a Salesforce Certified Pardot Consultant & Marketing Cloud Consultant and has a passion for how systems work. He's written blogs and other content for Pardot.com, regularly hosts webinars with Pardot and loves being involved with the wider Pardot community. He also uses (brackets) and ,commas, where (brackets) and ,commas, should not be used. A lot.

More by Tom Ryan →