Why Your Logo Disappears in Dark-Mode Email (One-Line Fix)

The Bug You Cannot See From Your Desk

A client's branded email looked flawless on our screens. Crisp white logo sitting on a dark brand band, exactly as designed. We shipped it. Then a customer replied asking why the email had "a blank box at the top." On our machines, in our light-mode editors, there was nothing wrong to find.

That is the most dangerous class of front-end bug: the one that is invisible in the exact environment you build and test in. The logo had not failed for us. It had failed for everyone reading in a dark-mode inbox — which, on mobile, is most people.

When we finally reproduced it, the cause was not one bug. It was three separate problems that everyone conflates into a vague "the logo broke in dark mode." Pulling them apart is the whole fix, because each one has a different mechanism and a different defence.

Why SVG Logos Never Make It to the Inbox

The first instinct for a crisp logo is SVG. It scales, it stays sharp, the file is tiny. For a website, it is the right call. For email, it is a dead end.

Gmail, Outlook, and Apple Mail all strip or ignore inline SVG. The spec they honour is roughly fifteen years behind the web platform, and SVG simply is not on the supported list. Your beautiful vector mark renders as nothing — a broken image icon, or an empty gap where the logo should be. There is no fallback negotiation; the client just drops it.

So you do the sensible thing and switch to a transparent PNG. A white version of the logo, exported with an alpha channel, placed on top of a dark background colour set in CSS. In your editor it looks identical to the SVG. You think the problem is solved. It is not — you have just traded a visible failure for an invisible one.

The White-on-White Trap in Dark-Mode Email

Here is the mechanism almost no one expects. Dark-mode email clients do not leave your email alone. They actively recolour it. When the inbox is in dark mode, the client takes your light backgrounds and darkens them, and takes your dark text and lightens it, so the message blends into the dark UI.

Crucially, that recolouring acts on your CSS — background colours, text colours, table cells. It does not touch the pixels inside your images. An email client will never repaint the interior of a PNG, because it has no idea what is in there and no safe way to invert it.

Now watch what happens to a white logo on a CSS-coloured dark band. In light mode the band is dark and the white logo pops. In dark mode the client recolours the surrounding background — but your "dark band" was a CSS colour, so it gets lifted toward light. Your white logo pixels stay exactly white. White logo, now-light background: white-on-white. The logo dissolves into the page, and because you only ever look in light mode, you never see it happen.

Bake the Logo Onto Its Band

The reliable fix is to stop relying on the background at all. Instead of a transparent logo floating on a CSS-coloured band, export the logo already sitting on its dark band as a single, flat raster PNG. One image. The brand colour and the logo are now the same pixels.

This works because of the exact rule that broke the transparent version: email clients render raster image pixels faithfully and never invert them. By baking the band into the image, you move the dark background out of CSS — where the client will recolour it — and into the image, where the client will not. Light mode or dark mode, the logo arrives looking the way you designed it, on every client that supports images at all.

It feels less elegant than a transparent PNG and a tidy CSS background. It is also the version that actually survives contact with a real inbox. For brand marks in email, a flattened image beats a clever composition every time.

Android Force Dark Does the Same Thing to Your Website

The same family of bug has a second home: your website, specifically on Android.

Android's "Force Dark" feature will aggressively invert a site to produce a dark theme, even when you have not asked for one — and even when your site is already dark. If your header is a white logo on a dark background, Force Dark can flip your dark background toward light while leaving the logo white. You land in the identical white-on-white failure, except now it is the live site, not an email.

The one-line defence is a CSS declaration on the document:

:root {
  color-scheme: only light;
}

color-scheme: only light tells the browser this document is designed for a light scheme and to leave its colours alone, which stops Android from force-inverting it. It is an explicit opt-out of automatic dark treatment. Worth knowing: iOS does not force-dark arbitrary sites the way Android does, so this guard is specifically an Android concern — but it costs one line and removes a whole class of "my logo vanished on my phone" reports.

Test Where the Bug Actually Lives

The reason this bug ships so often is not incompetence. It is that the default development environment cannot see it. A light-mode editor on a desktop will render every one of these failures as a perfect, on-brand logo.

So change where you test. Send the email to a real inbox and switch that inbox to dark mode — Gmail on a phone is the fastest path, because it is both the strictest renderer and the most common reader. Open the live site on a real Android device with Force Dark enabled in developer options. Five minutes on real surfaces catches what hours of desktop preview never will.

The broader lesson outlives logos: never trust the client or the operating system to preserve a background-plus-foreground composition. Where it matters, flatten the brand mark into a single image, and explicitly opt out of automatic inversion. Design for the environment your customer is actually in, not the one on your desk.

What's Next

Branded email and dark-themed sites are full of these invisible-until-a-customer-complains traps. If you want email and web that render correctly for real people on real devices, that is the standard we build to — see our email marketing service for how we ship branded email, our website development service for the site side, and our take on web design and development best practices for the principles behind it.