Ceci était censé être un court article avec quelques images et une solution facile à appliquer. Les choses ont dégénéré. Les e-mails HTML sont difficiles. Pour vous amuser un peu, voici comment cela peut mal tourner : Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub 
N’hésitez pas à survoler cet article et à regarder les images. À la fin de l’article, j’étais plus ou moins arrivé à la conclusion qu’en raison de la popularité du mode sombre, il pourrait être utile de retravailler l’e-mail de résumé, au lieu d’essayer de pirater des solutions sur son code actuel. Ce n’est pas à moi de décider, et peut-être que je regarde cela depuis trop longtemps.
Il y a eu quelques questions récentes sur la façon dont les e-mails de résumé sont rendus sur les clients de messagerie configurés en mode sombre. Le principal problème est que la couleur d’arrière-plan de l’en-tête du résumé est inversée sur les clients de messagerie qui gèrent le mode sombre en effectuant une inversion complète des couleurs (application Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) et Windows Mail). Cela crée un problème de contraste entre la couleur de l’en-tête et le logo du site.
Ces clients de messagerie ont également un problème avec la couleur du texte des boutons et la section “Depuis votre dernière visite” du résumé.
Toutes les images ci-dessous proviennent du service de test d’e-mails Litmus :
D’un site Discourse avec un schéma de couleurs sombres, utilisant un logo PNG blanc avec un fond transparent :
Attendu (Gmail App Dark pour Android) :
Mauvais (Gmail Dark pour iOS, OL Office 365 Dark, Outlook 2021 Dark, Windows 10 Mail Dark) :
Aperçu des clients mobiles (Gmail pour iOS est le seul client présentant des problèmes évidents avec la couleur de l’en-tête) :
Voici le même test avec l’e-mail de résumé de Meta (schéma de couleurs claires par défaut, logo PNG sombre sur fond transparent). Notez que Meta n’a pas activé le paramètre de site apply custom styles to digest (appliquer des styles personnalisés au résumé), il ne reçoit donc pas les balises et styles méta du mode sombre pour les clients qui les prennent en charge (Apple Mail et les versions récentes de Mail sur iOS). Si le paramètre apply custom styles to digest était activé, je soupçonne que les tests iPhone Dark auraient également des problèmes de contraste entre le logo et la couleur de fond.
Il existe plusieurs façons de forcer la couleur d’arrière-plan de l’en-tête de l’e-mail à correspondre à la couleur du schéma de couleurs par défaut du site :
Pour l’application Gmail pour iOS, la couleur d’arrière-plan de l’en-tête peut être définie avec une image d’arrière-plan créée avec un linear-gradient. Les images d’arrière-plan créées de cette manière ne voient pas leur couleur inversée. L’astuce consiste à définir les deux couleurs du linear-gradient sur la valeur de la couleur “arrière-plan de l’en-tête” du schéma de couleurs par défaut du site Discourse.
Cela peut être réalisé dès maintenant en ajoutant du CSS personnalisé dans l’onglet Admin / Customize / Email Style / CSS. Définissez les valeurs de couleur sur la valeur de la couleur “arrière-plan de l’en-tête” de votre schéma de couleurs par défaut. (Notez qu’il n’est pas possible d’utiliser var(--header_background) pour définir la couleur dans l’éditeur CSS des e-mails) :
.digest-header {
background-image: linear-gradient(#111, #111);
}
En testant cette approche pour l’e-mail de résumé de Meta, je commence à avoir des doutes quant à sa validité en tant que solution pour les sites qui ont un schéma de couleurs par défaut clair. Le logo est lisible, mais cela semble un peu étrange ?
Pour les clients de messagerie de bureau Outlook 2021 Dark et Windows 10 Mail Dark, le problème d’inversion de la couleur d’arrière-plan de l’en-tête peut être résolu en ajoutant une règle !important à la background-color définie pour le .digest-header. Cela ne peut pas être réalisé via du CSS personnalisé car Discourse ajoute déjà un style background-color à l’élément sans la règle !important. Cette règle est ajoutée après le CSS personnalisé, elle a donc la priorité. (Notez que cette approche ne semble fonctionner que pour forcer la couleur d’arrière-plan à une couleur sombre. Elle échoue lorsque j’essaie de l’utiliser pour forcer l’arrière-plan de l’en-tête à #ffffff.)
Le problème de la couleur du texte dans la section “Depuis votre dernière visite” pour les clients de messagerie qui effectuent une inversion complète des couleurs ne semble pas avoir de solution facile. Il existe un hack pour Gmail sur iOS suggéré ici : Fixing Gmail’s dark mode issues with CSS Blend Modes — HTeuMeuLeu.com. Il utilise des modes de fusion pour tromper Gmail afin qu’il définisse une couleur de texte blanche. Cela fonctionne en théorie, mais compte tenu de la complexité du balisage de l’e-mail de résumé, je ne pense pas que cela vaille la peine d’être poursuivi.
En résumé, je pense que pour les sites Discourse qui ont un schéma de couleurs sombres comme schéma de couleurs par défaut, une bonne solution pour l’instant serait d’ajouter le CSS que j’ai posté ci-dessus à leur onglet Email Style / CSS. Cela rendra le logo du site lisible sur l’application Gmail Dark pour iOS. L’ajout n’a causé aucun problème avec d’autres clients de messagerie que j’ai testés. Pour les sites qui ont un schéma de couleurs claires par défaut, je suis moins sûr de cette approche. Forcer un arrière-plan d’en-tête blanc sur un écran autrement sombre n’est pas très esthétique.
L’e-mail de résumé a été développé avant que le mode sombre ne soit couramment utilisé. Peut-être qu’en raison de la popularité récente du mode sombre, il serait logique de retravailler l’e-mail de résumé dans le but de l’afficher correctement en mode sombre et clair sur les clients de messagerie populaires.
Si retravailler complètement l’e-mail de résumé est hors de portée, il pourrait être utile d’envisager de fournir des paramètres dark_mode_digest_logo et light_mode_digest_logo. Sur au moins certains clients de messagerie, il sera possible de détecter le mode et d’afficher le logo approprié.
Pour améliorer le mode sombre sur les clients de bureau Outlook, Discourse pourrait laisser certains noms de classe dans le HTML de l’e-mail au lieu de tous les supprimer. Ces noms de classe pourraient être utilisés pour cibler le mode sombre sur Outlook : https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402. (Notez qu’Outlook ne peut pas gérer plusieurs noms de classe sur un élément, donc certains noms de classe devraient toujours être supprimés du fichier digest.html.erb.)
