[Beta]{class="badge informative"}
Manage dark mode content dark-mode
When designing your emails, the Journey Optimizer Email Designer allows you to switch to Dark mode where you can define specific custom settings. When dark mode is on, the supporting email clients will display the settings that you defined for this mode.
A list of the email clients supporting dark mode is presented in this section.
What is dark mode? what-is-dark-mode
Dark mode allows supported 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 (Apple Mail, Gmail, Outlook, Twitter, Slack), it has become an important consideration in modern email design to ensure content remains legible and visually appealing for all users.
However, it is not possible to guarantee that your email will look exactly the same in dark mode across all devices. Some visual changes may also be caused by the email app or device overriding the original design.
Indeed, the way dark mode is applied by email clients can vary as follows:
-
Not all email clients support this feature.
note note NOTE A list of the email clients not supporting dark mode is presented in this section. -
Some email clients automatically adjust colors, backgrounds, and images. In this case, if you define custom settings in the Email Designer, those settings will probably not be rendered.
-
Other email clients give the option to render custom dark mode (such as with the
@media (prefers-color-scheme: dark)method). In this case, the specific settings you define in the Email Designer should be displayed. Learn how to define custom dark mode settings in the Email Designer in this section.
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:
-
You can get a preview of how the default dark mode will render in most supporting email clients. Learn more
-
If you want to override the default settings of supporting email clients, you can define custom dark mode settings applying to the email you are editing. Learn more
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.
-
From the Email Designer home page, select the Design from scratch option. Learn more
-
Add structures and content components to your content.
-
On top right of the central canvas, switch the toggle to Dark mode.
-
The default dark mode preview displays.
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.
-
Make sure you switch to the Dark mode preview in the Email Designer. Learn how
-
Edit any styling color attributes such as text, backgrounds, button, etc.
-
You cannot change the colors of images and icons, but you can define specific assets for dark mode only. To do so, select any image. Switch to Dark mode using the dedicated toggle in the Settings pane and select a different asset.
-
At any time you can Switch to live view in order to check how your content might render on various device sizes. From this view, select the Dark mode toggle on top of the screen to preview the dark mode version of your content across the different devices.
note caution CAUTION The live view is a generic preview designed to compare how the rendering might look across various device sizes. The final rendering may vary according to the recipient’s email client. -
Once you are satisfied with the changes for dark mode, click Simulate Content.
-
Select Render email and connect to your Litmus account. You can see the final dark mode rendering for various email clients. Learn more on Email rendering.
note warning WARNING While simulation closely approximates how emails will appear in dark mode, actual rendering may differ due to variations in email service providers or device-level settings.
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
-
Avoid images with hardcoded white or light backgrounds.
-
Save logos and icons as PNGs with transparent backgrounds to avoid visible white boxes in dark mode.
-
If transparency is not an option, place images on a solid background in your design to prevent awkward color inversions.
Watch your backgrounds
-
Ensure sufficient contrast between text and background colors for readability in both light and dark modes.
-
Avoid relying on background colors alone for critical content. Some clients override background colors in dark mode, so ensure key information is still visible.
Design accessible content in dark mode
-
Use color combinations easy to distinguish for people with color blindness.
-
Use a midtone palette to ensure contrast against both light and dark backgrounds.
-
Use accessible color combinations with high contrast to improve readability and meet Web Content Accessibility Guidelines (WCAG) standards. Use tools like WebAIM’s Contrast Checker to verify color contrast.
-
Avoid thin fonts as it can impact readability. If your brand requires a thin font, bold it in dark mode.
-
Skip pure white on pure black as it can cause eye strain and might be automatically inverted by some email clients.
-
Provide accessible fallback styling if dark mode is not supported.
Test your emails in dark mode environment
-
Use the Email Designer’s dark mode preview which uses inverted color schemes to spot issues early.
-
Use the Email rendering option that leverages Litmus to simulate your designs across major email clients (Apple Mail, Gmail, Outlook) and see how colors and images behave in dark mode.
Email clients supporting dark mode supporting-email-clients
Below is a list of the main email clients supporting dark mode.
Email clients not supporting dark mode non-supporting-email-clients
Some email clients allow users to switch their interface to dark mode, but this setting does not affect how HTML emails are displayed. Regardless of whether the interface is in light or dark mode, your email will render the same. Here is a list of those clients: