Does Dark Mode mess with the background imagery in your email designs? Here’s how to fix it. 

Do you love using background images in your emails? Us too. Background images provide countless opportunities to be creative, they give your designs depth, and just make your email designs a little bit special. But if you‘re using background imagery regularly, you might have noticed that Dark Mode — especially in Gmail — will adjust your colors in a way that can make copy on background images unreadable. Urgh!

So, does the growing popularity of Dark Mode mean you can no longer work with background images? Fear no more, fellow fans of background imagery. Together with ActionRocket‘s email code wizard Jay Oram we share a simple trick to make your background images work in Dark Mode.

Why Dark Mode causes trouble for background imagery email designs

To understand why background images can be an issue in Dark Mode, let’s look at how we traditionally approach combining copy and background imagery.

When you design for background images, one of the crucial things you‘ll want to be aware of is that there‘s enough contrast between your background image and the copy you put on top of it. So you might use bright copy on a dark background image (or vice versa) to ensure that your copy is easy to read when placed on top of your image.

Check out this example of one of Taxi’s emails. We’ve put a dark wash over our background image to make sure that the white copy on top of it is readable:

Screenshot-2020-10-14-at-09.32.00.png#asset:2174

This is looking good so far. But now, let’s look at what happens when Dark Mode comes into play.

Dark Mode: A reversed color scheme for your email designs

Quite a few email clients now offer their users to switch to Dark Mode — that’s a reversed color scheme that’s optimized for low-light environments and that many users find to be more gentle to the eye.

If we look at how that email from above renders in the Gmail app on iOS, in bright and Dark Mode, here’s what we see:

background-images-dark-mode-broken.png#asset:2168

Have you seen a similar issue with your emails? Wanted to tear your hair out? Yeah, we know that feeling.

Gmail‘s Dark Mode automatically turns the bright copy on top of our image into a dark color but since the image below stays the same, the color contrast becomes so low that the copy is impossible to read. This isn’t a great experience for our subscribers.

But here‘s the good news. Email designer extraordinaire Jay has a trick up his sleeve to help us out of this Dark Mode misery. Over to you Jay!

_____

Jay Oram is an Email Coder & Interactive email specialist at ActionRocket. Throughout Darktober ActionRocket aim to get brands Dark Mode ready. Helping to review how Dark Mode affects them from a quick review, to in depth audits and updating their email design systems. Drop them an email at hello@actionrocket.co, reach out to them on Twitter — or say hi on the #emailgeeks Slack.

______

How to fix background images in Dark Mode

First of all, some bad news: If you think there’s a way you can simply target Dark Mode using media queries or similar, prepare to be disappointed. Currently we can only target Dark Mode for some email clients, and the two causing the most issues for background images — Windows 10 Mail and Gmail — are not on that list.

So the savvy email geek has to find alternative solutions.

There are a few design tweaks that could help: Changing your background image to one that will work with both light and dark text colors can be an option but unfortunately this is quite difficult and may not fit with your current design. You could also try changing your text color to something more neutral, like #777777 or similar, that will work on multiple background colors and still give a good contrast.

But if that’s not an option for you, read on.

Semi-transparent layers to make background images work in Dark Mode

If you need to keep your background image the same, the secret to making things work in Dark Mode lies in adding a semi-transparent colored layer between your background image and your copy like this:

Screenshot-2020-10-14-at-09.31.47.png#asset:2175

When looking at this email on the Gmail App, here’s what we’ll see:

background-images-dark-mode-fixed.png#asset:2167

Gmail’s Dark Mode will change the color of your font (just like it did in our original example) but it will also change the color of the new layer that we just added. So while our font changes from bright to a dark, our layer changes from a dark grey to a brighter one — and the copy remains easy to read.

It’s important that you make sure you test your color choices to make sure they look good in both bright and Dark Mode. But in general, our experiments found that as long as you ensure that there’s enough contrast between your original font and background layer, your copy will be easy to read in Dark Mode.

How to code a background color

Coding a background color behind your text can be done in a number of ways, using the HTML attribute bgcolor="#f4f4f4" or adding it to your inline style or CSS as background-color: #f4f4f4;

When adding a background color, it is also a good idea to check the padding around your text, as it may need a bit more space around the edge to display your new color.

You can use solid colors for your new layer or, if you’d like to see your background image shine through like you saw in the example above, add a bit of opacity to the background color. You can easily do that using the rgba() color type. While rgb covers the parameters red, green, and blue, rgba adds another channel — alpha — to the mix. This value lets you specify the opacity of the color from 0.0 (fully transparent) to 1.0 (fully opaque).

When you translate this into your code, you’ll want to set a solid background color first, and then define your rgba color. That’s because some email clients (looking at you, Outlook for Windows 👀) don’t support opacity. If rgba is supported, your slightly opaque color will display — and if it’s not, it will fall back to the hex color provided.

style="background-color: #0000ff; background-color:rgba(0,0,255,0.3);" 

Are you looking for the copy-and-paste ready sample code? Here’s the codepen.

See the Pen Background image - Dark Mode by Jay (@emailjay) on CodePen.

Optimizing for Windows 10 Mail

As always, Windows throws a spanner in the works. Currently in Windows 10 Mail, the background color is changed in line with the rest of the Dark Mode changes. However, text on top of a background color (on top of a background image) does not change. The only way to make sure your text keeps a high enough contrast is to pick a text color that is neutral enough to work on dark and light background colors.

Make your background images Dark-Mode-proof with Taxi

If you’re using Taxi to create your campaigns, you can set up a background image module in your Email Design System, making it easy for your team to add background imagery to their campaigns. Take a look at the blog on ‘Animated backgrounds’ or this blog showing how to implement Taxi Syntax into a background image module to get started.

Making your background image Dark-Mode-proof by adding a colored layer is just as easy. You can add your background color to either the <table> containing the content or the <td> your text is in, and use Taxi Syntax to make the colors editable in the email editor. Set your color format to rgba and an additional slider will be added to the color picker for transparency:

<field name="my_field" type="color" format="rgba"/>  

Then wherever you define your background color in your HTML, you’ll need to use the field mentioned above. For example: 

<table replace-style="background-color:{{my_field}};"></table>

 Read more on how to apply field content here.

When your team creates their next email, they can easily adjust the background color and opacity of the color layer to match the background image of their choice — no coding required.


Do you want even more tips on optimizing your emails for Dark Mode?

Our friends over at ActionRocket and Email on Acid have turned down the lights and gone dark for October, in a campaign they’re calling “Darktober”. Check out their blog or follow them on Twitter.


See how Taxi can help your team

Taxi helps marketing teams make better quality email, quicker, at a larger scale.

Let's set up a conversation→


44,916 email campaigns and counting.

Join the smart marketers using Taxi to make better email.