Why your logo disappears in dark mode
A dark logo on a transparent background is invisible to a growing share of readers. Three ways to fix it.
Open your latest email on a phone with dark mode switched on. If your logo is a dark PNG on a transparent background, there is a fair chance you are looking at an empty header.
Email clients handle dark mode in different ways. Some leave your design alone if it declares dark-mode support. Some invert only light backgrounds. Some invert everything. A transparent image is not inverted, so a black logo ends up on a newly black background.
Three fixes, in order of effort
- Give the logo a subtle light outline or glow, so it holds on any background. Quick, but a compromise.
- Supply a light version of the logo and swap it in with a prefers-color-scheme media query, plus the Outlook app selectors. Clean in the clients that support it.
- Set the brand name as live text, styled with web-safe fonts and a dark-mode colour class. It survives image blocking, dark mode and screen readers.
The demo system on this site uses the third approach for every brand. It is not right for every logo, but it is right more often than people expect.
Test it, do not assume it
Declare color-scheme in the head, add dark styles for Apple Mail and the Outlook apps, and then look at the result in each client. Dark mode is where most brand consistency quietly breaks.
Get notes like this every two weeks
The Inbox Brief: what changed in email and what to do about it.