Dark mode for email content dark-mode
Dark mode allows a supporting email client or app to display emails with darker backgrounds and lighter colors for text, buttons, and other visual elements. This type of display can 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 is now an important consideration in modern email design to ensure that content remains legible and visually appealing for all users.
As you create your email content in the Journey Optimizer B2B Edition visual design space, you can switch to the Dark mode view. In this view, you can also define specific custom settings for supporting email clients when their dark mode is enabled.
Email client considerations
There is significant variance in the way that different email clients and apps apply dark mode. For this reason, you should consider the expectations for dark mode rendering with caution. Before you use dark mode in the email design space, consider the following email client use cases:
Some email clients do not support this feature at all, such as:
- Yahoo! Mail
- AOL
If you define dark mode custom settings in the email design, these email clients cannot display any dark mode rendering.
Some email clients systematically apply their own default dark mode to all received emails. They automatically adjust colors, backgrounds, images, and other elements according to their dark mode settings and external settings are not possible. These clients include:
- Gmail (Desktop Webmail, iOS, Androidâ„¢, Mobile Webmail)
- Outlook Windows
- Outlook Windows Mail
In this case, the client dark mode settings override the custom dark mode settings that you define in Journey Optimizer B2B Edition
Many of the most popular 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 B2B Edition email styles. This list of clients includes:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Androidâ„¢
In this case, the specific settings you define in the Journey Optimizer B2B Edition are rendered. However, some restrictions could apply according to each email client. For example, some clients (such as Apple Mail 16 (macOS 13)) do not generate dark mode if images are present in the email content.
For optimal results, test your content with the email clients that you are targeting. To see a simulation that comes as close as possible to the final result for each client, use the Litmus email test rendering integration in the email design space.
Design for dark mode
As you style your email content for dark mode in Journey Optimizer B2B Edition, the visual design space provides two types of tools:
-
Use the preview function to review the default dark mode rendering for most supporting email clients.
-
If you want to override the default settings of supporting email clients, define and apply custom dark mode settings to your email content. Learn more
Preview default dark mode preview-dark-mode
-
Open the email content in the email design space.
At the top right of the canvas, there is a light-dark selector that toggles the content display between light (default) and dark mode.
-
Change the selector to Dark mode (
The canvas displays the content using the default dark mode preview.x
By default, the dark mode preview applies the
full color invertcolor scheme to all elements except images and icons. This color scheme detects areas with light and dark elements and inverts them. Light backgrounds become dark and dark text becomes light, or dark backgrounds become light and light text becomes dark.
Define custom dark mode settings custom-dark-mode
After switching to dark mode, you can choose to edit specific styling elements of your content that are displayed only when dark mode is enabled in the recipient’s email client (provided it supports that feature).
The custom dark mode styling in the email design space uses the @media (prefers-color-scheme: dark) CSS query, which detects if the email client is set to dark mode and applies the dark-themed design that is defined in your email.
To define custom dark mode settings:
-
If needed, move the selector to Dark mode (
-
Edit any styling color attributes, such as text, backgrounds, or buttons.
-
For the images and icons, define specific assets for dark mode only.
You cannot change the colors of images and icons, but you can define alternative assets to be used for dark mode. You can experiment with different color combinations for your icons or make adjustments for color and saturation for photographic images.
Select any image and switch to Dark mode using the dedicated toggle in the Settings pane. Then, select a different image asset.
See Add image assets for more information about selecting an image asset.
-
At any point during your design changes, select Switch to live view to check how your content might render on various device sizes.
From this view, change the selector to Dark mode (
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 could vary depending on the recipient’s email client. -
When your dark mode changes are complete, click Simulate Content.
Use the preview and proofing tools to test your email design. See Preview and test your email content for more information.
-
If you have a Litmus Enterprise account, select Render email to see the final dark mode rendering for various email clients in the Litmus .
See Test email rendering with Litmus for more information.
note caution CAUTION While simulation closely approximates how emails appear in dark mode, actual rendering could 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 these best practices:
Checklist:
- Save logos and icons as PNG files with transparent backgrounds to avoid visible white boxes in dark mode.
- Avoid images with hardcoded white or light backgrounds.
- If transparency is not an option, place images on a solid background in your design to prevent awkward color inversions.
Checklist:
- 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 that key information is still visible.
Checklist:
- 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 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, which can cause eye strain and could be inverted automatically in some email clients.
- Provide accessible fallback styling if dark mode is not supported.
Checklist:
- Use the dark mode preview in the email design space, which uses inverted color schemes to spot issues early.
- Use a Litmus Enterprise account with the Render email option to simulate your designs across major email clients (such as Apple Mail, Gmail, and Outlook) and see how colors and images behave in dark mode.