Email Dark Mode Preview shows how your HTML email looks in dark mode across different email clients. Each client handles dark mode differently — from respectful CSS support (Apple Mail) to aggressive full-color inversion (Outlook) — and this tool simulates all three strategies side by side.
Email Dark Mode Preview
Preview how your HTML email renders in dark mode across Outlook, Gmail, Apple Mail, and Yahoo Mail. See color inversions, contrast issues, and logo visibility before sending.
HTML Email Code 0
Dark Mode Best Practices
DO Use
@media (prefers-color-scheme: dark)DO Give logos transparent backgrounds (PNG/SVG)
DO Use
color-scheme: light dark meta tagDO Add faint stroke/shadow around logos
DO Use off-white (#fafafa) instead of pure #fff
DONT Use white backgrounds behind logos
DONT Hard-code white text color
DONT Rely on background-color alone for contrast
DONT Use images for text content
About Email Dark Mode Preview
Features
- 4 preview panels: Light mode + 3 dark mode strategies
- Real client mapping: Each strategy shows which clients use it
- Issue detection: Flags white backgrounds, missing dark styles, contrast problems
- Best practices: Built-in DO/DON'T checklist
- Dark mode starter template: Ready-to-use template with prefers-color-scheme
How to Use
- Paste your HTML email code
- Click Preview to see all 4 panels
- Review the issues panel for dark mode problems
- Use the best practices checklist to fix issues
Benefits
- Catch invisible logos before sending
- Understand how each client transforms your email
- Free, private, runs in your browser
Frequently Asked Questions
Why do emails look different in dark mode?
Each email client applies dark mode differently. Apple Mail respects prefers-color-scheme CSS. Outlook forces full color inversion. Gmail partially inverts. The same email can look dramatically different across clients.
What dark mode strategies does this tool simulate?
Three strategies: CSS-aware (Apple Mail respects your dark styles), Partial inversion (Gmail/Yahoo darken backgrounds but preserve images), and Full inversion (Outlook inverts everything including images).
How do I make my email dark mode-friendly?
Use prefers-color-scheme media queries, give logos transparent backgrounds, add color-scheme meta tag, use off-white instead of pure white, and add subtle borders for structure.
Is my HTML stored anywhere?
No. Everything runs in your browser. No data is transmitted.