Hello,
Quick question. I'm building an abandoned checkout flow in Klaviyo. I'm using a dynamic product block.
When I open the test email on mobile Gmail, the color inverts (with dark mode on).
Do you know if there's a way to solve this so that the dynamic product block stays the same color regardless of whether light or dark mode is on?
Willing to pay $ to solve this issue.
Best answer by emma.owens
Hi
Thank you for reaching out to the Community!
What you're seeing is due to how Gmail mobile dark mode handles email rendering. Once the email leaves Klaviyo, the inbox provider controls how colors are displayed, and Gmail can invert or darken background colors automatically. Because of that, there isn't a way within Klaviyo to guarantee that a dynamic product block will keep the exact same color in both light mode and dark mode.
That said, there is a workaround that can often help improve the rendering:
Place the dynamic product block in its own section
Remove any background color from the product block itself so it is transparent
Create a small PNG image in your desired background color
Apply that image as the section background image instead of using a background color
Add any needed spacing or padding at the section level rather than on the product block
This approach can help reduce the color shift in Gmail dark mode, since background images are often less likely to be altered than HTML background colors. That said, it is still best effort, and results can vary depending on the inbox provider and device. Outlook in particular can still be inconsistent with background images in dark mode.
If keeping the exact same appearance across all inboxes is critical, the only stronger option would be a custom-coded email built by a developer, but even then Gmail dark mode can still be difficult to fully control.
I know that may not be the ideal answer, but I hope it helps clarify what is and isn’t possible here!
+21Hi
Thank you for reaching out to the Community!
What you're seeing is due to how Gmail mobile dark mode handles email rendering. Once the email leaves Klaviyo, the inbox provider controls how colors are displayed, and Gmail can invert or darken background colors automatically. Because of that, there isn't a way within Klaviyo to guarantee that a dynamic product block will keep the exact same color in both light mode and dark mode.
That said, there is a workaround that can often help improve the rendering:
Place the dynamic product block in its own section
Remove any background color from the product block itself so it is transparent
Create a small PNG image in your desired background color
Apply that image as the section background image instead of using a background color
Add any needed spacing or padding at the section level rather than on the product block
This approach can help reduce the color shift in Gmail dark mode, since background images are often less likely to be altered than HTML background colors. That said, it is still best effort, and results can vary depending on the inbox provider and device. Outlook in particular can still be inconsistent with background images in dark mode.
If keeping the exact same appearance across all inboxes is critical, the only stronger option would be a custom-coded email built by a developer, but even then Gmail dark mode can still be difficult to fully control.
I know that may not be the ideal answer, but I hope it helps clarify what is and isn’t possible here!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
