ioscssemailgmailios-darkmode

How to prevent iOS 13 Dark Mode from breaking emails


We have an e-commerce app that sends out order details when a purchase is made, and we just redesigned that email template. We've received reports over the past few days of some customers having half the text in the email missing.

After finally getting a screenshot, we've learned that the issue is happening on iPhones using dark mode. So far they've all been customers using gmail with either the Mail app or with Safari (both have the same problem). I'm not sure if the gmail factor is relevant or a coincidence.

Our email is simple -- it has a white background, gray headings, and black body text. Dark mode is leaving the white background and gray headings untouched, but the body text is being changed from black to white. On the white background, the white text is obviously invisible, and the email looks like it's missing large amounts of content.

Is there anything that can be done to prevent dark mode from changing our text from black to white?

I should note that we also have a QR code embedded in the email, so I'm concerned about solutions that would allow dark mode to proceed in recoloring our full email, as I believe it would make it harder for the QR code to be recognized.

Edit: this is not related to any app code, so guidelines on developing iOS for dark mode don't apply. This is simply an issue of how Apple's Mail app on iOS 13 in dark mode is displaying an HTML email.


Solution

  • Thanks to the link provided by @FrankSchlegel

    https://webkit.org/blog/8840/dark-mode-support-in-webkit/

    using color-scheme: light only in the css on all elements was the answer. Thank you!