Designing emails that look great in dark mode — complete guide

Over 80% of email clients now support some form of dark mode, and each implements it differently. Here is how to handle it.

The three types of dark mode

1. No change: Client displays your email as-is (Gmail app on iOS)
2. Partial invert: Light backgrounds become dark, text inverts (Outlook)
3. Full invert: All colors are inverted or adjusted (Apple Mail)

Best practices

• Use transparent PNGs instead of images with white backgrounds
• Add a thin border around white logos so they remain visible on dark backgrounds
• Test with dark mode meta tags: <meta name="color-scheme" content="light dark">
• Use CSS @media (prefers-color-scheme: dark) for targeted styling

The simplest approach: design with dark mode in mind from the start. Use sufficient contrast, avoid full-white backgrounds, and always test in both modes.