Dark Mode Preview
@media (prefers-color-scheme) works in 9 of 21 clients; the color-scheme meta tag in 2 of 21 (partial in 2).
@emailens/engine 0.18.22 · data last changed 10 Nov 2026
Example · engine 0.18.22 on the sample above. Paste yours to replace it.
Apple Mail (macOS): 1 note · Gmail (Android): no notes · Outlook (iOS): 1 note
Rendered at 600px.
Apple Mail (macOS)
Shown as you sent it. Apple Mail only changes colours when your email has its own prefers-color-scheme: dark styles.
Apple Mail supports @media (prefers-color-scheme: dark). Without it, email content renders unchanged in dark mode.
Add a @media (prefers-color-scheme: dark) block with inverted colors for the best dark mode experience.
Gmail (Android)
Partial invert: light backgrounds go dark, dark text goes light.
Outlook (iOS)
Re-tints your light colours. Text you set in grey can end up close to its new background.
Outlook iOS applies partial color inversion in dark mode.
Add @media (prefers-color-scheme: dark) styles and duplicate them with [data-ogsc]/[data-ogsb] prefixes. Outlook mobile support for those attributes is partial.
This preview approximates colour changes. Real devices also invert images, ignore unsupported dark-mode media queries and restyle background fills.
Paste your own email above and check it, or open the checker and paste it there: five clients, no account.
No signup · Five clients free, Outlook Classic included · All 21 with an account
Which clients need an account
Gmail Android, Gmail iOS, Outlook 365, Outlook iOS, Outlook Android, Outlook for Mac, Apple Mail, Yahoo Mail Android, Yahoo Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, AOL Mail, Fastmail, Superhuman open with a free account.
The checker needs a computer screen.
What each dark-mode signal reaches
- @media prefers-color-scheme
Works in 9 of 21 · not supported in 11 · 1 untested
- meta-color-scheme
Works in 2 of 21 · partial in 2 · not supported in 16 · 1 untested
- color-scheme
Works in 4 of 21 · not supported in 16 · 1 untested
Your next question
- Which clients support @media (prefers-color-scheme)?
Works in 9 of 21 · not supported in 11 · 1 untested
- Which clients honour the color-scheme meta tag?
Works in 2 of 21 · partial in 2 · not supported in 16 · 1 untested
- Which of your CSS breaks, and in which client?
Other free tools: CSS Support Lookup · CSS Inliner · Outlook Ghost Table Generator · Outlook VML Background Generator · Bulletproof Button Generator · Client Targeting Generator · Email Rendering Playground
Run this check on every email
The open-source CLI checks dark-mode contrast on every template, free: npx @emailens/cli lint email.html
(CLI docs).
Dev + Real is $19 a month, with 20 real-device checks a month. Real-device plans →
Questions
How does dark mode work in email?
There's no single behaviour. Apple Mail keeps your colours unless your email has its own prefers-color-scheme: dark styles, Gmail on Android partially inverts, and Outlook on iOS re-tints light colours. The same email can look right in one client and have invisible text in another.
Does the color-scheme meta tag fix dark mode?
Rarely on its own: it works in 2 of 21 (partial in 2) clients. @media (prefers-color-scheme: dark) reaches more: 9 of 21.
Why is my white text invisible in dark mode?
A client that re-colours your email may darken a background and leave the text light, or the other way round, so dark text ends up on a now-dark background. Setting explicit background colours on the containing cells is the usual fix.