Skip to main content

How do I design emails for dark mode?

Designing for dark mode requires anticipating color inversion and testing across clients that handle it differently. The safest approach: design emails that look acceptable whether colors are inverted or not.

Key strategies: Use transparent PNGs for logos and graphics (solid backgrounds become visible halos in dark mode). Avoid pure black (#000000)-it won't invert, creating invisible text. Test color combinations that work both ways. Add dark mode-specific CSS where supported (@media (prefers-color-scheme: dark)). Consider "dark-safe" color palettes that look good inverted.

Design for the reality that you can't fully control. Different clients invert differently-some change nothing, some invert everything, some selectively adjust. You can't design perfectly for all scenarios, so design resiliently. Test in actual dark mode environments using Litmus or similar tools. The goal isn't perfection in dark mode; it's avoiding disasters.