🌒 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.