How to tweak your emails for dark mode

Jun 22, 2022 | Email Marketing, Email production

Dark mode has been a thing since 2019 and it is increasing in popularity so it is worth knowing what you can do to ensure your emails look great in dark mode. Here are some practical ways to do this.

Thys Feldtmann

What is Dark mode?

Dark mode is a display setting for user interfaces such as phones and laptops. Instead of the default dark text showing up against a light screen (known as ‘light mode’), a light colour text (white or grey) is presented against a dark or black screen. It is also known as black mode, dark theme, and night mode.

Most operating systems and apps are designed to allow for dark mode. Find out how to view your apps and browsers in dark mode.

Here is an example of an email viewed in the default light mode. Looks great.

Email looks great in light mode

Now see what happens when the same email is viewed in dark mode:

The dark logo disappears or blends too much into the dark background. The light background edges of images with rounded corners will show unintentionally.

Dark logo disappears or blends too much into the dark background

Why dark mode?

Many people prefer the dark mode setting as it is easier on the eyes meaning it reduces eye strain especially at night or in low-light conditions.

What is the impact on design and coding for emails?

When designing and coding your emails you must consider that probably half of your audience will view your email in dark mode. The more people are made aware of this choice the more people tend to choose the dark mode.

How do I create emails for dark mode?

Colonel John “Hannibal” Smith the leader of The A-Team famously said: “There are two ways we can do this: the easy way and the hard way.”

The smart (easy) way

  • Optimise your logos and images for dark mode.
  • Check that the colour scheme for your backgrounds and text aren’t altered too much in dark mode and still reflect your corporate identity.
A-Team

The hard way

  • Add code to ensure that dark mode is enabled in your email for all the recipients that have dark mode switched on.
  • Add media queries to your style section in the head to target specific dark mode styles
  • Swop between light mode logo and dark mode logo depending on which one is enabled
  • Apply a CSS filter to change the brightness and contrast of your images

These fixes don’t work across all email clients in the same way and therefore your dark mode emails render differently across apps and email providers.

Tweak your emails for dark mode

Sure seems like a lot of time and effort to do things the hard way…

Therefore, we prefer the smart way!

1. Optimise your images for dark mode

Create a version of your logo that works in light and dark mode:

Orange logo works for both light and dark mode
Orange logo works for both light and dark mode

If your logo disappears on a dark background, then add a light background behind your logo that blends in on light mode but shows on dark mode:

Add a light background behind a dark logo

Use transparent PNG image format:

Jpg image in dark mode
Transparent png image in dark mode

Use white or light-colored background for images and icons that contain dark elements.

Light-colored background for images and icons

Add a white or lighter coloured outline around dark text in image to helps the elements stand out.

Of course our favourite newsletter The Hustle nailed it
Add a white or lighter coloured outline around dark text

2. Check that the colour scheme for your backgrounds and text work in dark mode and still reflect your corporate identity

Light mode

Test your email in light mode

Dark mode

Test your email in dark mode

Looks pretty solid to me! The highlight colour stays the same and the main text colour looks the same on light mode and dark mode.

Summary

Some might prefer the smart way, and some might prefer the hard way. In the end it is up to you to decide what will work for your brand.

It comes down to making decisions around what is acceptable and what isn’t.

Then test, test and test again across as many devices and email clients that have dark mode enabled.

0 Comments

Submit a Comment

Your email address will not be published.

Recommended reading

The Cantaloupe Story

Read about us and meet our team

Join our team. Work from anywhere

Help us make email marketing better

Helping marketing teams and agencies since 2006

Overview of email marketing. Learn more

Email templates

Tried and tested templates
PSD to HTML
Custom designs

Managed service

Data work
Production
Campaign Management

Automation

Automate marketing processes & tasks
Lead nurturing