Dark Mode: Everything You Need To Know

Dark Mode has been present in the email marketing world for several years. Besides countless advantages for users, the colour scheme presents some challenges for developers and designers. We bring some light into the dark: Read here what Dark Mode is exactly and collect three quick tips for a successful handling of Dark Mode.

Written by Hannah Krüger

How Does Dark Mode Change My Emails?


What Is Dark Mode?

Dark Mode is a setting that changes light backgrounds and dark font colours to dark backgrounds and light font colours. Icons and UI elements also change their colours in Dark Mode. Since 2018 and the introduction of Dark Mode on all MacBooks, the colour 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 colour scheme is more legible in a nighttime 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 Emails?

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 color changes

With this variant, dark mode is activated on the user interface of the email client. However, the dark colour 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: emails with plain text cause dark mode changes within the mail. The background will turn dark, and the font colour 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 colour. Backgrounds, icons, and UI elements are affected. A dark font on a formerly light background will also be coloured light to make it more legible.


Complete colour changes

This colour 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 colour change.


Dark Mode Displays In The Most Common Email 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 emails 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.


6 Tipps für die Newslettergestaltung in Outlook