How to Optimize Email For Dark Mode!

Question

Hi, so I have a question regarding dark mode. My client’s brand color is maroon so we are using this color in emails. And maroon color is turning in pink and purple when someone open the email on dark mode. Whether it’s a maroon text or a maroon button or a dynamic product block, everything is turning in pink or purple on dark mode. Is there any solution, tip or trick? Kindly suggest anything that can help me. Thank you.

stam_marko · Accepted Answer

Hi@Riffat Junaid,Here are some possible solutions that I can think of:Use Dark mode specific CSS (not all email clients support these queries)Inline Styles with important tag (inline styles with the !important tag can help override the email client's default dark mode settings)Transparent PNGs for Buttons instead of Button blocksIf the color change is too disruptive, consider designing the email with less reliance on large areas of maroon, focusing more on white or light backgrounds with maroon used more sparingly.☝️Educate and offer alternatives: I’ve seen many brands, like Patagonia’s email, being flexible with how emails turn to dark mode. How about you reconsider the persistence of the maroon colour?Another option would be to maybestick to the most important brand elements (like CTAs and PNG images) and let the rest visually appealing but not brand aligned?Hope that helps,

Taylor Tarpley · Answer

Hi there @Riffat Junaid,To build off of the great advice that @stam_markoshared, while you ultimately can’t control what customers see in the inbox on dark mode, we have some great documentationand threads in the Community like what @stam_markosays above, on how to optimize for it!Hope this helps!-Taylor

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials