What Is Dark Mode?
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:
Reduced eye strain in low-light conditions.
Battery conservation on OLED screens.
Enhanced content readability across devices.
Aesthetic preference for a sleek, modern look.
Accessing Dark Mode Preview
To access the dark mode preview in Omnisend, open your email and click Preview in the top right corner. Once in preview mode, switch the toggle to Preview in dark mode.
You can preview your email using two types of color inversion: Full and Partial. This guide will explain the meaning of each type further.
Types of Color Inversion
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:
1. Full Inversion: Reverses all colors (light to dark and vice versa). Typically applied by:
Outlook Desktop (Windows): Full inversion, making the entire background dark and text light.
Gmail Web: Can apply full inversion, especially if the email is not specifically optimized for dark mode.
Yahoo Mail: Similar to Gmail, Yahoo Mail often uses full inversion, inverting both text and background colors for better contrast.
2. Partial Inversion: Adjusts only specific elements, such as text, while leaving images and some brand colors untouched. This approach is common with:
Apple Mail (iOS and macOS): Applies partial inversion, where text changes to lighter colors, but background colors and images generally stay the same unless they’re extremely bright.
Outlook Mobile: Typically uses partial inversion, modifying text, and certain background colors while preserving images.
Gmail Mobile (Android & iOS): Uses partial inversion, often leaving images and background colors untouched while adjusting text color to enhance readability in dark mode.
Sample of color inversion in dark mode. Image credit: https://www.listrak.com/
To maximize readability and brand consistency, design emails with partial and full inversion modes in mind.
Dark Mode Compatibility in Popular Email Clients (as of October 2023)
Email Client | HTML Treatment in Dark Mode | Supports | [data‐ogsc] support | Notable Quirks | |
Apple Mail (MacOS) | No change* | ✓ Yes | ✘ No | ✓ Yes | Pure white (#ffffff) BGs will be inverted if <meta> is present |
iPhone / iPad (iOS 16) | No change* | ✓ Yes | ✘ No | ✓ Yes | Pure white (#ffffff) BGs will be inverted if <meta> is present |
Partial invert | ✘ No | Partial* | ✘ No | Lighter BG colors will be darkened. | |
Outlook 2021 (WinOS) | Full invert* | ✘ No | ✘ No | ✘ No | Special targeting is possible for VML sections. |
Outlook app (iOS) | Partial invert | ✘ No | Partial* | ✘ No | Lighter BG colors will be darkened, and light fonts on a dark background may be darkened. |
Outlook app (Android) | Partial invert | ✘ No | Partial* | ✘ No | Lighter BG colors will be darkened, and light fonts on a dark background may be darkened. |
Gmail app (iOS) | Full invert* | ✘ No | ✘ No | ✓ Yes | Special targeting is possible for some colors and font colors |
Gmail app (Android) | Partial invert | ✘ No | ✘ No | ✓ Yes |
|
Office 365 (Win) | Full invert | ✘ No | ✘ No | ✘ No |
|
Office 365 (Mac) | Partial invert | Partial* | ✘ No | ✓ Yes | Lighter BG colors will be darkened |
Windows Mail | Full invert | ✘ No | ✘ No | ✘ No |
|
Forcing the background color to remain consistent does not impact the font color, which will still invert. The only exceptions to this are clients that fully support @media or [data-ogsc] and the Gmail app, where the color blend fix is effective.
Designing and Coding for Dark Mode in Emails
To improve the Dark Mode experience for your subscribers, here are essential design and coding tips:
Optimize Logos and Images for Dark Mode
Transparent Images: For images with dark text on a transparent background, add a light, translucent outline to ensure the text remains legible if colors invert. This is particularly useful for Gmail and Outlook, which often apply partial or full-color inversion in Dark Mode.
Sample of the logo in dark mode. Image credit: https://www.litmus.com/
Branding in Dark Mode: Use subtle, light elements that are invisible in Light Mode but add a unique, branded touch in Dark Mode.
Non-Transparent Images: Add padding around key elements in non-transparent images to avoid alignment issues when colors change in Dark Mode.
Use Black Text on a White Background for Text Content
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.
Add Base Styles for Dark Mode in Your Email Templates
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:
.darkbg { background-color: black !important; } .h1, .h2 { color: white !important; } .button { background-color: white !important; color: black !important; }
Quick Tip: Using classes like .darkbg for backgrounds and .button for CTA buttons allows for quick updates across multiple emails, ensuring consistency in Dark Mode.
Always Test/Preview Emails in Omnisend
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.
Keep Design Elements Simple and Consistent
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.
Following these steps will help you create visually appealing Omnisend emails optimized for both Light and Dark Modes, providing a consistent and enjoyable experience for all subscribers.