web-dev-qa-db-fra.com

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

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.

ioscssemailgmailios-darkmode
10
jessica

Merci au lien fourni par @FrankSchlegel

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

en utilisant color-scheme: light only dans le css sur tous les éléments était la réponse. Je vous remercie!

3
jessica

Vous pouvez le supprimer 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 le <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 est préférable d'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 cela dans le <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 d'arrière-plan a la classe "darkmode", par ex.

 <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.)

8
Nathan