Dark mode is widely used in many email clients. While it improves readability for users, it can also break the layout and visuals of your email templates. In this article, you'll learn how to detect and fix the most common rendering issues caused by dark mode.
White Corners on Images in Gmail Dark Mode:
Imagine you created an email template with images that have rounded corners (border-radius: 25px). Everything looks perfect in light mode:
But when the email is opened in Gmail’s dark mode, a light-colored outline appears around the corners of the images:
The reason is that the images themselves have white corners. These white corners are invisible on a light background but become visible in dark mode.
How to Avoid It?
Use images with transparent backgrounds (PNG format);
Physically round the corners of the images before uploading them;
Always test your emails in Gmail dark mode (for example, an image with physically rounded corners and a transparent background).
White Icon Inversion Issue in Gmail on Android:
In the Gmail app on Android, when automatic dark mode is enabled, white icons (such as social media logos) are automatically inverted to black or very dark colors. This makes them nearly invisible on a dark background and disrupts the email design:
Gmail does not support proper color control of images via CSS filters or media queries, and changing the image format (PNG, JPG, GIF) does not resolve the issue.
How to solve it?
In our experience, explicitly setting the icon height to at least 54 pixels in the email code completely resolves the issue. Gmail stops inverting the colors even if the actual image file is smaller:
Result:
White Text Gets Inverted in Outlook Dark Mode:
In Outlook’s dark mode, white text can automatically be inverted to a dark color.
For example, here is how the white text looks correctly in the email editor:
But when opened in Outlook with dark mode enabled, the same text is converted to a dark color, breaking the intended design:
How to fix it?
You need to add the
keep-whiteclass directly to the text block that should keep white text. For example:
And include this in the <head> tag:
<!--[if gte mso 16]>
<style>
.keep-white {}
</style>
<![endif]-->
Result:
Background and Text Color Inversion in Gmail Dark Mode:
Imagine you create an email template with a dark background and white text as intended:
When this email template is opened in Gmail dark mode, enabled, the background color can be automatically inverted, for example, the dark background becomes light. This breaks the design and impairs the email’s appearance:
How to workaround it?
If the email is originally designed with a dark background, add a background image with the desired color. Gmail does not invert background images, so this preserves the intended look:
To prevent the white text from being inverted wrap the text block with the following code
<span class="gmail-screen"><span class="gmail-difference">Your text here</span></span>
Make sure to place the following CSS code inside the <head> of your email:
<style type="text/css">
u+.body .gmail-screen {
background: #000;
mix-blend-mode: screen;
}
u+.body .gmail-difference {
background: #000;
mix-blend-mode: difference;
}
</style>
Result:
Please note that behavior in Gmail dark mode may vary slightly across devices and updates, so we recommend testing across clients to ensure consistent appearance
White Button Text Inversion in Gmail Dark Mode:
In Gmail’s dark mode, white text on buttons can be inverted or appear incorrectly, which reduces readability and breaks the intended design. Below, you can see how the button looks in the email editor with the intended white text:
After sending the email the button text may be inverted or look incorrect as shown in the screenshot below:
What can you do?
You need to wrap the button text with the following code to preserve the white text color:
<span class="gmail-screen"><span class="gmail-difference">Button Text</span></span>
You should also include the following CSS code in the <head> section of your email:
<style type="text/css">
u+.body .gmail-screen { background: #000; mix-blend-mode: screen; } u+.body .gmail-difference { background: #000; mix-blend-mode: difference; }
</style>
After applying the fix, the button text remains white as intended, even in Gmail dark mode. See the screenshot below:
Additional Resources:
For more information on fixing dark mode issues in emails, you may also find this article helpful:
How to Fix Outlook Dark Mode Problems — WebDesign Tuts+
Thank you for taking your time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.