Supporting dark mode isn't just a trendy feature — it's a necessity.More and more users read emails in dark theme on their devices, and if your email isn't adapted for it, it can end up looking ugly or becoming unreadable.In this article, we'll explain how to properly prepare and export an HTML email with dark mode in mind.

Why you can't just export regular HTML

When you export plain HTML code:❌ colors might only be defined for light theme,❌ email clients may "invert" colors on their own, which can break the design,❌ logos and images with a white background will look messy.

Step 1. Define your colors explicitly

  • Set the background color (background-color) and text color (color) inline or in your CSS — don't rely on a "default white background."
  • For dark theme, use dark gray backgrounds instead of pure black (#000) — it's easier on the eyes.
  • For light theme, avoid pure white (#fff) — it's better to use very light shades instead.

Step 2. Prepare media queries for dark mode

In your CSS, you can add:

@media (prefers-color-scheme: dark) {

body {

background-color: #121212 !important;

color: #ffffff !important;

}

.button {

background-color: #ffffff !important;

color: #121212 !important;

}

}

Important: not all email clients support these media queries, so you can't rely on them alone — you need a fallback.

Step 3. Use transparent images

  • It's best to prepare logos and icons as PNG files with a transparent background.
  • If an image is inserted with a white background, it can end up looking like an ugly "smudge" in dark theme.

Step 4. Check contrast

  • Text needs to be readable against a dark background (not light gray on dark gray).
  • Buttons should stand out, but not be eye-searing.

Step 5. Export HTML with inline styles

In Letteros:

  • use export with inlining — so styles are embedded directly in the HTML instead of loaded externally.
  • Make sure all classes and elements related to color are explicitly defined.

Step 6. Test the email

  • Send a test to yourself in Gmail, Outlook, and Apple Mail.
  • Turn dark mode on and off on your device.
  • Check on both mobile and desktop to make sure everything displays correctly.

Conclusion

Exporting an HTML email with dark theme support isn't just a design question — it's also a matter of respect for your subscribers.A properly prepared email will look great in any mode, boosting engagement and trust.