Turning Off Dark Mode for HTML Emails with CSS

In recent years, dark mode has become a popular feature across various devices and email clients. While it offers a visually appealing and eye - friendly experience in many cases, it can cause issues for HTML emails. Some email designs might not display correctly in dark mode, with text and background colors inverting unexpectedly. In this blog post, we will explore how to use CSS to turn off dark mode for HTML emails, covering fundamental concepts, usage methods, common practices, and best practices.

Table of Contents

  1. [Fundamental Concepts](#fundamental - concepts)
  2. [Usage Methods](#usage - methods)
  3. [Common Practices](#common - practices)
  4. [Best Practices](#best - practices)
  5. Conclusion
  6. References

Fundamental Concepts

Dark Mode Behavior in Email Clients

Email clients that support dark mode often have a built - in mechanism to invert colors in an HTML email if they detect that the email is not optimized for dark mode. This inversion can make text hard to read and images look strange.

CSS and Email Rendering

CSS is a powerful tool for styling HTML emails. However, different email clients have varying levels of CSS support. When dealing with dark mode, we use specific CSS properties to ensure that the email retains its intended colors regardless of the device’s dark mode setting.

Usage Methods

Using the color - scheme and forced - color - adjust Properties

The color - scheme property can be used to indicate the color schemes an element can support. In the context of HTML emails, setting it to light can help prevent dark mode inversion. The forced - color - adjust property can be used to override the browser’s automatic color adjustments.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <style>
        body {
            color - scheme: light;
            forced - color - adjust: none;
            background - color: #ffffff;
            color: #000000;
        }
    </style>
</head>

<body>
    <h1>My Email Content</h1>
    <p>This is the body of my HTML email.</p>
</body>

</html>

Inline CSS

Inline CSS is a reliable way to style HTML emails as many email clients have better support for it. You can directly apply the color - scheme and forced - color - adjust properties inline.

<!DOCTYPE html>
<html lang="en">

<body style="color - scheme: light; forced - color - adjust: none; background - color: #ffffff; color: #000000;">
    <h1>My Email Content</h1>
    <p>This is the body of my HTML email.</p>
</body>

</html>

Common Practices

Testing Across Email Clients

Since different email clients have different levels of CSS support, it is crucial to test your HTML email in multiple clients such as Gmail, Outlook, Apple Mail, etc. Tools like Litmus and Email on Acid can be used for comprehensive email testing.

Fallback Colors

Even when trying to turn off dark mode, it’s a good practice to provide fallback colors. For example, if an email client does not support the color - scheme property, having explicit background - color and color values ensures that the email is still readable.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <style>
        body {
            color - scheme: light;
            forced - color - adjust: none;
            background - color: #ffffff;
            color: #000000;
        }
    </style>
</head>

<body>
    <h1 style="color: #000000;">My Email Content</h1>
    <p style="color: #000000;">This is the body of my HTML email.</p>
</body>

</html>

Best Practices

Keep CSS Simple

Complex CSS may not be supported by all email clients. Stick to basic CSS properties and avoid using advanced features like CSS animations or gradients.

Use Alt Text for Images

In case the colors of images are affected by dark mode, providing descriptive alt text ensures that the content is still understandable.

<img src="example.jpg" alt="A description of the image">

Conclusion

Turning off dark mode for HTML emails is an important aspect of email design to ensure consistent and readable content across different devices and email clients. By understanding the fundamental concepts, using the appropriate CSS properties, following common and best practices, you can create HTML emails that look great in both light and dark mode environments. Remember to test your emails thoroughly to guarantee a seamless user experience.

References