Adapting your email to dark mode devices

A study in August 2022 found that 34% of emails were opened and read in dark mode.

This creates an interesting challenge for email marketers, as your email needs to be able to adapt to both light and dark backgrounds.

So, let's look at what dark mode is, why people us it, and how you can make sure your emails look great on any screen.

What's dark mode and why do people use it?

Dark mode is a toggle that lets users switch the background on their device from light to dark.

It's a feature of operating systems like iOS and Android, as well as popular apps and even some websites.

Here are the top three reasons people use it:

1. It's easier on the eyes because there's less light to take in
2. It saves battery by reducing the screen's overall brightness
3. It can make text easier to read

Why you need to design your emails for light and dark mode

If you only design your emails for light mode, email clients will force their default dark theme onto your designs.

This can cause things like:

• Illegible image texts
• Images appearing in a box when they're supposed to be transparent
• Important elements totally disappearing
• CTAs that don't stand out as much as they do in light mode

And what do all those things add up to? Poor engagement.

How to adapt your emails to dark mode and test them in Copilot.cx

In Copilot.cx's email designer, you can toggle between light and dark mode in the top-right corner of the preview screen. This lets you see how each element will appear based on your designs.

Now that you know how to preview your emails, let's look at three ways you can design your emails to look great in both light and dark mode:

1. Use black text on a white background

This is a fool-proof way to make sure your text always looks great, because you always know that it will invert to white on black.

When you use brighter colors like blues, greens, and yellows, you never quite know what the inverted color will be. And the result will probably end up looking very off-brand.

2. Design images with colors that work on light and dark backgrounds

When creating your images, play around with different colors in Copilot.cx to see what happens when you switch the preview to dark mode.

This can help you find a color palette that appears just how you want it to in both light and dark mode.

Another great option is creating images with an opposite color frame. For instance, a black circle with a white frame will show the black circle on a white background and the white circle boundary on a black background.

3. Code your emails for dark mode

Despite following the steps above, some email clients may still catch you out. So if you want full control over how your emails look, follow this guide to code your emails for dark mode.