And: What Substack Taught Me About Dark Mode in Email
When I was digging through some customer emails recently, I stumbled into a fascinating detail: why do some emails in Gmail’s dark mode show up with a flat, clean background, while others pick up that heavy grey tint?
On the latest Gmail app (iOS 26), emails often show a dull grey background behind the content. Older versions like iOS 18 display it differently, but the result is the same. Yet some emails, like those from Substack, seem to dodge this issue entirely. That sent me digging into why Gmail behaves this way, and how to fix it.
Let’s go down the rabbit hole!
The Gmail Grey Background Mystery
If you’ve ever opened a marketing email in Gmail’s iOS app, you may have noticed a mid-grey background layered behind the content. Substack emails, though, often appear cleaner: no grey fill muddying the design.
The difference?
They set the <body> background to transparent instead of a solid color.
- Transparent body → Gmail dark mode respects the app chrome and doesn’t add its own grey layer.
- Solid body color (e.g., white) → Gmail forces a grey background on dark mode for “readability.”
On newer Gmail app versions (iOS 26+), this behavior is even more obvious—the UI chrome gets darker than the email background, which highlights the transparency effect. Older Gmail clients (e.g., iOS 18 builds) don’t show the discrepancy as much.
👉 Takeaway: If you want your email background to feel “native” and seamless in Gmail dark mode, set the body to background-color: transparent;.
The Icon Problem in Dark Mode
The next discovery was around icons. Some emails ship icon buttons as PNGs with solid white fills, which stand out awkwardly in dark mode. Substack (and others) sidestep this by using transparent assets.
But here’s the catch:
- SVGs would be ideal (crisp, scalable, lightweight), but they’re not reliably supported in email, especially Gmail.
- Transparent PNGs are the safe bet. They won’t auto-invert in dark mode (unlike text colors), so you need to pick icon colors that work equally well against both light and dark backgrounds. A neutral mid-grey usually does the trick.
👉 Takeaway: Export icons with transparent backgrounds. Avoid SVGs for email, support is too patchy.
Testing Gotchas
Dark mode rendering varies wildly:
- Forwarded emails can show different background behavior than originals.
- Email client versions matter a lot. Litmus and Email on Acid test suites aren’t always running the latest Gmail builds.
- Assets need testing across multiple real devices; even small tweaks (like PNG transparency) can change how Gmail inverts or layers colors.
Quick Guidelines for Dark Mode Emails (2025)
- Set body background to transparent if you want to avoid Gmail’s forced grey.
- Avoid SVGs in emails, support is poor across Gmail and Outlook.
- Use transparent PNGs for icons; pick a mid-grey that balances on light and dark.
- Always test in real clients, not just simulators, they lag behind.
- Beware of forwarded states, they can alter backgrounds and color rendering.
Why This Matters
Dark mode isn’t just a design preference anymore, it’s the default for many readers. Small implementation details (like whether your icon background is transparent) can be the difference between an email that feels polished and one that looks broken.
And the cool thing? A simple CSS property like background-color: transparent; can instantly elevate your email design in Gmail dark mode.
For more information about dark mode in email check out our related posts:
