HTML Email: Handling Logo Images Between Dark Mode and Light Mode

Dark mode is now unavoidable and enabled by default on many OS's and inbox providers, making up a sizable percentage of email opens.

As the only email marketing platform supporting different Dark Mode and Light Mode color schemes in our HTML email builder, we get a ton of questions about logos and images. Here's everything we know.

First, the bad news. Due to the limitations of leading inbox providers (primarily certain Gmail, Outlook, and Apple Mail clients), there is no reliable way to change or "switch" images between light and dark mode in HTML emails.

Why can't I swap images between dark & light mode? Aren't emails coded like websites?

On the Web, this has been a solved problem for nearly a decade. Unfortunately, email HTML is a bit of a bizarro world. Here's the main reasons why the most popular inbox providers don't support this:

• Email client fragmentation: Email is uniquely packed with fun legacy edge cases. Customers expect email to function everywhere from decades old versions of enterprise desktop software to modern web and mobile app environments. And everything in between.
• Inbox provider dominance: Since Google and Microsoft have near-monopolies in both B2C and B2B email respectively, they have very little incentive to keep Gmail and Outlook on the cutting edge of HTML. Fun fact: many Microsoft Outlook clients still render emails using the HTML engine of 2007 Microsoft Word. We're not kidding.
• Security concerns: Lastly, email has unique security concerns. One argument is, if inbox providers allow hiding/showing images under different contexts, it could allow easier evasion of automated spam/phishing detection — creating headaches for users and IT departments.

Best practices for dark mode responsive logo images in HTML emails

Since you can't swap or hide/show different images through HTML or CSS, there's a few tricks Email Marketers and newsletter creators use to get around this. They all involve optimizing your logo image before adding them to your emails.

Here's the three methods we recommend:

Option 1: Use a transparent .PNG logo in a versatile color

If you export your logo as a transparent .png (no background), and make sure the logo is in a color that works on both light and dark backgrounds, you're good. This is probably the most common solution used by big brands.

Option 2: Bake a solid background color into your logo image

If treat your logo like an app icon and bake a background color or container into the image file itself, you no longer have to worry about it being lost or looking invisible on dark backgrounds.

Option 3: Include a white outline around your transparent logo

If you include an outline around your logo image that matches the color of your light mode background, every will display normally on light mode. Then on light mode, your logo will still be visible due to presence of a white outline or gradient glow.

But wait, I've heard [html hack] works on [insert email client]. Isn't that better than nothing?

Trust us. We've been down this road. There is not a single method that covers a majority of inboxes in a rational way without screwing up the visual presentation of your email and bloating your email code for the other clients. Inbox placement algorithms get suspicious of novel email code.

That said, if you enjoy pain, here's a Github repo listing all the various tricks and which email clients the methods do/don't work on. The randomness is...shall we say...fun.