Preview & Optimize Emails for Dark Mode

Dark Mode has become a widely adopted display setting across devices and platforms. With email clients like Gmail, Outlook, and Apple Mail supporting Dark Mode, it's important to understand how it impacts email design and how to optimize your campaigns accordingly.

In this article, you'll learn what dark mode is, how to preview your emails in dark mode, and best practices for optimizing your designs for both light and dark modes.

Dark mode is a display setting that uses a dark background with light text, designed to reduce eye strain in low-light environments. Since its introduction, Dark Mode has gained popularity across major platforms (iOS, Gmail, Outlook) for reasons such as:

To access the dark mode preview in Omnisend:

You can preview your email using two types of color inversion: Full and Partial. The sections below explain what each type means and how email clients handle dark mode.

Email clients apply Dark Mode in different ways, affecting how colors display. Understanding these variations can help create designs that look good in both Dark and Light modes.

Reverses all colors (light to dark and vice versa). Typically applied by:

Adjusts only specific elements, such as text, while leaving images and some brand colors untouched. This approach is common with:

The table below shows how different email clients handle dark mode as of October 2023. Use this as a reference when designing your emails.

Some email clients (Apple Mail, Gmail apps, Office 365 Mac) allow you to force background colors using custom CSS in the HTML item. However, this technique does not work in Outlook Desktop, Windows Mail, or Office 365 (Win), which apply full inversion regardless. Even where supported, text colors will still invert automatically.

To add custom CSS in Omnisend:

Keeping text content as black on a white background is a simple yet effective way to maintain readability in both Light and Dark Modes. This minimizes unwanted color changes and lets you focus on creative design elements outside the main text area.

By including specific Dark Mode styles in your templates, you can make sure that all your emails display correctly—even if you forget to adjust styles for Dark Mode.

Here’s a quick example of CSS base styles:

Use the Preview feature (dark mode toggle switched) in Omnisend to preview your emails for popular clients, such as Gmail, Outlook, and Apple Mail, and different operating systems. Check for readability, brand colors, and correct display of logos and images.

Simple backgrounds (black for Dark Mode and white for Light Mode) enhance readability and reduce the risk of design mismatches across email clients. Incorporate subtle contrasts or shadows for extra depth without compromising Dark Mode functionality.

Some email clients (like Gmail iOS and Outlook Desktop) apply full color inversion that overrides your custom design, even if you've designed for both modes. This is an email client limitation, not an Omnisend issue.

Workaround: Create separate email blocks for mobile and desktop using visibility settings, and design the mobile blocks with darker tones that invert less aggressively in dark mode. Always preview in both Full and Partial dark modes, and send test emails to yourself on mobile and desktop to see the final rendering.

The same email client can apply different dark mode inversion types depending on the device. For example, Gmail iOS uses full color inversion (reversing all colors), while Gmail Android uses partial inversion (adjusting text and some backgrounds). This is controlled by the email client's dark mode logic, not by Omnisend.

Solution: Preview your email in both Full and Partial dark modes in Omnisend, and send test emails to yourself on mobile and desktop before sending to your audience.

The dark mode preview gives you a close approximation of how your email will render in Full and Partial inversion modes, but email client rendering can vary slightly.

Solution: Always send a test email to yourself and view it in actual inboxes (Gmail, Outlook, Apple Mail on mobile and desktop) to confirm the final appearance before sending to your audience.

Can I prevent my emails from displaying in dark mode?

No, you cannot prevent emails from displaying in dark mode or force a white background across all email clients. Dark mode is controlled by each subscriber's email client and device settings (Gmail, Apple Mail, Outlook, etc.), not by the sender. Some email clients apply full color inversion (turning white backgrounds black), while others apply partial inversion. Instead of trying to prevent dark mode, design your emails to look great in both light and dark modes using our dark mode preview feature.

How can I force my background colors to stay the same in dark mode?

Omnisend does not have a built-in feature to force background colors. You can add custom CSS using the HTML item in the email builder to apply forced background colors for some email clients (Apple Mail, Gmail apps). However, this technique does not work in Outlook Desktop, Windows Mail, or Office 365 (Win), which apply full color inversion regardless. Even where supported, text colors will still invert automatically. To add custom CSS: Go to Add Elements → drag the HTML item into your email → paste your CSS code in the editor that appears on the right.

Why does my white logo disappear in dark mode?

If your logo is white or very light and placed on a white background, it will disappear in dark mode because the background inverts to black, but the logo remains white (or becomes darker). To fix this, add a colored or transparent background behind your logo, or apply a light outline to ensure it remains visible in both light and dark modes. Always preview your email in dark mode before sending.

Where do I add dark mode CSS code in Omnisend?

To add custom CSS in Omnisend: Open your email in the Email Builder, go to Add Elements on the left, drag the HTML item into your email, and the HTML editor will appear on the right. Paste your dark mode CSS code there. Note that some email clients may ignore custom CSS entirely – always test your email in real inboxes.

Why do my emails look different on mobile compared to desktop in dark mode?

The same email client can apply different dark mode inversion types depending on the device. For example, Gmail iOS uses full color inversion (reversing all colors), while Gmail Android uses partial inversion (adjusting text and some backgrounds). This is controlled by the email client's dark mode logic, not by Omnisend. To ensure your email looks good across devices, preview it in both Full and Partial dark modes in Omnisend, and send test emails to yourself on mobile and desktop before sending to your audience.

What if my custom colors still look wrong after following this guide?

Some email clients (like Gmail iOS and Outlook Desktop) apply full color inversion that overrides your custom design, even if you've designed for both modes. This is an email client limitation, not an Omnisend issue.

Workaround: Create separate email blocks for mobile and desktop using visibility settings, and design the mobile blocks with darker tones that invert less aggressively in dark mode. Always preview in both Full and Partial dark modes, and send test emails to yourself on mobile and desktop to see the final rendering.

Does the dark mode preview show exactly how my email will look in inboxes?

The dark mode preview gives you a close approximation of how your email will render in Full and Partial inversion modes, but email client rendering can vary slightly. Always send a test email to yourself and view it in actual inboxes (Gmail, Outlook, Apple Mail on mobile and desktop) to confirm the final appearance before sending to your audience.

Why do my image backgrounds change color in dark mode?

Email clients like Gmail and Outlook on mobile apply color inversion to images with very bright backgrounds (white, yellow, etc.), even if the image is not transparent. This is controlled by the email client, not Omnisend. To reduce this, use images with non-pure-white backgrounds or add padding/borders around key elements.

Can I set dark mode colors in Brand Assets?

No. Brand Assets (Accent, Dark, Light colors) apply to email templates but do not control dark mode rendering across email clients. To optimize for dark mode, use design best practices or add Custom HTML with dark mode CSS.