It is possible to send email 📧 that is sensitive to the user's prefers-color-scheme (☀️/🌒) setting.
The below is a future-proof email template for dark mode:
<html>
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
: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;
}
}
</style>
</head>
<body>
🖖 Hello Dark Mode!
</body>
</html>The screenshots below show a slightly more involved
example
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) |
||
Made with HTML and CSS by 🐦 @tomayac.
Thanks to 🐦 @xeenon for the WWDC session video pointer.
Apache 2.0.