Skip to main content
Solved

How to Optimize Email For Dark Mode!

  • February 29, 2024
  • 2 replies
  • 1133 views

Forum|alt.badge.img+4

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.

Best answer by stam_marko

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 blocks
  • If 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 maybe stick to the most important brand elements (like CTAs and PNG images) and let the rest visually appealing but not brand aligned?

Hope that helps,

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

stam_marko
Expert Problem Solver II
Forum|alt.badge.img+13
  • Expert Problem Solver II
  • 63 replies
  • Answer
  • March 1, 2024

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 blocks
  • If 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 maybe stick 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
Community Manager
Forum|alt.badge.img+60
  • Community Manager
  • 2148 replies
  • March 1, 2024

Hi there @Riffat Junaid

 

To build off of the great advice that @stam_marko shared, while you ultimately can’t control what customers see in the inbox on dark mode, we have some great documentation and threads in the Community like what @stam_marko says above, on how to optimize for it! 

 

Hope this helps!

-Taylor