Mastering Dark Mode in Email
How to design emails that look great in dark mode across Apple Mail, Gmail, and Outlook.
Marcus Reed
Design & Rendering Specialist
The Three Types of Dark Mode
Not all dark modes are created equal. Email clients handle dark mode in three fundamentally different ways, and understanding these differences is the key to designing emails that survive the transition.
Type 1: No Color Changes
Some clients (like Apple Mail with user-set light scheme) simply respect your original colors. No action needed.
Type 2: Partial Color Inversion
Clients like iOS Mail and Apple Mail invert light backgrounds to dark, but leave dark backgrounds alone. They also adjust light text colors for readability.
Type 3: Full Color Inversion
Outlook and some webmail clients aggressively invert all colors — backgrounds, text, and even images. This is where most dark mode bugs appear.
Defensive Design Strategies
Use transparent PNGs where possible. Add padding around logos so inverted backgrounds don't cut into your artwork. Test with [data-ogsc] and [data-ogsb] attribute selectors for Outlook dark mode targeting.
Testing Your Dark Mode Implementation
Always test in at least: Apple Mail (macOS), iOS Mail, Gmail (Android), Outlook (Windows desktop), and Outlook.com. Each handles dark mode differently.
Marcus Reed
Design & Rendering Specialist
Has tested emails in every client imaginable — from Outlook 2007 to the Apple Watch. Resident dark-mode debugging expert.