If we have an image background for a section, in some dark mode it doesn’t showing up. For example the colour background could either be black/grey or white and sometimes the image on top (eg. like our payments on the footer) or writing on top can't be seen as it would've been originally white or black and would be the same colour as the background. For now, we just have to either not use a background or have added it as an image instead onto the email, but is there a workaround?
Question
Dark Mode Background Colour not pulling through
+5
+37Hey
from what i know email clients like Gmail on iOS/Android and Outlook partially invert your HTML colors once the email lands in the inbox., The background color you set in the editor gets swapped for a dark equivalent,, and any text or images sitting on top of it that were designed to contrast against the original color suddenly become invisible. Klaviyo itself has no control over this because the inversion happens at the email client level., after the email has already been sent.
The fix that i would suggest is if you're using the drag-and-drop editor, is to include the background color as part of the image itself rather than relying on a CSS background color for the section. So instead of a white section with a white payment icon image on top, export the payment icon with the white background already filled in as part of the image file itself (not transparent). Make sure it fills the full width of the section (600px for full-width blocks) so there are no gaps where the client's inverted background color shows through. This approach essentially removes the HTML background from the equation.
I hope this helps and thank you for sharing your question here in the community. let me know if you have any follow up questions. thanks
Cheers
Arpit
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.