Dark mode inverts email colors in ways that can make your carefully designed email look broken, unreadable, or just plain wrong. This week we cover what it does and how to handle it.
This Week’s Lesson
Dark mode displays light text on dark backgrounds instead of the default dark text on light backgrounds. iOS, Android, macOS, Windows, and most modern email clients support dark mode — and adoption is high, particularly on mobile (80%+ prefer dark mode on phones).
The problem: dark mode doesn't just change the background color. Many email clients force-invert ALL colors in your email, including your brand colors, text colors, and images. A logo with a transparent background that looks perfect in light mode may become invisible (white logo on white background) in dark mode.
What gets affected: White text on colored backgrounds can become dark text on dark backgrounds (invisible). Black logos on transparent backgrounds invert to white logos on dark backgrounds (which may look fine or may be wrong). Carefully chosen brand colors can be inverted to clashing, unintended colors.
Solutions: Use the CSS prefers-color-scheme media query to serve an alternative dark-mode stylesheet. Define explicit dark-mode colors for key elements. Use PNGs with transparent backgrounds and test both modes. Avoid images with non-transparent backgrounds that assume a white canvas.
The easiest fix: use SVG logos that handle both modes well, and test your email in both light and dark mode before every send. Litmus and Email on Acid both show dark mode previews.
Not all clients apply dark mode the same way. Gmail on Android, Apple Mail on iOS, and Outlook on Windows all handle dark mode differently — meaning you may need to test across all three specifically.