Loading…

How to support dark mode

BetaThis feature is new and we're actively working to improve it. Updated

You can customize how your message appears in dark mode when a user’s device or inbox is set to that preference. Open an email in the code editor of Design Studio to get started.

Check out Preview controls > Color scheme to understand Forced dark mode.

Customize styles for dark mode

To create a custom version of your email for dark mode, you’ll need to add @media queries that target the attribute prefers-color-scheme in a <style> tag. Check out Can I Email to see which email clients support this feature.

We’re working towards implementing a code-free way to customize dark mode styles.

Code using standard components:

<x-head>
  <style>
    @media (prefers-color-scheme:dark) {
      .body, .wrapper {
        background: #333 !important;
        color:#eee !important;
      }
      .dark-img img{
        opacity:0;
      }
      .dark-img{
        display:inline-block;
        background:url('https://assets.chrisruppel.com/img/blog/picture-mq-dark.jpg') center /cover;
      }
    }
  </style>
</x-head>
<x-base class="wrapper">
  <x-section>
    <x-heading-1>Dark mode styles</x-heading-1>
    <x-paragraph>Setting dark mode styles in email clients</x-paragraph>
    <span class="dark-img">
      <img src="https://assets.chrisruppel.com/img/blog/picture-mq-original.jpg" alt="balcony" width="600" style="max-width:100%;"
        />
    </span>
</x-section>
</x-base>

Processed code (visible in the code editor under Source):

<!doctype html>
<html lang="und" dir="auto" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no" />
    <meta name="x-apple-disable-message-reformatting" />
    <meta name="color-scheme" content="normal" />
    <meta name="supported-color-schemes" content="normal" />
    <title></title>
    <!--[if mso]>
    <noscript>
      <xml>
        <o:OfficeDocumentSettings>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
    </noscript>
    <![endif]-->
    <style>
      :root {
        color-scheme: normal;
        supported-color-schemes: normal;
      }
    </style>
    <style>
      .x-wrapper {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      a[x-apple-data-detectors] {
        word-break: normal;
      }
    </style>
    <style>
      body {
        margin: 0;
        padding: 0 !important;
      }

      table.mso {
        mso-cellspacing: 0;
        padding: 0;
        font-size: medium;
        line-height: 150%;
        font-family: Helvetica, sans-serif;
      }

      table.mso td {
        vertical-align: top;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      li,
      td {
        mso-hyphenate: none;
      }
    </style>
    <style id="global-styles-link">
      a {
        color: #e7121f;
        font-weight: 400;
        text-decoration: underline;
      }
    </style>
    <style>
      @media (prefers-color-scheme:dark) {

        .body,
        .wrapper {
          background: #333 !important;
          color: #eee !important;
        }

        .dark-img img {
          opacity: 0;
        }

        .dark-img {
          display: inline-block;
          background: url('https://assets.chrisruppel.com/img/blog/picture-mq-dark.jpg') center /cover;
        }
      }
    </style>
    <style data-isolated="thunderbird" media="(prefers-color-scheme: dark)">
    </style>
  </head>
  <body class="body" style="background: #fefefe;">
    <div role="article" aria-roledescription="email" aria-label="" lang="und" dir="auto" style="font-size: max(16px, 1rem);color: #000000; background: #fefefe; line-height: 1.5; mso-line-height-alt: 150%; font-family: Helvetica, sans-serif; word-break: normal; word-wrap: normal; word-spacing: normal;" class="wrapper x-wrapper">
      <div>
        <!--[if true]><table role="none" class="mso" align="left" style="width: 100%;">
          <tr>
            <td></td>
            <td style="width: 640px; padding: 20px;">
        <![endif]--><!--[if !true]><!--><div style="max-width: 640px; margin-left: auto; margin-right: auto;">
              <!--<![endif]--><div style="padding: 20px; overflow: auto;">
                  <h1 style="font-size: 32px; margin: 21px 0;">Dark mode styles</h1>
                  <p style="margin: 16px 0;">Setting dark mode styles in email clients</p>
                  <span class="dark-img">
      <img src="https://assets.chrisruppel.com/img/blog/picture-mq-original.jpg" alt="balcony" width="600" style="max-width:100%;"
        />
    </span>
                </div>
        <!--[if !true]><!-->
              </div>
              <! <!--[if true]>
            </td>
            <td></td>
          </tr>
        </table>
        <![endif]-->
      </div>
    </div>
  </body>
</html>
Copied to clipboard!
  Contents
Is this page helpful?