Skip to content
This repo shows how to create emails that support dark mode.
JavaScript
Branch: master
Clone or download
Latest commit ab94dce Jul 26, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Jul 25, 2019
LICENSE Initial commit Jul 25, 2019
README.md Update README.md Jul 25, 2019
dot_env Initial commit Jul 25, 2019
index.js Update index.js Jul 25, 2019
moon.png Initial commit Jul 25, 2019
package-lock.json Initial commit Jul 25, 2019
package.json Fix package.json keywords Jul 26, 2019
sun.png Initial commit Jul 25, 2019

README.md

🌒 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>
  <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 🐦 @tomayac.

Acknowledgements

Thanks to 🐦 @xeenon for the WWDC session video pointer.

License

Apache 2.0.

You can’t perform that action at this time.