Dark mode is starting to be used more and more, with 34% of users using it for opening emails as of August 2022 (Source: Litmus). This preference is driven by the comfort it provides, reducing eye strain, enhancing content visibility, and many other reasons. Many email recipients opt for dark mode due to those reasons. Therefore, it's crucial to design your emails to be dark mode-friendly.

What is dark mode?

Dark mode is a display setting that can be enabled or disabled on many devices, apps, and operating systems. When activated, it changes the color of the user interface.

As for emails, dark mode inverts the colors of the email recipients' interface and email content. This means that email recipients will experience a dark background or an inverted color for non-dark backgrounds, as well as an inverted text color to prevent it from blending into the background.
Here is an example of an email in light and dark mode:

Which email platforms support dark mode?

Based on the email platform used, emails might be displayed differently in dark mode. This is because emails platforms use three main techniques to enable dark mode:

Optimize your emails for dark mode

Here you will find information on how to optimize your emails for dark mode.

Before you start designing your email in Brevo, there are a few things you can do on your own with your images to make your emails dark mode-friendly:

Use transparent PNGs

Transparent PNGs are images without a background and are often marked by a checkerboard pattern. We recommend you use this type of image for your logo.

Using transparent images allows you to maintain a natural appearance in emails with both white and black backgrounds. Moreover, it enhances the user experience by preventing them from encountering bright backgrounds while reading emails in dark mode.
Here is an example of a do and don't:

Crop the images like a pro

If your images are not PNG (meaning they don't have a transparent background), consider how they will look in dark mode. For example, if the background of your image is cropped close to the logo or text, your email won't look professional in dark mode, as you can see in the example below. To avoid that, make sure to crop your image with enough background or white space around it.

Add glow, borders, or shadows to your dark PNGs

Add glow, borders, or shadows to your dark PNGs to ensure that they can be seen in dark mode regardless of the background color. Especially if you are using a dark logo on a white background in light mode, you can add a glow, a border, or a shadow that matches the background color. There are online tools that let you add them. 
Here is an example of a text PNG with glow:

Add background color to images

If you don't want or can't add glow, border, or shadow, you can add a colored background from Brevo's Drag & Drop editor when designing your email. Add a background color to your style block and choose lighter shades like grey to ensure visibility.

Preview and test your email in dark mode

Before sending your email, we recommend you preview it on different email platforms. This can be done directly from Brevo after designing your email and allows you to check how your email will look, including in dark mode. Note that previews are not always accurate, we recommend you send yourself a test email if you have enabled dark mode on your devices. To learn more, check our dedicated article Preview and test your email campaign.

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.