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)
<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><sourcesrcset="https://assets.chrisruppel.com/img/blog/picture-mq-dark.jpg"media="(prefers-color-scheme: dark)"/><imgsrc="https://assets.chrisruppel.com/img/blog/picture-mq-original.jpg"alt="balcony"width="300"/></picture></body></html>