J’utilise le thème par défaut sans aucun composant de thème ni personnalisation CSS. Dans les paramètres, j’ai spécifié mon logo blanc « mode sombre » pour l’e-mail de résumé, car la zone d’arrière-plan du logo du résumé est sombre. Cela rend très bien — d’habitude :
Cependant, lorsque je reçois un résumé (dans l’application Gmail) sur un iPhone en mode sombre de l’appareil, la zone d’arrière-plan du logo est inversée en blanc (ou presque), rendant le logo presque invisible :
Sur ordinateur, je peux prévisualiser le mode sombre à l’aide de l’inspecteur Chrome. Il n’inverse pas la couleur d’arrière-plan du logo en blanc. Mais il remplace mon logo par défaut (« mode clair »), le rendant presque invisible :
Cela me laisse assez perplexe… Je ne sais pas si je vois un bug, ou si j’ai une mauvaise attente quant au fonctionnement du mode sombre mobile…
J’imagine que je pourrais ajouter un contour noir autour de mon logo par défaut afin qu’il fonctionne mieux sur un fond clair.
Mais j’apprécierais tout indice pour obtenir correctement des combinaisons logo+arrière-plan de résumé qui fonctionnent dans tous les paramètres.
Pour confirmer, avez-vous apporté des modifications au modèle d’e-mail HTML de Discourse qui se trouve dans Admin / Personnaliser / Style de l’e-mail ? Avez-vous également ajouté du CSS dans l’onglet CSS qui se trouve sur cette page ?
De plus, le paramètre du site appliquer des styles personnalisés au résumé est-il activé sur votre site ? Ce paramètre est activé par défaut.
En supposant que les personnalisations que vous avez apportées ne causent pas le problème, je suppose que ce qui se passe, c’est que le placeholder %{dark_mode_styles} qui se trouve dans le modèle d’e-mail par défaut de Discourse est remplacé par le CSS ajouté par cette méthode :
Cette méthode ajoute le CSS suivant au modèle :
[dm='header'] {
background: #151515 !important;
}
Ce CSS est destiné à rendre l’en-tête du résumé sombre lorsque l’e-mail est visualisé sur un appareil configuré en mode sombre, mais peut-être que certains appareils ignorent la directive !important et affichent l’inverse de la couleur.
Je ne parviens pas à reproduire le problème sur mon téléphone Android. Je n’ai pas d’iPhone pour tester. Peut-être que quelqu’un d’autre peut essayer de visualiser un e-mail de résumé en mode sombre sur un iPhone ?
Je n’ai pas touché au HTML personnalisé ou au CSS du modèle d’e-mail. J’ai désactivé appliquer des styles personnalisés au résumé mais, comme prévu, cela n’a eu aucun effet.
Je suis prêt à envoyer un e-mail récapitulatif si quelqu’un souhaite me poster ou m’envoyer par message privé une adresse…
J’ai reçu des e-mails du site. Ils s’affichent correctement dans l’application Gmail sur mon téléphone Android en mode sombre. Je n’ai pas d’appareil iOS pour tester.
Sur l’appareil iOS de @ToddZ, il obtient les mêmes résultats, que le paramètre apply custom styles to digest soit activé ou non :
Je suppose que l’application Gmail pour iOS ne prend toujours pas en charge la requête média prefers-color-scheme : Can I email… @media (prefers-color-scheme). Cette page indique également qu’Android ne la prend pas en charge, mais les e-mails s’affichent correctement dans Gmail sur Android pour moi.
De manière un peu connexe, il pourrait être utile de noter quelque part que le paramètre apply custom styles to digest doit être activé pour que le CSS du mode sombre ajouté au modèle d’e-mail soit appliqué.
@isaac, je ne suis pas sûr si vous gérez toujours cela. Il pourrait être utile de tester comment Gmail sur iOS gère cela. Surtout lorsque le thème par défaut du site Discourse utilise un schéma de couleurs sombres.
Fait intéressant, je viens de remarquer un problème quelque peu similaire avec un e-mail d’invitation, sur Windows.
(Celui-ci semble correct sur iOS, cependant.)
Ceci est Win11 22H2, et Thunderbird avec le thème système (utilise les paramètres clairs/sombres de l’OS.)
Si vous en avez l’occasion, pouvez-vous essayer de déclencher le même e-mail avec le paramètre du site appliquer des styles personnalisés au résumé activé ? Ce paramètre fait-il une différence dans la façon dont l’e-mail est rendu en mode sombre dans Thunderbird ?
De plus, pouvez-vous vérifier à nouveau pour vous assurer que le modèle d’e-mail situé dans Admin / Personnaliser / Style d’e-mail n’a pas été modifié ? S’il n’a pas été modifié, le bouton “Réinitialiser aux valeurs par défaut” sur cette page sera désactivé :
Je me demande si les clés dark_mode_meta_tags et dark_mode_styles que j’ai mises en évidence dans la capture d’écran ci-dessus sont présentes dans le modèle.
L’inversion complète des couleurs est le schéma de couleurs le plus envahissant : il inverse non seulement les zones avec des arrière-plans clairs, mais affecte également les arrière-plans sombres.
Ainsi, si vous avez déjà conçu vos e-mails pour avoir un thème sombre, ce schéma les forcera ironiquement à devenir clairs. Malheureusement, c’est actuellement la tactique utilisée par certains des clients de messagerie les plus populaires, tels que l’application Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) et Windows Mail.
L’exemple du problème dans cet article correspond à ce que vous signalez :
Quelqu’un ayant accès au compte Litmus de Discourse devra tester cela. Pour reproduire le problème, essayez d’envoyer un e-mail récapitulatif à Litmus à partir d’un site Discourse dont la palette de couleurs du thème par défaut est définie sur un schéma de couleurs sombre.
En supposant que cela déclenche le problème, la solution simple serait d’utiliser toujours un schéma de couleurs clair pour les e-mails, quel que soit le schéma de couleurs attribué au thème par défaut sur Discourse. Il existe également une approche suggérée dans la section « Ciblage spécifique à Gmail iOS et Outlook Windows » de l’article que j’ai lié, qui pourrait potentiellement fonctionner. C’est un peu une solution de contournement cependant.
Celui qui finira par examiner cela pourrait également examiner la façon dont le paramètre du site apply custom styles to digest doit actuellement être activé pour ajouter la prise en charge du mode sombre pour les clients de messagerie qui prennent réellement en charge le mode sombre. Il n’y a rien dans l’interface utilisateur de Discourse qui indique clairement que ce paramètre est lié à la prise en charge du mode sombre.
Wow, oui, Inverser toutes les couleurs semble bien être ce que je vois, du moins avec le résumé/aperçu dans Gmail sous iOS.
Je n’ai pas la bande passante nécessaire en ce moment pour analyser cet article et trouver des solutions de contournement appropriées, mais je devrai essayer quelque chose un jour. Le fil GitHub pour poster des exemples Gmail est ouvert depuis 2019, et un certain nombre de solutions de contournement ont été proposées, mais rien n’indique que le comportement sous-jacent ait été modifié.
J’espère que l’équipe Discourse pourra apporter quelques ajustements généraux pour unifier l’apparence sur les différentes plateformes.
D’après l’e-mail de résumé que j’ai vu sur votre site, je suppose que votre site a un schéma de couleurs sombre par défaut. Dans ce cas, vous pouvez résoudre le problème de la couleur d’arrière-plan de l’en-tête dans l’application Gmail pour iOS en ajoutant le code suivant à l’onglet CSS de votre site (Admin / Personnaliser / Style des e-mails / CSS) :
Notez que les couleurs ajoutées à linear-gradient doivent être identiques. Elles doivent correspondre à la valeur définie pour la couleur « arrière-plan de l’en-tête » de la palette de couleurs de votre thème par défaut :
Je pense que c’est une bonne approche uniquement pour les sites qui ont un schéma de couleurs sombre défini par défaut. Les détails sur le fonctionnement sont ici : Investigating activity summary email dark mode issues.
