16:I[62539,["/_next/static/chunks/5b8abe7aaf79c60f.js?dpl=dpl_2rMPVqXvRkDTiTqsFaRyPkpoQY5H","/_next/static/chunks/b97ad154332e5626.js?dpl=dpl_2rMPVqXvRkDTiTqsFaRyPkpoQY5H","/_next/static/chunks/c02c5df345c12fc3.js?dpl=dpl_2rMPVqXvRkDTiTqsFaRyPkpoQY5H","/_next/static/chunks/0b41a23643090e6f.js?dpl=dpl_2rMPVqXvRkDTiTqsFaRyPkpoQY5H","/_next/static/chunks/fa22618ea6645bd6.js?dpl=dpl_2rMPVqXvRkDTiTqsFaRyPkpoQY5H"],"ArticleCardGrid"] 17:T505,

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.

Rendering

Mastering Dark Mode in Email