Dark mode in HTML email

How to make HTML emails dark mode friendly

I already put the data to the use, and a few Outlook related challenges later, I made our emails dark mode friendly. Here's how you can do the same:

1) Adjusting colors

Look out for Apple Mail as inverts colors only if the background color is transparent or unspecified – white background won't do. The easiest way to make sure your emails won't blind anybody is to check whether a background color is specified. For more control over the design, this is where prefers-color-scheme comes in handy.

Syntax (@media prefers-color-scheme):

<style>
	/* Your light mode (default) styles: */
	body {
		background: white;
		color: #393939;
	}

	@media (prefers-color-scheme: dark) {
		/* Your dark mode styles: */

		body {
			background: black;
			color: #ccc;
		}
	}
</style>

A design tip: Avoid pure white (#fff) as the text color. I found that contrast ratio around 11.5 for the main text is a nice compromise between not too bright a not too dim. Check the contrast ratio here: https://contrast-ratio.com or use Chrome dev tools.

2) Switching between light and dark logo

A dark text on a dark background is pretty much invisible, and that's precisely what happens to a logo if viewed in an email client with enabled dark mode.

Nowadays, a typical logo usually has a transparent background, colorful icon, and dark copy. See the problem? Because email clients don't invert image colors, you need to handle it yourself.

To tackle this, you can either:

1. the easiest way to fix this is to save the logo with a white background instead of a transparent background, but I wouldn't recommend this approach – dark mode users won't be happy
2. put a light logo on dark background, rest of the email is on white background (see how Litmus does it)
3. make dark mode email your default, a good candidate for this would be Spotify as they only offer dark theme in their apps
4. include both light and dark versions of your logo and switch between with prefers-color-scheme media query

My favorite is the last approach, here's how you do it:

Simple `display: none` on the dark logo works just fine in all modern email clients, but to everyone's surprise, not in Outlook and Windows 10 Mail.

In CSS styles:

<style>
	@media (prefers-color-scheme: dark) {
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

…and the HTML structure:

<image src="dark-logo.png" class="darkLogo" />

<!--
	To hide the light logo perfectly in Outlook and Windows 10 Mail, 
	you need to wrap the light logo image tag with a div.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

This approach works pretty well, but it still won't work correctly across the board. The dark text on dark background issue will happen with email clients that do support dark mode but doesn't support prefers-color-scheme. That is Outlook, Windows 10 Mail, Zoho, and potentially Gmail.

So, to make the logo in email fully bulletproof, I'll combine the method 1) and 4) from above. Method 1) will cover all email clients that support dark mode, but not the prefers-color-scheme. And method 4) will cover Apple Mail, Outlook on macOS, Outlook.com, which do support both.

Also, instead of saving the logo on a white background, I'll add 3-pixel wide background-matching border and save it on a transparent background as usual.

It's starting look pretty complex (just for a logo), so let's see the HTML markup first:

<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- Light theme (so dark logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
	<image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>

<!-- Dark theme (so light logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

…and CSS styles:

<style>
	@media (prefers-color-scheme: light) {
		.darkLogoDefault,
		.lightLogo {
			display: none !important;
		}

		.darkLogoWrapper,
		.darkLogo {
			display: block !important;
		}
	}

	@media (prefers-color-scheme: dark) {
		.darkLogoDefault,
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

Dark mode in Gmail is coming

UPDATE: Gmail now supports dark mode on Android 10, therefore I updated the info in the table above, including up-to-date email screenshot. Unfortunately, it doesn't support the @media prefers-color-scheme.

The dark mode is coming to Android in the new Android 10, and Gmail should go completely dark too, finally. All you need is Android 10 and newest Gmail (at least version 2019.09.01.268168002). However, Google tends to enable new features (a dark theme in this case) for users gradually with a server-side push, and I haven't got the luck for now.

I'm curious to see if support for @media prefers-color-scheme is coming to Gmail. From what I read, it doesn't seem promising. I guess we have to wait to find out. I'll update the article once I get the dark theme in Gmail enabled.

Wrapping up

Dark mode is coming to HTML email, and I love it! But, it's another thing to worry about, like using HTML tables for layout wasn't enough.

Stay up-to-date about the dark mode in email by joining our mailing list. We also share there insights and challenges we face while building and growing our SaaS product – Sidemail.

Thanks for reading!