Best practices for dark mode and light mode email design in HTML/CSS

As dark mode (or night mode) becomes more prevalent in modern devices and email clients, designers and developers face a new challenge: how to ensure their email templates look great in both light mode and dark mode. Not handling dark mode correctly can lead to poor visibility of text, broken logos, or inverted colors that ruin the email’s appearance and functionality.

This guide will explain the challenges developers encounter with dark mode email rendering and offer detailed, actionable solutions to ensure your HTML/CSS email designs are responsive and effective across multiple platforms—especially popular clients like Gmail, Outlook, and Apple Mail.
If you want to know more about screen-size responsive design for emails, we have a dedicated guide.

Why dark mode in emails matters

Dark mode is a display setting that uses a dark color palette for backgrounds and lighter text, which reduces eye strain in low-light environments and can save battery life on OLED devices. With millions of users opting for dark mode on their devices, it is essential for email developers to account for this preference.

The challenge? Email clients often automatically adjust the content for dark mode, which can lead to unintended results. For instance:

• Text and background colors may invert, resulting in poor readability.

• Images, particularly icons and logos, may not display properly or become invisible.

• Links may blend in with the background if the color contrast isn’t handled correctly.

Let's dive into the specific issues and solutions.

Common Challenges in Dark Mode Email Design

Automatic Color Inversion

Many email clients will automatically invert text and background colors in dark mode:

• Text: Black text turns white, and white text turns black.

• Backgrounds: Light-colored backgrounds are often darkened.

• Images (SVGs, PNGs): Some images may get inverted or become hard to see if they rely on specific color schemes.

Inconsistent Behavior Across Email Clients

Not all email clients handle dark mode the same way. For example:

• Gmail (Android/iOS): Automatically inverts email colors in dark mode.

• Apple Mail: Applies dark mode more aggressively by changing text and background colors.

• Outlook: Handles dark mode differently on mobile and desktop, sometimes leaving images untouched while changing other elements.

Issues with Images and SVGs

Images, especially icons and logos, are heavily affected by dark mode:

• SVGs may invert unexpectedly or lose visibility.

• Raster images (PNG, JPG) can become difficult to see, particularly if their colors don’t adapt well to both light and dark backgrounds.

Solutions for Dark Mode Email Design

To handle these challenges effectively, follow these best practices to ensure your emails are optimized for both dark mode and light mode.

Use CSS Media Queries for Dark Mode Detection

Leverage CSS media queries to apply different styles based on whether the user is in dark mode or light mode:

@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #ffffff;
    }
    a {
        color: #1e90ff; /* Light blue for contrast */
    }
}
@media (prefers-color-scheme: light) {
    body {
        background-color: #ffffff;
        color: #000000;
    }
    a {
        color: #0000ff;
    }
}

This allows your email to adapt to the user’s theme preferences and ensure proper contrast in both modes.

Optimize SVGs for Dark Mode

SVGs should use currentColor for their fill and stroke properties, allowing them to dynamically adapt to the text color surrounding them. This ensures that SVGs automatically adjust when the email switches between dark and light modes:

<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="..."/>
</svg>

In addition, you can create dual-tone SVGs or use CSS to apply different styles for dark mode. For example, you could use a different fill color for icons based on the theme detected:

@media (prefers-color-scheme: dark) {
    .logo {
        fill: #ffffff;
    }
}
@media (prefers-color-scheme: light) {
    .logo {
        fill: #000000;
    }
}

If you want to know more about how to handle images in general when it comes to email design and development you can read our dedicated guide.

Avoid Relying on Background Images

Many email clients don’t support background images well, particularly in dark mode where color inversions might affect them. Instead:

• Use solid background colors that work across both light and dark modes.

• If you need a background image, make sure it has enough contrast in both modes and provide a fallback color using the background-color CSS property.

Ensure Text and Links Are Legible

Text and links often blend into the background if not carefully handled. To avoid this:

• Use high contrast colors for links that are visible on both dark and light backgrounds.

• Add underline to links in dark mode to make them more noticeable.

• Test your emails with different color palettes to ensure text is always readable.

Test Emails Across Multiple Clients

Given the wide variation in how email clients handle dark mode, testing your emails in tools like Litmus or Email on Acid is crucial. These tools allow you to preview how your emails will look in both dark and light modes across major clients like Gmail, Outlook, and Apple Mail.

Handling Specific Email Clients

Gmail

• Automatically inverts email colors in dark mode.

• Use media queries and inline styles to override Gmail’s default behaviors where needed.

Apple Mail

• Apple Mail aggressively modifies text and background colors in dark mode.

• Focus on ensuring strong text contrast and avoid light background images.

Outlook

• Outlook’s dark mode behavior varies between desktop and mobile. For desktop clients, you may need to rely on VML for background images, while mobile clients will handle colors differently.

Best Practices Recap

1. Use media queries (prefers-color-scheme) to detect dark mode and light mode.

2. Optimize SVGs with currentColor to dynamically adjust to text colors.

3. Avoid light-colored background images; use solid colors for better compatibility.

4. Ensure high contrast for text and links to maintain readability in both modes.

5. Test your emails across all major email clients using tools like Litmus or Email on Acid to guarantee the best user experience.

Designing emails that work seamlessly in both dark and light modes is crucial in today’s mobile-first world. By using CSS media queries, optimizing SVGs, ensuring contrast in text and links, and testing extensively, you can create email templates that are visually appealing and fully functional in both display modes.

For further reading, check out our guide on HTML/CSS grid layouts for email design, which dives deeper into the technical constraints and offers additional tips for creating robust email templates.

FAQ Section

How do email clients handle dark mode?

Most email clients automatically invert colors in dark mode, which can result in unexpected color shifts for text, background, and images.

Can I control how my email looks in dark mode?

Yes, by using CSS media queries like prefers-color-scheme, you can detect dark mode and apply specific styles to ensure your email looks great in both light and dark modes.

Why do my images look strange in dark mode?

Some email clients automatically invert colors for images. By using the right image formats (like SVG with currentColor) and controlling styles, you can prevent this from happening.

What’s the best way to make links visible in dark mode?

Ensure that links have a high contrast color and consider underlining them in dark mode to improve visibility.

How can I test my emails for dark mode?

Use testing tools like Litmus or Email on Acid to preview how your emails look in different clients and display modes.