Dark Mode Preview (new Email Composer)

  • Updated

The email builder's Dark mode toggle in Preview mode lets you simulate how your email designs will look on devices with dark mode activated. Given the variety in dark mode behavior across different email clients, this feature provides a general approximation of the dark mode experience for end-users:

Dark Mode Preview (new Email Composer) 01.png

Utility and Limitations

Although the Dark Mode Preview is a useful tool for initial design checks, it shouldn't replace in-depth testing across multiple email clients. It's tested rigorously with standard content blocks but may give different outcomes for custom HTML blocks. Also, note that the builder does not automatically optimize designs for dark mode at this time. Different email clients have varied ways of interpreting dark mode, and many don't yet support methods for overriding these settings.

How Dark Mode Affects Your Emails

  • Nothing Changes: Generally applies to Yahoo Mail and Gmail's webmail. The email content remains the same; only the client's UI changes.
  • Partial Color Inversion: Observed in outlook.com, where only the light-colored sections get inverted.
  • Full-Color Inversion: Seen in Gmail's mobile app and iOS 13 platforms. This mode entirely inverts colors and is often the most challenging for designers. Our preview tool is primarily focused on simulating this experience.

Design Tips for Dark Mode

Creating dark-mode-friendly designs can be complex, but here are some key pointers to help you:

  • Avoid using pure white (#FFFFFF) and pure black (#000000); opt for off-whites and gray-blacks instead. This can mitigate the impact on email clients that perform full-color inversion.
  • Transparent PNGs are preferable for flexible design adaptability.
  • Outline text in contrasting colors for better legibility, particularly if it's part of an image.

By making the most of the Dark Mode Preview feature and adhering to these design guidelines, you'll be better equipped to produce emails that offer a consistent and appealing experience, regardless of your audience's device settings.

Was this article helpful?

Have more questions? Submit a request