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>