CSS at-rule · data last changed 10 Nov 2026
@media prefers-color-scheme in email clients
Works in 9 of 21. Not supported in Gmail, Gmail Android, Gmail iOS and 8 more. Untested in Superhuman.
Safe to leave in: where it is not supported, the email renders the same.
caniemail (MIT) via @emailens/engine 0.18.22
What to do instead in Outlook Classic
Combine three layers for comprehensive dark mode support: 1) Add <meta name="color-scheme" content="light dark"> and <meta name="supported-color-schemes" content="light dark"> to the <head>. 2) Write standard @media (prefers-color-scheme: dark) styles for Apple Mail and Fastmail. 3) Duplicate those rules with [data-ogsc] (color) and [data-ogsb] (background) attribute selectors for Outlook. Always design logo and graphic assets with a subtle semi-transparent light stroke or glow so they remain readable in Gmail where queries are ignored.
There is no drop-in fix for @media prefers-color-scheme in Outlook Classic. Design so the email still reads without it.
No signup · Five clients free, Outlook Classic included · All 21 with an account
The checker needs a computer screen.
A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →
Every account includes one free real-device check in classic Outlook, Outlook for Mac and Apple Mail, after you verify your email and run one preview, while this month's free capacity lasts. How real-device checks work →
@media prefers-color-scheme is not among the 24 features we have screenshotted on real installs. The ones we have →
All 21 clients, problems first
| Client | Support |
|---|---|
| Gmail | Not supported |
| Gmail Android | Not supported |
| Gmail iOS | Not supported |
| Outlook Classic | Not supported |
| Yahoo Mail | Not supported See caveat 2 |
| Yahoo Mail Android | Not supported |
| Yahoo Mail iOS | Not supported |
| Thunderbird | Not supported |
| HEY Mail | Not supported See caveat 3 |
| Proton Mail | Not supported |
| AOL Mail | Not supported See caveat 4 |
| Superhuman | Untested |
Works in 9: Outlook 365, Outlook (New), Outlook iOS and 6 more. Show all
| Client | Support |
|---|---|
| Outlook 365 | Works See caveat 1 |
| Outlook (New) | Works See caveat 1 |
| Outlook iOS | Works See caveat 1 |
| Outlook Android | Works See caveat 1 |
| Outlook for Mac | Works See caveat 1 |
| Apple Mail | Works |
| Apple Mail iOS | Works |
| Samsung Mail | Works |
| Fastmail | Works See caveat 5 |
Caveats (5)
- 1. Outlook 365, Outlook (New), Outlook iOS, Outlook Android, Outlook for Mac: Additional custom
dataattributes (data-ogsc,data-ogac,data-ogsb,data-ogab) are added when viewing an email in dark mode. See this article for examples. - 2. Yahoo Mail: Not supported.
@media (prefers-color-scheme:dark)is transformed into@media () - 3. HEY Mail: Not supported.
@media (prefers-color-scheme:dark)is transformed into@media (false) - 4. AOL Mail: Not supported.
@media (prefers-color-scheme)is transformed into@media ( _filtered_a ). - 5. Fastmail:
@media (prefers-color-scheme:dark)is transformed into@media allat run time if it applies.
Caveats as recorded by caniemail (MIT), one entry per wording.
How @media prefers-color-scheme behaves
The @media (prefers-color-scheme) media query enables email developers to detect whether a recipient has enabled light or dark mode on their operating system and apply custom styling accordingly. Unlike automated client dark mode inversions that unpredictably invert background and text colors, prefers-color-scheme allows designers to curate intentional dark themes. However, support varies dramatically across email clients, requiring multi-layered dark mode targeting.
- Apple Mail (iOS and macOS) provides the cleanest, most reliable support for @media (prefers-color-scheme: dark).
- Gmail (both webmail and mobile apps) does not support prefers-color-scheme queries; Gmail relies entirely on its own server-side and client-side color inversion algorithms.
- Outlook 365 and Outlook mobile do not execute standard prefers-color-scheme media queries, but instead apply custom data attributes ([data-ogsc] and [data-ogsb]) to dark-mode elements.
- Yahoo Mail transforms @media (prefers-color-scheme:dark) into an invalid empty query @media (), while Hey transforms it into @media (false).
Questions
Does Gmail support @media (prefers-color-scheme: dark)?
No. Gmail does not support prefers-color-scheme on the web or in its apps. Its own dark mode differs by platform: the web leaves email colours unchanged, Android partially recolours them and iOS recolours them fully.
What are [data-ogsc] and [data-ogsb] in Outlook email dark mode?
Outlook 365 and Outlook mobile inject custom data attributes when dark mode is active: [data-ogsc] targets text colors and [data-ogsb] targets background colors. Email developers use these selectors to override Outlook's automated dark mode styles.
Your next question
- Does @media orientation work in Outlook Classic?
Works in 11 of 21 · partial in 1 · not supported in 8 · 1 untested
- Does @media device-pixel-ratio work in Outlook Classic?
Works in 10 of 21 · not supported in 10 · 1 untested
- Does @media hover work in Outlook Classic?
Works in 9 of 21 · not supported in 8 · 4 untested
- Does @media prefers-reduced-motion work in Outlook Classic?
Works in 9 of 21 · partial in 1 · not supported in 10 · 1 untested
- Does @supports work in Outlook Classic?
Works in 9 of 21 · not supported in 12
- Does @keyframes work in Outlook Classic?
Works in 7 of 21 · partial in 1 · not supported in 13
Every feature in Outlook Classic · All email CSS features · What real installs show
Paste your email
Get new email CSS fixes by email.