1

I have a template that I am designing in Mailchimp for email. The footer of the mail is dark blue with white text. By default, the Gmail iOS app flips the contrast, so we lose all of our nice styling. I have been able to switch the background back to dark blue using a liner-gradient:

background-color: #141621;background-image: linear-gradient(#141621,#141621)

However, I can't force the text to display in white. The Gmail iOS app switches it to a contrast colour it thinks will work on that background.

Does anyone have any tips on this issue?

Thanks in advance!

EDIT: I have tried following the guides on both these articles with no success, not sure if I am missing something from them:

https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/

https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/

Andrew Royal
  • 31
  • 5
  • MailChimp may be stripping some of your code? But can't tell if you've implemented hteumeuleu's fix correctly or not without the relevant code being pasted here too. (I think it *should* work in theory, but not 100% familiar with Mailchimp) – Nathan Aug 24 '22 at 00:11
  • Unfortunately as this template was developed with table (the native code from Mailchimp) using the div tactic didn't work. I ended up making a compromise in the templates by making the footer text a grey and it works out ok. I am going to close this discussion out. I really hope that services like Mailchimp and Hubspot start creating support for dark mode specifically. – Andrew Royal Aug 24 '22 at 18:57

2 Answers2

1

I hope services like Mailchimp and Hubspot start specifically creating support for dark mode. I am going to close this out, but if anyone has tips, tricks and ideas for the future I think this is going to be more and more important as we see the greater shift to dark mode.

Andrew Royal
  • 31
  • 5
0

This worked for me also working with tables

https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes

In a simple way you have to add in the < style > :

u + .body .screen { background:#000; mix-blend-mode:screen }
u + .body .difference { background:#000; mix-blend-mode:difference }

Then add in the < body > :

class="body"

Then include your text into this two divs:

<div class="screen">
<div class="difference">
<!-- your <p> --> 
</div></div>

Since MailChimp or SalesForce are using tables just place the divs into the < td >

EnricoBara
  • 3
  • 5