Skip to main content

Design dark mode-friendly emails

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:

Dark_mode_email_light_version_en-us.jpg Dark_mode_email_dark_version_en-us.jpg

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:

Email platform Technique used
Apple Mail (MacOS)

Unchanged

Your email will not be affected when the dark mode is enabled.

iPhone / iPad (iOS 13)
AOL
Yahoo Mail
Gmail Android app

Partially inverted

Your email will appear with darker backgrounds and lighter text, while parts that are already dark remain dark.

Outlook app (iOS / Android)
Outlook 2019 (MacOS)
Outlook.com
Office 365 (MacOS)
Gmail iOS app

Fully inverted

Your email will invert light backgrounds to dark and invert existing dark backgrounds to light.

Outlook 2019 (Windows)
Outlook 2021 (MacOS / Windows)
Office 365 (Windows)
Windows Mail

Optimize your emails for dark mode

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

💡 Good to know
We suggest you keep it simple when designing your emails, especially for the text of your mail it is better to use the default black font.

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.

Dark_mode_email_png_model_en-us.png

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:

Dark_mode_email_example_transparent_PNG_en-us.jpg

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.

Dark_mode_email_crop_images_2_en-us.png

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:

Dark_mode_email_glow_image_dark_en-us.jpg

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.

Dark_mode_email_background-color_en-us.png

Dark_mode_email_background-color_result_en-us.png

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.

Dark_mode_email_preview_en-us.png

🤔 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.

💬 Was this article helpful?

2 out of 4 found this helpful