Loading…

How to support dark mode

Design Studio New Updated

You can customize how your message appears in dark mode when a user’s device or inbox is set to that preference.

 This article applies to Design Studio

We are currently piloting Design Studio, our new email design system, and making some information available to customers. If you don’t have access to Design Studio, please continue to use our other email editors.

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?