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:
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
<style>
block to switch styles based on the desired theme: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>
block. Follow these steps:<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>
element inside a <table><tr>
structure to contain the image. Set the desired width and height for the <img>
tag, and add class="lightimage" to hide the image in dark mode.<div>
element. Add class="darkimageWrapper" to the <div>
to display it in dark mode. Use mso-hide: all to remove any automatic styles, especially for compatibility with older versions of Outlook. Also, apply display: none to ensure the dark image is initially hidden. Customize the appearance of the dark image using class="darkimage" and style="display: none;".<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.
You might be interested in:
End-to-end analytics makes marketing manageable and completely transparent and saves the budget. You always know that you are investing in effective channels and the right actions.
Read moreFor those who are looking for ideas to improve their email strategy.
Read moreBe sure these social media etiquette tips are available to everyone on your staff who will touch your social media.
Read more