Dark Mode Email Simulator

Paste your HTML email code and preview how it renders in light mode, native dark mode, and auto-inverted dark mode.

content_paste

Copy the HTML source code from your email template and paste it here to preview how it looks in dark mode.

Native Dark uses your @media (prefers-color-scheme: dark) CSS.Auto Dark simulates forced color inversion by email clients.

Tips for Dark Mode Emails

code

Add @media (prefers-color-scheme: dark) CSS to control exactly how your email looks in dark mode instead of relying on auto-inversion.

label

Include <meta name="color-scheme" content="light dark"> and <meta name="supported-color-schemes"> to signal dark mode support.

invert_colors_off

Use off-white (#F5F5F5) instead of pure white and off-black (#191919) instead of pure black. Some clients don't auto-invert off-colors.

swap_horiz

Use <picture> with srcset and media queries to swap logos/images for dark mode versions.

android

Add [data-ogsc] prefixed selectors alongside your media queries for Outlook Android dark mode support.

format_paint

Add classes to elements you want to restyle in dark mode, then target them in your media query. Inline styles can't be overridden by media queries.

trending_up

According to Litmus research, dark mode adoption continues to grow year over year. Optimizing your emails for dark mode is no longer optional.

Email clients handle dark mode in three fundamentally different ways:

Email Client	Behavior	Supports Native CSS
Apple Mail (macOS/iOS)	No change	✓
Gmail (Web/Desktop)	No change	✗
Yahoo Mail / AOL	No change	✗
Outlook.com / Outlook iOS/Android	Partial invert	✓
Gmail iOS App	Full invert	✗
Outlook 2021/2024 (Windows)	Full invert	✗
Windows Mail	Full invert	✗

No change:Email renders identically in light/dark UI

Partial invert:Light backgrounds → dark, preserves some styling

Full invert:Everything inverts - can break dark-themed emails!