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, 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 menu icon (sun: light, moon: dark, split circle: system).

(Sample code from Mozilla and Chris Ruppel)

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>
Previous ArticleNext Article