Created
27 Jun, 2022

A hot topic among email developers and designers, Dark Mode has taken over our inboxes at speed.

It’s solidified its place as part of the email experience and is now considered a ‘must-have’ by many brands to ensure they are meeting their subscribers needs.

Here's all you need to know...

What is Dark Mode?

Dark Mode is essentially a colour palette preference that users can switch to in their devices to read digital content.

This means the colours of the UI elements (buttons, menu items, etc.) and typography will be reversed, from their dark version on a white background to a light version on a dark background.

Dark-Mode-2

Dark Mode (or Dark Theme) was introduced in 2018 by iOS and 2019 by Android. This was soon followed by major apps such as Twitter, Gmail, Microsoft Office, and Slack.

The email world, known to adopt new features at a slower rate than most, caught up in 2020 after most operating systems offered the choice of seeing content in both standard/light and dark versions.

Now, it has become an almost ‘must-follow’ trend, but it certainly goes beyond that, and has a number of benefits when it comes to improving the customer experience.

Know your Dark Mode scenarios

When it comes to applying Dark Mode to emails, there are a number of scenarios to consider:

  • No colour inversion - the most basic level of them all. Nothing changes even if Dark Mode is turned on. Desktop, web, and legacy mobile email clients (Apple Mail, iPhone, iPad) will display the email as it was intended.
  • Partial colour inversion - this level is quite balanced as the email client only inverts the light background and dark text. The rest of the email is left intact.
  • Full colour inversion - this is the most challenging level, as the email clients that do this (currently, Outlook.com, Outlook 2019 iOS and Windows, Outlook apps in iOS/Android and Gmail in iOS/Android) will invert the whole colour palette of the email, to the point that they will transform an intentionally dark-themed design into a light one - which, ironically, is the opposite of what we’re trying to do. This means we would have to implement design safeguards by code adjustments and the email would have to be thoroughly tested before broadcast.
  • Custom dark mode - the email client with the most extensive Dark Mode support is Apple Mail and the latest versions of Apple Mail on MacOS and iOS. This means we actively use code to present a customised dark mode version of the email while retaining the original version for all the other standard email clients.

Why Dark Mode?

So, when it comes to choosing Light or Dark Mode, it’s not just a matter of personal preference, but also of usability and accessibility.

The Nielsen Norman Group, leaders in research-based UX, have found that low vision users (specifically with cataract and related diagnoses) perform better with darker interfaces. They also state that reading for long periods in standard (light) mode may contribute to myopia. In low-light environments or at night-time, Dark Mode minimises eye strain.

Dark Mode can also improve content legibility and make it easier for some users to perceive and engage with content on both desktop and mobile.

Another, very pragmatic reason is that Dark Mode actually helps to save battery usage. Since there are less pixels that need to be activated, the power needed is reduced.

How to design and code Dark Mode emails

Try to use images with transparent backgrounds (PNG files), particularly for icons and logos.

If you don’t have that option and the images you have are flat files with a solid colour background, at least try to crop them evenly, leaving some breathing space around them so it looks intentional and the spacing retains its uniformity with the rest of the email.

If you have Dark Mode alternatives, for instance a white version of the logo, use those. They can be coded in to show up only for Dark Mode in the email clients that support Dark Mode queries.

When it comes to coding, there are a few things that can be done:

1. Include this metadata in the <head> tag, so Dark Mode is enabled in the email for users that have Dark Mode switched on.

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

2. Add this Dark Mode media query to customise your email styles in iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS) and Outlook App (iOS).

@media (prefers-color-scheme: dark ) {your email styles go here}

3. Duplicate Dark Mode styles with [data-osgc] prefix for support in Outlook app for Android. Here’s an example:

/* Custom Dark Mode Background Color */ [data-ogsc] .darkmode { background-color: #272623 !important; }

4. Apply your Dark Mode-only styles to the body of your email. Make sure you are using all the correct classes.

5. Test, test, test.

How we can help

Do you know whether your customers prefer reading your emails with darker interfaces, in Dark Mode?

Are you able to elicit this information from your analytics?

Are you providing your customer with the best possible, tailored email viewing experience?

If your answer to those questions is no, then we can help.

Email clients render content in very different ways and sometimes with unexpected results. This also applies to how they support Dark Mode. And email coding is a very complex field, much less flexible than coding a regular website.

Our team of experts have years of experience designing beautiful emails that convert, as well as ensuring that you can track the data you need in your analytics to make the right decisions to improve your marketing.

Get in touch with us to learn more about how we can improve your email viewability, deliverability, and analytics. We’re here to help.

Do Email. Better.