Dark Mode is a user interface option that changes colors to make text and icons appear light on a dark background—which reduces the brightness of your screen.

Designing for Dark Mode (DM) isn’t a new way of creating emails — it’s simply about being more conscious of accessibility from the start. By considering accessibility early in your design process, you can create emails that look great and remain readable across different modes and devices.

In this article, you’ll find guidance on how to design for DM and how to make accessible design choices within the Design Studio.

Why Dark Mode?

Many users prefer DM for accessibility and comfort reasons. It can reduce eye strain and make content easier to view in darker environments. Some also use it to save battery life — or simply because they like the look.

Regardless of the reason, DM is primarily about accessibility. Therefore, we recommend designing with flexibility in mind rather than creating mode-specific versions.

Email design for Dark Mode

There are no official or consistent standards for DM rendering across email clients. Because of this, we don’t recommend adding custom code or CSS fixes for DM—these solutions often only work temporarily or in specific apps like Apple Mail or Outlook Mobile.

Instead, focus on building a design that works well in both Light and Dark Mode:

1. Use logos and icons that have sufficient contrast in both modes.
2. Avoid relying on background colors that may invert unpredictably.
3. Test your emails in Dark Mode to ensure readability and consistent brand appearance.

Tips when designing for Dark Mode

When working in the Design Studio, you can always send yourself a test email. Try viewing it in DM on your device to see how your design behaves.

For the best results, we recommend testing your email across different email clients (such as Apple Mail, Outlook, and Gmail) since DM rendering can vary widely.

You can also use an email testing tool like Litmus or EmailOnAcid to preview your design in multiple clients and modes before sending it out.

Images

You can make your images work better in both modes by:

1. Using neutral colors (e.g. gray) for logos or icons.
2. Adding natural spacing or soft outlines around shapes.
3. Instead of using a fully transparent background, add an outline or shadow around your logos and icons that becomes visible only in Dark Mode

Texts and backgrounds

Follow the Web Content Accessibility Guidelines (WCAG) for contrast and visibility. Avoid absolute black (#000000) or white (#FFFFFF) — instead, use softer tones like #202020 and #F6FFFF for better accessibility in both modes. The backgrounds and texts should have a contrast of at least 3:1, as this ensures sufficient contrast if the colors are inverted.

Article last reviewed 18 November 2025 09:22