35

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.

jessica
  • 3,051
  • 2
  • 30
  • 31
  • Possible duplicate of [iOS13 White Color issue with textColor of UIKit](https://stackoverflow.com/questions/57985583/ios13-white-color-issue-with-textcolor-of-uikit) – Pratik Sodha Oct 01 '19 at 04:37
  • What happens if you set the color of the font explicitly? I assume dark mode only changes the font to white if it's left with the default color. – Frank Rupprecht Oct 01 '19 at 05:15
  • 3
    Related: https://webkit.org/blog/8840/dark-mode-support-in-webkit/ – Frank Rupprecht Oct 01 '19 at 05:19
  • @PratikSodha that question relates to iOS apps, I'm simply talking about an HTML email displayed in Apple's Mail app in dark mode. – jessica Oct 03 '19 at 19:23
  • @FrankSchlegel the color and background-color was set explicitly everywhere, and was still being shifted. The link you provided had the answer, I had to set `color-scheme: light only` on all elements. Thank you so much. – jessica Oct 03 '19 at 19:26

4 Answers4

36

You can forcibly remove this on Apple devices, but now we have Gmail and Outlook on Mac without a way to stop them.

Simply put this in the <head>:

<meta name="color-scheme" content="only">

"Only" is short for "Light only" (which also still works)

That will fix for iPhone dark mode and Apple Mail but not Outlook on Mac or Gmail.

You can currently override Outlook on Mac, but there is no known hack for Gmail.

Here is how to override for Outlook on Mac:

<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
    background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
    -webkit-text-fill-color: #000000 !important;
}
</style>

HT to Brian Thies on Litmus forum for this

But it's best to try and fix the root problem, rather than remove a functionality (dark mode) that your customers want.

Apple have provided such a way, with this in the <head>:

<meta name="color-scheme" content="light dark">
<style type="text/css">
@media (prefers-color-scheme: dark) {
        .darkmode { background-color: #1e1e1e !important; }
        .darkmode p { color: #ffffff !important; }
}
</style>

Also, ensure your outermost element with the background-color has the class "darkmode", e.g.

 <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">

So by default, you'll have white background, black text; and on dark mode it will be a dark background with light text.

(Please supply the code for any further queries.)

Nathan
  • 4,358
  • 2
  • 10
  • 26
18

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!

jessica
  • 3,051
  • 2
  • 30
  • 31
0

First, in Apple email clients (Apple Mail, iOS Mail, iOS 13) dark mode is only applied to “personal emails”. While it’s difficult to find an exact definition for this term, to our understanding, personal emails are ones that don’t contain any visible images – i.e. “hybrid” emails that contain a limited amount of HTML elements. (Confused? You can read more on hybrid emails in our plain text vs. HTML emails blog)

This means an HTML formatted email with an invisible tracking pixel would count as personal, but a traditional marketing email with a hero image would not. It’s also worth noting that plain text emails will always be considered personal emails.

Original source

What actually helped us was:

    <table class="py-[32px] text-center" width="100%">
        <tr>
            <td>
                <img style="width:100%" alt="logo" src="{{ $heroImg }}">
            </td>
        </tr>
    </table>

Adding the style="width:100%" to the img element. This prevented the email from being dark on iOS phones that have dark mode. It seems this made sure the email is no longer perceived as personal.

Dr. House
  • 483
  • 7
  • 23
-2

It sounds something fishy but I also had same problem in our company. The dark mode was making our mail look disgusting.

The solution we got to this problem was by adding a image ( i.e. logo of our company in the email footer).

This fixed the dark mode issue and the email began to look same on both modes as like we designed. This is a simple hack and hope that other people will also get benefited from this.

Bimal Subedi
  • 9
  • 1