← CSS Support IndexDoes CSS
Does CSS @media (prefers-color-scheme) Work in HTML Email?
This media query allows to theme for system light and dark mode.
Quick Answer
Does @media (prefers-color-scheme) work in HTML email?
The CSS @media (prefers-color-scheme) property is supported in Outlook (Mac / Web), Apple Mail, Samsung Email, Fastmail. It is NOT supported in Gmail, Outlook (Windows), Yahoo! Mail, and others. Always include a safe fallback for unsupported clients.
Which Email Clients Support CSS @media (prefers-color-scheme)?
CSS support for @media (prefers-color-scheme) across email clients
| Email Client | Desktop | Mobile / Web | Notes |
|---|---|---|---|
| Gmail | ✗ No | ✗ No | — |
| Outlook (Windows) | ✗ No | ? | — |
| Outlook (Mac / Web) | ✓ Yes | ✓ Yes | — |
| Apple Mail | ✓ Yes | ✓ Yes | — |
| Yahoo! Mail | ✗ No | ✗ No | — |
| Samsung Email | ? | ✓ Yes | — |
| Thunderbird | ✗ No | ? | — |
| ProtonMail | ✗ No | ✗ No | — |
| Fastmail | ✓ Yes | ? | — |
Notes
- #1 Not supported. `@media (prefers-color-scheme)` is transformed into `@media ( _filtered_a )`.
- #2 Not supported. `@media (prefers-color-scheme:dark)` is transformed into `@media none`.
- #3 Additional custom `data` attributes (`data-ogsc`, `data-ogac`, `data-ogsb`, `data-ogab`) are added when viewing an email in dark mode. See [this article](https://www.hteumeuleu.com/2021/emails-react-outlook-com-dark-mode/) for examples.
- #4 `@media (prefers-color-scheme:dark)` is transformed into `@media all` at run time if it applies.
- #5 Not supported. `@media (prefers-color-scheme:dark)` is transformed into `@media (false)`
- #6 Not supported. `@media (prefers-color-scheme:dark)` is transformed into `@media ()`
Frequently Asked Questions
Related CSS Properties
Test Your Email Now
Paste your HTML and see how it renders in clients that don't support @media (prefers-color-scheme).