🌒 Dark Mode Email
It is possible to send email prefers-color-scheme (
Dark Mode Email Template
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>Dark Mode Email Example
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) |
||
Who Made This
Made with HTML and CSS by
Acknowledgements
Thanks to
License
Apache 2.0.