Optimize email for dark mode

Dark mode is a feature that many people enable on their devices, browsers, and email clients. It changes the color scheme of the screen to a dark background with light text and elements. Dark mode can reduce eye strain, improve readability, and save battery life. It’s also sometimes preferred by people with disabilities or in situations that require dimmer lighting. Optimizing your emails for dark mode helps you respect your subscribers’ preferences by delivering emails that look good in both light and dark modes.

Designing for dark mode can be challenging because different email clients handle it differently. Some email clients invert the color of every element in the email. Some only invert the areas with light backgrounds and dark text. Some don’t invert anything at all. This means that your email may look different depending on where and how your subscribers open it.

Use dark mode best practices

To help you design emails that work well in dark mode, we recommend the following best practices:

• Use title and paragraph content blocks in the email builder as much as possible instead of images with text. This helps ensure that email clients can invert the text colors as they relate to their background colors. It also makes your emails more accessible for assistive technology, like screen readers.
• Use PNGs with transparent backgrounds for logos or icons. This prevents them from appearing as solid blocks of color in dark mode. Keep in mind that the colors in the image itself won’t be inverted.
  
• Add a border around your logo that’s the same color as the background in light mode. This makes your logo stand out in both light and dark modes. We recommend consulting with your brand design team before making any changes to your logo.
  
• Use social icons that stand out on both light and dark backgrounds. You can use icons with white fill and transparent backgrounds or icons with a border around them.
• Test your email with as many email clients as you can before sending. You can also use tools like Litmus to preview how your email will look using different devices and email clients. Litmus is also a great source of information on dark mode and email design.

Preview an email in dark mode in Attentive

Attentive provides an option to help you preview how your email will look in dark mode. It shows you how your email will appear when delivered to an email client that inverts the color of every element in the email.

Follow these steps to preview an email in dark mode:

1. While designing an email, click Preview.
   
2. On the preview page, click Preview dark mode.