Skip to main content

Hi Klaviyo Community,

I’m having trouble with the text color changing when viewed in dark mode on mobile devices. I’ve looked through other forums, and many suggest changing background images or section images to resolve dark mode issues. However, the background color is displaying correctly—the problem is with the text colors themselves, which seem to change when dark mode is enabled, making parts of the text difficult to read.

Is there a way to set specific text colors in Klaviyo that won’t automatically change in dark mode? I want to keep the email design consistent and readable across both light and dark modes without having to compromise on the colors I’ve chosen. Any advice or tips on how to optimize my email for dark mode while maintaining my brand’s style would be greatly appreciated!

Thank you in advance for your help!

 

 

Hi there,

Dark mode issues with email design can be frustrating, especially when it comes to text colors shifting and affecting readability. The good news is that there are some steps you can take in Klaviyo to help control how text displays in dark mode.

Why This Happens:

Dark mode settings on mobile devices often invert or adapt email colors to fit the dark background, which can result in unexpected changes to text colors. iOS Mail, Gmail automatically adjust colours in ways that override your settings.

How to Fix It:

  1. Set Hexadecimal Colours for Text:

    • Use specific hex color codes (e.g., #000000 for black or #FFFFFF for white) instead of generic colour names like "black" or "white." This ensures greater consistency across light and dark modes.

  2. Add a Background Colour to Text Containers:

    • In Klaviyo’s email editor, set a background colour for text blocks that contrasts with the text colour. For example, if your text is dark (e.g., black), set a white or light grey background for the container to prevent automatic inversion.

  3. Use Transparent Backgrounds Sparingly:

    • Avoid fully transparent text blocks. Instead, explicitly set both text and background colours to keep them stable in dark mode.

  4. Test Across Devices and Clients:

    • Test, test, test, with multiple devices, email apps dark modes, etc. Or you can Use email testing tools like Litmus or Email on Acid to preview how your email looks in different light and dark modes. This helps identify specific issues and allows you to tweak designs accordingly.

Best Practices for Dark Mode:

  • Stick to High-Contrast Colour Palettes: Colours with low contrast (e.g., light grey on white or dark grey on black) are most likely to become unreadable in dark mode.
  • Keep Your Brand Colours in Mind: You can use brand colours strategically as accents but ensure they are readable against both light and dark backgrounds.

These adjustments should help you maintain a consistent, readable design across both modes. Let me know how it works out or if you need further help!

Cheers!

Hey ​@noha-inha1e 

Well one way to do this is to add the css in your email’s <head> section

  • Use prevent-dark-mode class for text that should never change color
  • Use dark-mode-custom for text that should adapt to dark mode
  • Use force-light-bg for sections that need a light background to maintain readability

let me know if this helps

I hope this helps and thank you for sharing your question here in the community.

Cheers

Arpit

thanks so much ​@ArpitBanjara  

just want to know where I will be able to edit my already published templates code.

I have read some forums but they talking about import and exporting HTML files which I have no idea how to do. 

I am also wanting to paste this code into all currently running flows I have running so what would you recommend doing for this due it to be ± 30 emails 

thanks again for the help 

Hey ​@noha-inha1e 

Go to your template and click on the block to find the source code

you can also see other options to edit - background color, padding, border etc as you see in the screenshot above as well.

You can do this once in the template and replace the emails in the flow, however every email will have different content, images etc, so yes you will have to do it manually. You can also save the block as “universal block” and just add it in each email.

I hope this helps

Cheers

hi ​@ArpitBanjara 

I have got to that stage but I am unable to locate the head section, the only this close to that is H3 and the rest are div where should I be implementing this text then 

 

and would I be able to add an html section at the top with the code required to stop this issue?

Reply


Terms & Conditions

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy |
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.