Go to ortto.com
Home Campaigns Email Emails Dark mode design guidelines for email

Dark mode design guidelines for email

Overview

Dark mode is a display setting available on most modern devices and email clients. It shows light text on dark backgrounds, helping reduce eye strain, especially in low-light environments. As more users choose dark mode by default or preference, it’s important to design emails that render well in both light and dark themes.

How dark mode affects emails

Dark mode rendering depends on the email client and the user’s chosen color scheme. Each email client treats dark mode differently, which can impact how your email is displayed.

Here are the common behaviors:

  • No changes in certain clients: Some email clients (e.g. Yahoo mail, Apple mail) have no impact on how emails are viewed.
  • Partial color inversion: Colors may be inverted automatically, but some styles might remain unchanged or only partially inverted. Note that certain email clients, such as Outlook, typically detect only light-colored sections and convert them to darker shades.
  • Respect your original design: Ensure that your design is preserved and rendered as intended.

Tips to optimize dark mode emails

  • Avoid using pure black (#000000) or pure white (#FFFFFF) on pure black.
  • Avoid thin or lightweight fonts, which can be harder to read on dark backgrounds.
  • Follow accessibility best practices, including contrast ratios defined by WCAG.
  • Review color contrast carefully to ensure your text remains legible in both themes.
  • Use transparent PNGs for logos and icons, but test them to avoid issues in clients that apply background color changes.
  • Avoid dark logos or icons on transparent backgrounds as they may become invisible on a dark email background.
  • Test in both light and dark modes to ensure consistency and readability.
  • Use manual HTML coding to gain more control over rendering where needed (especially with stubborn email clients).
  • Use testing tools like Litmus to preview how your email renders in different environments and clients.

Dark mode resources

For detailed insights on best practices for designing in dark mode, we recommend checking out the ultimate guide to dark mode from Litmus. Additionally, you can explore our own best practices for email design.