Dark mode email design best practices

You will learn

Learn about dark mode, a setting users can turn on in their device or email app to darken their displays. This setting impacts how emails are displayed. Klaviyo does not have direct control over how each inbox applies dark mode.

Why do people use dark mode?

Dark mode has become popular because it is believed to have a variety of benefits. Users may choose dark mode to:

• Minimize eye strain.
• Support healthier sleep habits.
• Extend a device’s battery life.
• Improve accessibility.

According to Litmus, the number of people viewing emails in dark mode increased from 28% in 2021 to 34% in 2022.

Dark mode and your branding

Dark mode impacts your email branding by adjusting the HTML used to render it in the inbox. These adjustments can be as small as inverting colors in text-only emails (while leaving HTML emails unchanged), or as substantial as adjusting every color in your fully-designed email template.

If you don’t consider dark mode when designing your emails, it can result in hard-to-read text, colors that don’t align with your brand styles, and more.

Consider SWAK Cosmetics’ logo. On a white background, it looks great.

But when viewed on a dark mode device, it is impossible to read.

Note the changes in this email header between light and dark mode. The email background color, text color, and link bar color all were inverted.

Email apps and devices that offer dark mode

The specifics of dark mode changes vary between email apps, devices, and operating systems. Litmus offers a resource on the email clients that offer dark mode and how they treat HTML emails.

In general, inboxes fall into 1 of 2 categories: those that make minimal or no changes, and those that invert email colors.

Minimal changes

Some inboxes, like Apple Mail for desktop, leave the colors in fully designed HTML emails unchanged unless you include dark mode metatags. Text-only emails can still change in dark mode. When the email content stays the same, only the surrounding inbox changes color.

Color inversion

Other inboxes, like Outlook.com, partially invert your colors. This means some lighter colors are swapped out for darker hues, and some darker colors are swapped with lighter ones (e.g., dark text that was previously on a light background). The end result is an email that’s notably darker than the original.

Some inboxes apply full color inversion, changing both light and dark backgrounds. For example, Outlook 2021 for Windows can turn a dark background light.

Mitigation strategies

There are several strategies for maintaining your branding while optimizing for light and dark mode. Choose the one that best aligns with your team’s capacity and branding needs.

Develop designs with light and dark mode in mind

If you use Klaviyo’s drag-and-drop editor to send your emails, this strategy is best. Develop your email templates while keeping in mind what changes they’ll undergo on dark mode devices:

• Use logos and images that look great on light and dark backgrounds, like this one for Bola’s baked goods.
  

• Or add a light-colored shadow to a dark logo with a transparent background, so it stands out in dark mode.
  

• Alternatively, use image files that include background colors, rather than using a transparent background. If you choose this option, make sure your image completely fills the space it takes up (e.g., 600px wide for full-width images).
  

• Use text wherever possible, rather than using images that contain text. This allows full color inversion (plus, it’s better for accessibility).

Custom code dark and light versions

If you have a developer team that can custom-code your HTML emails from scratch, you can provide CSS that detects whether a viewer is using dark or light mode and adjust the design accordingly. This can override certain dark mode defaults in some inboxes, so you have more control.

You can use @media (prefers-color-scheme: dark) and [data-ogsc] to target dark mode users specifically in your email’s code. Learn more about which email clients support these tags and what code to use in your own designs.

Avoid image-only emails

We don’t recommend using image-only emails for a variety of reasons:

• Without alt text, your email can look suspicious to inboxes and land in the spam folder.
• Image-only emails aren’t an accessibility best practice, as they are challenging for many people and screen readers to read.
• Using image-only emails to force a light-mode appearance is circumventing your subscribers’ preferences.

Many brands use image-only emails because image files preserve the colors and fonts built into the image. However, image-only emails still rely on HTML for layout, spacing, and surrounding backgrounds. An inbox can change those surrounding colors in dark mode, so this approach does not guarantee that the entire email will match your original design.

Test your email in light and dark mode

Before sending, check that your logos, text, and links are readable in both modes. Inbox testing is available for paid Klaviyo accounts and includes 100 tests per user per month. Each inbox preview you generate counts as 1 test.

1. In the drag-and-drop email editor, click Preview, then select Inbox testing.
2. Select a profile to preview with. For an email that uses event data, select the relevant event so you can check the personalized content.
3. Under Select inbox tests, expand Dark mode and choose inboxes used by your subscribers. Select light mode versions for comparison, and remove any preselected inboxes you don’t need.
4. Click Run test. When the previews are ready, click each tile to inspect it.
5. Click Done to return to the editor. Make any needed design changes, then run new tests to check the updated email.

Learn more about using inbox testing. You can also send a test email to inboxes you can access and compare it in light and dark mode.

Additional resources