Dark Mode dark-mode

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

In Dark mode, you can define specific custom settings to be displayed by supporting email clients when their dark mode is on.

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

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

Guardrails guardrails

Dark mode rendering can vary significantly in different email clients.

Before using dark mode, it is important 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, these email clients do not 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 dark mode settings specific to that email client. No external modification is possible.

Some examples are:

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

So while these email clients do handle dark mode, your specific dark mode design will not be rendered.

Clients supporting custom dark mode custom-dark-mode

Some 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 Marketo Engage Email Designer.

The main clients handling this option are:

The settings you define in the Email Designer should be displayed.

Some restrictions may apply according to each email client. For example, some clients (e.g., Apple Mail 16) will not generate dark mode if images are present.

For optimal results, test your content in the email clients you are targeting. To see a simulation in each client, use the Email rendering feature 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

Learn how to access dark mode in the Email Designer and get a preview of the default dark mode settings.

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

That means 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, Marketo Engage 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 use 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