https://github.com/tomayac/dark-mode-email
This repo shows how to create emails that support dark mode.
https://github.com/tomayac/dark-mode-email
Last synced: 6 days ago
JSON representation
This repo shows how to create emails that support dark mode.
- Host: GitHub
- URL: https://github.com/tomayac/dark-mode-email
- Owner: tomayac
- License: apache-2.0
- Created: 2019-07-25T08:42:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-12T01:06:12.000Z (almost 5 years ago)
- Last Synced: 2025-04-14T00:17:05.164Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 161
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - dark-mode-email
README
# 🌒 Dark Mode Email
It is possible to send email 📧 that is sensitive to the user's `prefers-color-scheme` (☀️/🌒) setting.
## Dark Mode Email Template
The below is a future-proof email template for dark mode:
```html
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
body {
background-color: #eee;
color: #111;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #111;
color: #eee;
}
}
🖖 Hello Dark Mode!
```
## Dark Mode Email Example
The screenshots below show a slightly more involved
[example](https://github.com/tomayac/dark-mode-email/blob/05230b181bb902e9ae968cfb43024a1e27a0224a/index.js#L22-L80)
that includes a dynamically switching image, because, why not…
On email clients that currently don't support `prefers-color-scheme`,
it silently falls back to light mode.
iOS Mail (dark mode)
iOS Mail (light mode)
iOS Gmail (fallback light mode)
Desktop Gmail (fallback light mode)
## Who Made This
Made with HTML and CSS by 🐦 [@tomayac](https://twitter.com/tomayac).
## Acknowledgements
Thanks to 🐦 [@xeenon](https://twitter.com/xeenon/status/1153810328808853506) for the
[WWDC session video](https://developer.apple.com/videos/play/wwdc2019/511/) pointer.
## License
Apache 2.0.