Dark mode: your emails look like this

• ¿What is "Dark mode"?
• ¿Why do users use "Dark mode"?
• Email readers that support this option
• How email readers apply "Dark mode" to my emails
  • No change in colours
  • Parcial colour inversion
  • Full colour inversion
  • "Dark mode" support per email provided
• Tips to optimise your emails for "Dark mode"
  • Test the design both on "Dark mode" and light mode
  • Use images with transparent background
  • Add a white outline to black icons and texts

¿What is "Dark mode"?

The "Dark mode" or "Night mode" is a colour scheme that is applied to email readers and consists of using light colours for icons, user interface elements and fonts, on dark background colours. It is an accessibility option available on email readers, as well as in operating systems and apps.

¿Why do users use "Dark mode"?

Dark mode, or dark mode, is a growing trend for many reasons:

• It reduces eyestrain: Light-coloured text on a dark background, especially in low-light environments, means that the user experiences less eyestrain.
• Energy saving: By reducing the brightness of the screen, the battery life is longer.
• Readability: Texts are easier to read for many users.
• Preferences: Many users simply prefer to use interfaces with dark colours.

Email providers that support this option

Users can choose to use "Dark mode" on the following email readers:

• Mobile devices:
  • Apple Mail
  • Gmail app (Android 10 or higher, iOs 13 or higher)
  • Outlook app (Android, iOs)
  • Yahoo app (Android, iOs)
• Desktop apps
  • Apple mail (mac OS)
  • Outlook 2019 (mac OS, windows)
  • Windows 10 Mail
  • Mozilla Thunderbird
• Webmail
  • Gmail
  • Outlook.com
  • Yahoo! Mail
  • Zoho Mail
  • AOL

How email readers apply "Dark mode" to my emails

Not all the email readers apply the "Dark mode" in the same way: some of them only change the user interface, but do not change the colours of our email. Some of them partially invert the colours and some of them change it completely.

No change in colours

Some readers such as Gmail, Yahoo mail and Apple mail only change the colours of their interface when dark mode is applied. This means that the dark mode does not affect how our email is rendered and will be displayed exactly as it is.

Here is an example with Gmail: The design of your email is the same no matter which mode is used:

Parcial colour inversion

In some readers, the dark mode option only detects the areas of your email that use light background colours and inverts the background colour to dark and the texts to light colours. Areas that already use dark background colours are not changed. The rest of the elements, either.

This is the case for example of Outlook.com. If you look closely, you will see that the border of the black button has been maintained and no changes have been made to the dark backgrounds:

Total colour inversion

Other mail readers, such as Gmail for iOS or Zoho mail, invert all colours. Meaning that they not only change light backgrounds to dark, but dark backgrounds to light. This colour scheme is the one that applies the most radical changes to the design of our email.

Dark mode support per email reader

Below is a table of how each email reader behaves when applying dark mode. This table may change over time, as many readers, such as Gmail, use user feedback to make improvements to their dark mode theme.

Tips for optimising your emails for dark mode

Not all readers use the same colour scheme when the user is working with the dark mode. That is, the colours used by each reader to replace the original colours differ from each other. To avoid this from happening, we can specify in the html how we want our emails to be rendered in dark mode, but not all readers allow this (for example, Gmail does not support it).

If we know how to work with html code, we can use these two methods to tell the reader how to display our email:

@media (prefers-color-scheme: dark)

[data-ogsc] and/or [data-ogsb], for Outlook app (Android)

However, there are a number of techniques that we can apply to our emails so that they display correctly in dark mode without needing to modify the html.

Test the design in dark mode and light mode

Test your campaign to make sure that your design and the readability of the content is not affected in case the user has the dark mode active. As we have mentioned, each reader applies its own colour scheme, so it is advisable to test your email in the most popular readers to see the result in each of them.

Use images with transparent background

If you use images with a transparent background, when the colours are inverted with the dark mode, the design of your newsletter will look more uniform and will not have such a visible effect.

In the following image you can see the difference between using the logo with and without background:

Add a white outline to black icons and texts

If you use black icons or text in the image, they will not be visible in dark mode. To avoid this, add a white outline. In light mode they will not be visible and in dark mode they will be displayed correctly.

Email readers are constantly changing, especially when it comes to dark mode, applying improvements and modifications to their colour schemes to improve the user experience for those who use this mode to view their emails.  For this reason, it is really important to test our emails to ensure that they will render correctly in this mode in the most popular readers.