Dark Mode Background Colour not pulling through

Question

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?

ArpitBanjara · Accepted Answer

Hey ​@Harrison Zapfrom what i knowemail 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 isif 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 showsthrough. 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. thanksCheersArpit

rachelhanson32 · Answer

Hey Harrison!This is actually pretty common in dark mode, and we've seen it happen with live text, social icons etc.To echo Arpit's note above, when dark mode is enabled, inboxes like Gmail will automatically invert CSS background colors. A black section background can become white, while a white background can become black. As a result, text or icons that were originally designed to contrast with the background can disappear.I've outlined a couple of options below:Option 1: Use a full imageThe cleanest solution is to build the entire section as a single image, including the footer icons. Since the background color is embedded directly in the image rather than defined through CSS, there's nothing for the email client to invert. Just be sure the image has a solid background rather than a transparent one.Option 2: Use grey textFor sections that require dynamic content, I've had the most success using a medium gray font color instead of pure black or white. A mid-tone gray tends to remain readable in both light and dark modes. It's not a perfect solution, but it generally performs better than having text disappear altogether.Hope this helps!Best,Rachel

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials