Designing for dark mode
Go to the dark side
Rikke Søndergaard avatar
Written by Rikke Søndergaard
Updated over a week ago

Dark Mode

In this Article

What is Dark Mode?

Dark mode, in recent years this has been one of the hottest topics in the digital design industry.

But what is Dark mode? Dark mode is a feature which allows users to switch their color scheme of certain applications/devices to a darker palette, for example Facebook, Twitter, Instagram, or the more popular operating systems and many more.

This feature can help reduce eye straining for users in low light environments but could also reduce the usage of battery on devices that use OLED or AMOLED screens.

With Dark mode available for email clients, this will affect the emails you send out and or receive.

How will the dark mode feature affect your emails?

Each email client renders mail differently and this is no exception when it comes to the dark mode feature. In this mode, it switches so the email elements are using light colored UI elements, font, and icons on dark backgrounds.

There seems to be 3 types of color schemes that the email clients use to apply Dark mode to emails:

No color changes

  • There are some email clients/devices that lets you change the UI to Dark mode without it impacting on how your HTML email is rendered:

    • Apple Mail

    • iPhone

    • iPad

Partial Color Invert

  • This mode tries to locate areas that have a light-colored background. If it finds an area with light colored background, it turns the background into dark and the dark text becomes light.

  • Areas that already have dark background are usually ignored and the client will not convert it to light-color, which results in this being a complete full dark mode design - does this.

Full Color Invert

  • Full Color Invert mode impacts not only the areas with light colors, but it also impacts the areas with dark color of your email, which means, whatever color you use in the template will be affected by the Dark mode feature.

  • Email clients that do this are for example: Gmail app(iOS) Outlook 2019(windows)

What can you do to make the email look better in dark mode when working in Apsis One?

When working with the email tool in Apsis One, there are some actions you can take to make the email look better in dark mode.

Optimize logos and images with outline

For logos with transparent background color, you can add an outline of the dark part of the logo. When an email client tries to either Partially Color Invert or Full Color invert your template, it will prevent the logo from becoming almost invisible.

If you are adding images into one of your emails that doesn’t have a transparent background, make sure that there is enough space around the central point of your image. This is to give more air around the image and avoid some weird contrast.

What's next?

Did this answer your question?