You can use plain text for your transactional and marketing emails, but for a more professional look you’ll want to have designed HTML emails.

However, email clients are notorious for their HTML quirks.

So how do you make your email look good and support modern features like prefers-color-scheme (light/dark mode)?

Let the Mail Client Handle It

Apple’s Mail.app (among others) will automatically display some emails with their colors converted to dark mode friendly alternatives.

The best I could find on the heurstics for this conversion was a post from Litmus.

But we want to support all mail clients, so this won’t work.

Media Queries

While not used that often, mail clients support media queries.

I’ve seen a number of emails that Mail automatically renders in dark mode but only a couple dark mode emails using media queries: Doordash and Chownow

Chownow sends emails with media queries to render in both light and dark modes and also includes some media queries to handle different screen sizes.

@media (prefers-color-scheme: dark) {
  .em_body {
    background-color: #282828 !important;
  }
  .em_body1 {
    background-color: #4d4d4d !important;
  }
  .em_txt_white {
    color: #ffffff !important;
  }
  /* --snip-- */
}

Conclusion

Some mail clients will sometimes render your email with dark mode styling, so make sure it looks good.

But it’s even better if you use media queries to support dark mode.