Comment empêcher iOS 13 Dark Mode de casser les e-mails

10

Nous avons une application de commerce électronique qui envoie les détails de la commande lors d'un achat, et nous venons de repenser ce modèle d'e-mail. Au cours des derniers jours, nous avons reçu des informations selon lesquelles certains clients avaient perdu la moitié du texte de l'e-mail.

Après avoir finalement obtenu une capture d'écran, nous avons appris que le problème se produit sur les iPhones en mode sombre. Jusqu'à présent, ils ont tous été des clients utilisant gmail avec l'application Mail ou avec Safari (les deux ont le même problème). Je ne sais pas si le facteur gmail est pertinent ou une coïncidence.

Notre e-mail est simple - il a un fond blanc, des en-têtes gris et un corps de texte noir. Le mode sombre laisse le fond blanc et les titres gris intacts, mais le texte du corps passe du noir au blanc. Sur le fond blanc, le texte blanc est évidemment invisible, et l'e-mail semble manquer de grandes quantités de contenu.

Y a-t-il quelque chose qui puisse être fait pour empêcher le mode sombre de changer notre texte du noir au blanc?

Je dois noter que nous avons également un code QR intégré dans l'e-mail, donc je suis préoccupé par les solutions qui permettraient au mode sombre de procéder à la recoloration de notre e-mail complet, car je pense que cela rendrait plus difficile la reconnaissance du code QR .

Modifier: cela n'est lié à aucun code d'application, donc les directives sur le développement d'iOS pour le mode sombre ne s'appliquent pas. Il s'agit simplement de la façon dont l'application Mail d'Apple sur iOS 13 en mode sombre affiche un e-mail HTML.

ios css email gmail ios-darkmode jessica
la source
Duplication possible du problème de couleur blanche iOS13 avec textColor de UIKit
Pratik Sodha
Que se passe-t-il si vous définissez explicitement la couleur de la police? Je suppose que le mode sombre ne change la police en blanc que s'il reste avec la couleur par défaut.
Frank Schlegel
2
Connexe: webkit.org/blog/8840/dark-mode-support-in-webkit
Frank Schlegel
@PratikSodha cette question concerne les applications iOS, je parle simplement d'un e-mail HTML affiché dans l'application Mail d'Apple en mode sombre.
jessica
@FrankSchlegel, la couleur et la couleur d'arrière-plan ont été définies explicitement partout et étaient toujours déplacées. Le lien que vous avez fourni avait la réponse, je devais mettre color-scheme: light onlysur tous les éléments. Merci beaucoup.
jessica

Réponses:

10

Vous pouvez supprimer cela de force sur les appareils Apple, mais nous avons maintenant Gmail et Outlook sur Mac sans moyen de les arrêter.

Mettez simplement ceci dans <head>:

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

"Only" est l'abréviation de "Light only" (qui fonctionne également toujours)

Cela corrigera le mode sombre de l'iPhone et Apple Mail, mais pas Outlook sur Mac ou Gmail.

Vous pouvez actuellement remplacer Outlook sur Mac, mais il n'y a pas de piratage connu pour Gmail.

Voici comment remplacer Outlook pour 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 à Brian Thies sur le forum Litmus pour cela

Mais il vaut mieux essayer de résoudre le problème racine, plutôt que de supprimer une fonctionnalité (mode sombre) que vos clients souhaitent.

Apple a fourni un tel moyen, avec ceci dans <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>

Assurez-vous également que votre élément le plus à l'extérieur avec la couleur de fond a la classe "darkmode", par exemple

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

Donc, par défaut, vous aurez un fond blanc, du texte noir; et en mode sombre, ce sera un fond sombre avec du texte clair.

(Veuillez fournir le code pour toute autre question.)

Nathan
la source