Dark Mode

Cerberus includes patterns for dark mode using the prefers-color-scheme media feature to detect if the user’s operating system has requested a light or dark color theme.

Overview

Cerberus defines dark mode styles in each template’s <head> in the form of immutable utility classes. These utility classes can be applied to HTML tags to override their default light mode CSS styles and apply new styles for dark mode.

<style>
  @media (prefers-color-scheme: dark) {
    .my-class {
      color: white !important;
    }
  }
</style>
 
<p style="color: #000000;" class="my-class">
  Text that is black in light mode and white in dark mode.
</p>

Cerberus provides a few patterns for dark mode, which are meant to be edited and built upon.

Examples

Changing colors

In this example, the color of the <p> tag is automatically changed and the background of the <td> is changed using a CSS utility class:

<!DOCTYPE html>
<html>
  <head>
    <style>
      @media (prefers-color-scheme: dark) {
        .darkmode-bg {
          background: #222222 !important;
        }
        p {
          color: #F7F7F9 !important;
        }
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td style="background-color: #F7F7F9; color: #111;" class="darkmode-bg">
          <p>Some text goes here.</p>
        </td>
      </tr>
    </table>
  </body>
</html>
Text in light mode Text in dark mode

Swapping images

Since .svg graphics are not well supported in email clients, email relies on raster images like .png, .jpg, and .gif. Since we can't use a single raster image and recolor it based on the color scheme preference, we include two separate image files (one for light mode and one for dark mode) and display one at a time using the prefers-color-scheme media feature.

<style>
  @media (prefers-color-scheme: dark) {
    .display-only-in-dark-mode {
      display: inline-block !important;
    }
    .display-only-in-light-mode {
      display: none !important;
    }
  }
</style>
 
<img src="logo-light-mode.png" class="display-only-in-light-mode">
<!--[if !mso]><!-->
<img src="logo-dark-mode.png" class="display-only-in-dark-mode">
<!--<![endif]-->

Removing Dark Mode

If you’d rather not include dark mode, you can safely remove the dark mode styles inside the <head>:

/* Dark Mode Styles : BEGIN */
@media (prefers-color-scheme: dark) {
  …
}
/* Dark Mode Styles : END */