Dark mode is where a lot of email users live — especially younger B2C audiences and the iOS-heavy B2B Apple crowd. It's also where template bugs hide: inverted logos that become invisible on dark backgrounds, CTA buttons that lose their outline, fine text that goes sub-readable on the darker surface.
What the dark-mode pass reveals
- Logos that don't have a dark-friendly variant (solid black PNG on dark = invisible).
- CTA buttons relying on light-background contrast that collapses in dark.
- Text colour contrast dropping below WCAG AA in dark theme.
- Inline images with transparent edges that now show unwanted background.
- Divider lines that disappear against dark background.
- Forced-dark-mode providers inverting colors your CSS tried to lock.
Provider behaviour differs
- Apple Mail supports
prefers-color-schemebut may override with its own dark adjustments. - Outlook.com sometimes forces dark independent of your styles.
- Gmail mobile ignores
prefers-color-scheme; uses its own algorithm. - Yahoo applies a post-processing dark filter that can invert content unpredictably.
Common fixes once you see the bug
- Dual-mode logos via
@media (prefers-color-scheme: dark)orpicturewith both variants. - Add subtle border/outline to CTA buttons so they survive forced-dark inversion.
mso-hideandclass="dark-mode-swap"patterns for provider-specific overrides.- Don't rely on white backgrounds in content blocks; use explicit colors.
See dark mode for your template
Run a test. Dark + light variants per provider. Free.
FAQ
Does every provider have a dark mode?
Most do. We flag 'dark mode not available' for providers that don't offer it on the web client.
Can I force the screenshot to light for an HTML-heavy marketing email?
Yes, set the test to capture only the light variant.
Is dark mode worse for placement or just layout?
Layout only — dark mode rendering doesn't affect the filter verdict.
Related reading