Dark Mode: All you need to know

How does Dark Mode change my e-mails?

What is Dark Mode?

Dark Mode is a setting that changes light backgrounds and dark font colors to dark backgrounds and light font colors. Icons and UI elements also change their colors in Dark Mode. Since 2018 and the introduction of Dark Mode on all MacBooks, the color trend is on everyone's lips. In 2019, the most popular email clients, such as Gmail and Outlook, took over.

The advantages: Not only your eyes and the battery life of the end device are protected. For many people, the reversed color scheme is more legible in a night-time environment or represents personal design preferences.

However, there is a catch

Every e-mail client has its own dark mode scheme. Thus designers and developers are faced with a new challenge: Email can look perfect in one mailbox and be unreadable in another.

How does Dark Mode change my e-mails?

There are three ways how your newsletter design can be changed. Unfortunately, the change does not depend on you, but on the e-mail clients of your users.

No colour changes

With this variant, dark mode is activated on the user interface of the e-mail client. However, the dark color scheme has no influence on the design of your mail - it remains unchanged, no matter if Light or Dark Mode. However, there is one exception: e-mails with plain text cause dark mode changes within the mail. The background will turn dark and the font color will become light. To prevent this, you should use an additional image.

Partial color changes

Here the areas of your newsletter are darkened, which originally have a light color. Backgrounds, icons and UI elements are affected. A dark font on a formerly light background will also be colored light to make it more legible.

Complete color changes

This color change is based on the above variant. However, not only light areas and dark fonts are changed here, but also dark backgrounds. Here it can happen that original dark backgrounds suddenly get a white color change.

Dark Mode displays in the most common e-mail clients

3 tips for a better use of Dark Mode

1. test your newsletter in Dark Mode

Make sure that everything is legible. Logos, other icons and pictures should be recognizable. Pay special attention to the Call-To-Action button. Is it still in focus and perfectly visible?

Test your e-mails with the most common e-mail clients such as Gmail, Apple Mail and Outlook on your desktop and smartphone as well as on Android and Apple devices.

2. optimize photos and graphics

Photos should always be saved as PNG or GIF. Transparencies are allowed here. It is extremely important that round images are saved as transparent to avoid white edges. Add a thin, light frame to dark icons and UI elements so that you can be sure that they are also optimally visible in dark mode.

3. JUNE supports you

Still in the dark? JUNE supports you with all the problems that can arise in the dark fashion world. Furthermore, it automatically selects the optimal rendering while sending your mails.