Skip to main content

Dark Mode in Email

Dark mode has become increasingly popular among users, and it's important to optimize your email content for both light and dark modes. This guide will show you how to implement dark mode support in your email templates using CSS and HTML.

CSS for Dark Mode​

First, let's look at the CSS required to switch between light and dark mode images:

<style>
  @media (prefers-color-scheme: dark) {
      .lightimage {
          display: none !important;
      }

      .darkimageWrapper,
      .darkimage {
          display: block !important;
      }
  }

  /* Targeting specific Outlook clients using [data-ogsc] */
  [data-ogsc] .lightimage {
      display: none !important;
  } 
  [data-ogsc] .darkimageWrapper,
  [data-ogsc] .darkimage {
      display: block !important;
  }
</style>

This CSS uses the @media (prefers-color-scheme: dark) query to detect when dark mode is enabled. It also includes specific targeting for Outlook clients using the [data-ogsc] attribute.

HTML Structure​

Now, let's look at the HTML structure for implementing dark mode images:

Dark Mode HTML

%%[
    SET @linkUrl = 'https://example.com'
    SET @altText = 'Example Alt Text'
    SET @lightImgUrl = 'https://example.com/light-image.png'
    SET @darkImgUrl = 'https://example.com/dark-image.png'
]%%

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center">
        
        <!-- Light Mode Image -->
        <a href="%%=RedirectTo(@linkUrl)=%%" title="%%=v(@altText)=%%">
          <img src="%%=v(@lightImgUrl)=%%" alt="%%=v(@altText)=%%" class="lightimage">
        </a>

        <!-- Outlook Conditional Comment -->
        <!--[if !mso]><!-->
        <div class="darkimageWrapper" style="mso-hide: all; display: none">
          <!-- Dark Mode Image -->
          <a href="%%=RedirectTo(@linkUrl)=%%" title="%%=v(@altText)=%%">
            <img src="%%=v(@darkImgUrl)=%%" alt="%%=v(@altText)=%%" class="darkimage">
          </a>
        </div>
        <!--<![endif]-->

      </td>
    </tr>
</table>

This HTML structure includes both light and dark mode images, with the dark mode image wrapped in a conditional comment to hide it from Outlook.

How It Works​

  1. The CSS hides the light image and displays the dark image when dark mode is detected.
  2. The HTML includes both light and dark images, with the dark image initially hidden.
  3. When dark mode is enabled, the CSS switches the visibility of the images.
  4. The Outlook conditional comment ensures compatibility with Outlook email clients.

Best Practices​

  • Always provide both light and dark versions of your images.
  • Use descriptive alt text for accessibility.
  • Test your emails in various email clients and dark mode settings to ensure proper rendering.