Manage dark mode content dark-mode

When designing your emails, the Journey Optimizer Email Designer allows you to switch to the Dark mode view.

In this dark mode view, you can also define specific custom settings which will be displayed by the supporting email clients when their dark mode is on.

What is dark mode? what-is-dark-mode

The way dark mode is rendered in the various email clients is complex. Let’s first define dark mode.

Dark mode allows the supporting email clients and apps to display emails with darker backgrounds and lighter colors for text, buttons and other UI elements. It enables to reduce eye strain, save battery life, and improve readability in low-light environments for a more comfortable viewing experience.

As a growing trend across major operating systems and apps, it has become an important consideration in modern email design to ensure content remains legible and visually appealing for all users.

Guardrails guardrails

The expectations in terms of dark mode rendering must be considered with caution as the way it is applied by the different email clients can vary a lot.

Before using dark mode in the Journey Optimizer Email Designer, it is crucial to understand how the main email clients handle it. There are three cases to distinguish:

Clients not supporting dark mode not-supporting

Some email clients do not support this feature at all, such as:

Whether you define dark mode custom settings or not in the Email Designer, these email clients never display any dark mode rendering.

Clients applying their own dark mode default-support

Some email clients systematically apply their own default dark mode for all emails that are received. Colors, backgrounds, images, etc. are automatically adjusted with the dark mode settings specific to the email client, meaning that no external modification is possible.

These clients are for example:

In this case, if you define custom dark mode settings in the Email Designer, those settings are overriden with the email client settings.

It is important to understand that these email clients do handle dark mode, but your specific dark mode design will not be rendered.

Clients supporting custom dark mode custom-support

Other email clients offer the option to render custom dark mode with the @media (prefers-color-scheme: dark) query, which is the method used by the Journey Optimizer Email Designer.

Here is a list of the main clients handling this option:

In this case, the specific settings you define in the Email Designer should be displayed.

However, some restrictions may apply according to each email client. For example, some clients such as Apple Mail 16 (macOs 13) will not generate dark mode if images are present in the email content.

For optimal results, test your content with the email clients you are targeting. To see a simulation that comes as close as possible to the final result for each client, use the Email rendering option in the Email Designer.

Dark mode in the Email Designer dark-mode-email-designer

When it comes to dark mode in the Email Designer, there are two aspects to consider:

Preview default dark mode preview-dark-mode

To access dark mode in the Email Designer and get a preview of the default dark mode settings, follow the steps below.

By default, the Email Designer dark mode preview applies the ‘full color invert’ color scheme to all elements except images and icons.

It means that it detects areas with light and dark elements and inverts them, so that light backgrounds become dark and dark text becomes light, whereas dark backgrounds become light and light text becomes dark.

Define custom dark mode define-custom-dark-mode

After switching to Dark mode, you can choose to edit specific styling elements of your content that will be displayed only when dark mode is enabled in the recipient’s email client - provided it supports that feature.

To leverage the Email Designer custom dark mode styling, Journey Optimizer uses the @media (prefers-color-scheme: dark) CSS query, which detects if the user’s email client is set to dark mode and applies the dark-themed design that was defined in your email.

To define custom dark mode settings, follow the steps below.

Best practices best-practices

As dark mode adoption increases across major email clients, it is essential to consider how your emails render in both light and dark environments - whether you are using custom dark mode or not.

Dark mode can alter colors, backgrounds, and images — sometimes overriding design choices. To ensure visual consistency, accessibility, and brand integrity, follow the best practices listed below.

Optimize your images and logos

Watch your backgrounds

Design accessible content in dark mode

Test your emails in dark mode environment