|Secrets

Why Your Email Looks Broken in Dark Mode

September 2026 4 min read
Apple MailGmailOutlook.com

Dark mode isn't one feature a template either supports or doesn't. It's three or four different client behaviors that agree on exactly one thing: none of them render a template the way it looked in the last test send, unless that test send was already in dark mode too.

Two completely different approaches

Apple Mail (iOS and macOS) respects what's actually written, if it's told there's an opinion. Add a <meta name="color-scheme" content="light dark"> tag plus real prefers-color-scheme CSS with real dark values, and Apple Mail uses exactly those colors. Leave it unspecified, and Apple Mail falls back to its own guesswork instead.

Gmail and Outlook.com don't ask first. Both apply a forced dark-mode algorithm to any message that doesn't explicitly declare support, inverting near-white backgrounds toward near-black and near-black text toward near-white by heuristic, regardless of whether that inversion was ever intended for that specific element.

The transparent-logo trap

A logo saved as a dark wordmark on a transparent PNG looks perfect sitting on a white template background, which is exactly what most brand kits export by default. Force-invert the surrounding background to near-black and the transparent pixels don't change; the logo's own dark pixels are now dark text on a dark background. It disappears completely, and most senders never notice because their own test inbox didn't happen to force-invert it.

What actually protects a template

  • A real color-scheme meta tag plus prefers-color-scheme: dark CSS with colors actually chosen on purpose, not whatever a client guesses instead.
  • Logos and icons with either a solid background plate behind them or a light/outlined variant that stays visible if the surrounding area gets force-inverted.
  • Avoid pure #ffffff/#000000 as the only two colors in a template; heuristic inversion specifically looks for near-white and near-black to flip, and a background just one or two shades off pure white sometimes escapes the auto-invert entirely.
  • Test the same template in Apple Mail with dark mode on, the Gmail app with dark theme on, and Outlook.com with dark mode on, as three separate checks. It's common for one to render cleanly and the other two to fail in completely different ways.

This is exactly the kind of failure a single rendering-preview screenshot never catches, because dark mode isn't a checkbox a preview tool flips once and calls done. It's one more axis of the same six-client problem, tested per client, not assumed from one.


Related

Run these checks against your own template, free, no signup.

Open the analyzer