Dark Mode

View your email in light mode or dark mode in the Preview. This should not be confused with light/dark mode in the editor.

Change the Preview light/dark mode via the color scheme menu above the preview. You can choose between Light, Dark, Forced Dark or System, which matches your computer's configuration.

Dark/light mode affects prefers-color-scheme: dark/light. You can easily identify the current mode by the Preview controls menu icon, which will be blue if any control is applied. Dark mode can be applied to any Live Preview.

(Sample code from Mozilla and Chris Ruppel)

Silent video of the full Parcel window. The email code excerpted below is shown in the Editor and rendered in the Preview. The Preview shows 6 boxes, arranged in a 3x2 grid, and below, an image. The first box, is labeled "Day (initial)", and has a light grey background. The second box, labeled "Day (changes in light scheme)" has a white background. The third box in the top row, labeled "Day (Changes in dark scheme), has a light grey background. The second row has three boxes. The first, labeled "Night (initial) has a dark grey background. The second, labeled "Night (changes in light scheme)", has a light grey background. The final box, labeled "Night (changes in dark scheme)", has a dark grey background. The image below is the view from an apartment on a sunny day. The user clicks on the Preview controls button at the top of the Preview, revealing a menu with several options. The user switches from "System" to "Dark Mode" in the "Color Scheme" section of the menu. The user closes the Preview controls menu to see the results. The "Day (changes in dark scheme)" box on the top row now has a dark grey background. The "Night (changes in dark scheme)" box on the bottom row now has a black background. The image has been replaced with a view from the same apartment at night. The user returns to the Preview controls menu and sets the color scheme to Light, which restores the boxes and images to their original state, as the computer was originally in light mode. The user switches the color scheme again to "System", which results in no apparent difference to the preview, as the system is in Light mode.
Screen recording demonstrating light, dark, and system mode in Preview
<html>
  <body>
    <style>
      .day {
        background: #eee;
        color: black;
      }
      .night {
        background: #333;
        color: white;
      }
      @media (prefers-color-scheme: dark) {
        .day.dark-scheme {
          background: #333;
          color: white;
        }
        .night.dark-scheme {
          background: black;
          color: #ddd;
        }
      }
      @media (prefers-color-scheme: light) {
        .day.light-scheme {
          background: white;
          color: #555;
        }
        .night.light-scheme {
          background: #eee;
          color: black;
        }
      }
      .day,
      .night {
        display: inline-block;
        padding: 1em;
        width: 7em;
        height: 2em;
        vertical-align: middle;
      }
    </style>
    <div class="day">Day (initial)</div>
    <div class="day light-scheme">Day (changes in light scheme)</div>
    <div class="day dark-scheme">Day (changes in dark scheme)</div>
    <br />
    <div class="night">Night (initial)</div>
    <div class="night light-scheme">Night (changes in light scheme)</div>
    <div class="night dark-scheme">Night (changes in dark scheme)</div>
    <picture>
      <source
        srcset="https://assets.chrisruppel.com/img/blog/picture-mq-dark.jpg"
        media="(prefers-color-scheme: dark)"
      />
      <img
        src="https://assets.chrisruppel.com/img/blog/picture-mq-original.jpg"
        alt="balcony"
        width="300"
      />
    </picture>
  </body>
</html>

Forced dark mode

Forced dark mode emulates the color inversion that email clients will do. Some email clients - including Outlook and Gmail - will find areas of your email with dark text and light background and flip them to match the user's Dark Mode preference. While we don't have full control over these cases, being aware and testing your images and colors is a good idea.

Screen recording demonstrating forced dark mode in Preview
Previous ArticleNext Article