Inverting Colors in Email Campaigns: Why It Matters

In a fiercely competitive world, users have become increasingly demanding of the companies they engage with. This means that every detail counts, especially those that influence content perception. If the text is poorly visible, recipients are unlikely to read your email. By tailoring email campaigns to users' screens, you significantly increase the chances of capturing their attention and ultimately converting them into customers.

In this post, we will explain how color inversion works in emails and how to properly configure the transition to Dark Mode.

What is Dark Mode in email campaigns

Contrary to popular belief, color inversion does not involve a complete overhaul of the colors used. Instead, it entails a subtle shift in shades. The original colors are enhanced to provide better contrast and ensure readability in the dark version. For instance, blue remains blue, and yellow remains yellow.

Email clients that support Dark Mode include:

Types of color inversion in emails

Email service providers implement color inversion based on their own rules or may choose not to make any changes when switching to Dark Mode. Here are the different options you may encounter:

• No changes in Dark Mode. Some email services keep the emails unchanged, preserving their original design. This means that the emails will appear the same regardless of whether Dark Mode is enabled or not.

• Partial color inversion. Certain email platforms automatically identify elements within emails that have a light background and convert them to a darker shade. However, blocks or sections that already have dark colors, such as black, dark gray, or other dark shades, will remain unaltered.

• Full color inversion. This option involves a complete color inversion in all sections of the email. Both light and dark elements are adjusted to suit Dark Mode, resulting in a fully transformed email that offers a more comfortable reading experience in low-light conditions.

Why is it important to adapt emails for Dark Mode

Adapting emails for a dark theme is not always a straightforward task; it requires resources such as time and coding knowledge. Additionally, email clients may change their Dark Mode rules, so if you decide to “join the dark side," you will need to stay updated on any modifications.

Benefits of adapting emails for Dark Mode:

Adapting Email Campaigns for Dark Mode Without Code

Here are some simple design tips for adapting emails to the dark theme:

The logo opaque background contrasts with the black background in Dark Mode

Inverting colors in emails using media queries and meta tags

To achieve accurate and consistent color inversion in emails, specific code is required. Meta tags and media queries are added to the email's code to control its appearance in both dark and light themes.

How to set up color inversion

For email clients that do not support media queries:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

With media queries:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
      /* Normal styles */
      @media (prefers-color-scheme: dark) {
            /* Dark mode styles */
      }
</style>

Color configuration

For example, if you have an email with a white background and blue buttons that should not change color in Dark Mode, you can use the following code for configuration:

<style>
      .normal {
            background-color: white;
            color: blue;
      }
      .themed {
            color: blue;
      }
      @media (prefers-color-scheme: dark) {
            .themed {
                  background-color: white;
            }
      }
      @media (prefers-color-scheme: light) {
            .themed {
                  background-color: black;
            }
      }
</style>

Replacing images for Dark Mode

<style>
      :root {
            color-scheme: light dark;
            supported-color-schemes: light dark;
      }
      @media (prefers-color-scheme: dark) {
            .lightimage {
                  display: none !important;
            }
            .darkimageWrapper,
            .darkimage {
                  display: block !important;
            }
      }
</style>

<td>
      <img src="lightimage.png" width="600" height="auto" style="display: block; height: auto;" class="lightimage">
      <div class="darkimageWrapper" style="mso-hide: all; display: none">
            <img src="darkimage.png" width="600" class="darkimage" style="display: none;">
      </div>
</td>

Conclusion

When the dark theme is enabled on a phone or computer, some email clients change the colors of emails to less contrasting shades, making the email more pleasant for the eyes.

Email clients support partial color inversion by changing light areas and text in the email to dark. They also support full inversion, where even originally dark shades are transformed.

Emails can be adapted for Dark Mode without code by using a transparent background for text, images, highlighting the logo, and other email elements. Additionally, colors can be chosen that look equally good on light and dark backgrounds. Another option for configuring color inversion is by using media queries and meta tags in the email's code.