Yes, you can modify the background in abandoned cart emails to prevent black backgrounds in dark mode. Here are several effective approaches:
1. Use Background Images Instead of Colors The most reliable workaround is to save an image of your background color and add it as a Background Image in the section that contains your email blocks. This method works consistently because every email provider is different and they don't all accept dark mode coding.
To implement this:
2. Set Explicit Background Colors In Klaviyo's email editor, set a background color for text blocks that contrasts with the text color. For example, if your text is dark (e.g., black), set a white or light grey background for the container to prevent automatic inversion.
If you're comfortable editing HTML, you can add dark mode CSS overrides:
@media (prefers-color-scheme: dark) {
.force-white-background-in-dark-mode {
background-color: #YOURCOLOR !important;
}
}
Apply the force-white-background-in-dark-mode class to the HTML elements you want to have a specific background in dark mode, particularly the dynamic checkout product blocks within the abandoned cart flow.
When customizing your abandoned cart flow:
Unfortunately, there is no easy solution to dark mode or any way to confirm that what leaves your inbox will be viewed 'as is' in dark mode. Dark Mode can be challenging to design for because inbox providers like Gmail & Outlook, as well as email applications all handle Dark Mode differently. Some email clients will invert colors, while others will simply change all colors darker. Ultimately, dark mode changes are rendered once the email is already compressed, sent out of Klaviyo, and exists within the inbox of the email client.
The background image method mentioned above has proven most reliable across different email clients for maintaining consistent brand colors.