Le support du mode sombre dans l'email se divise en trois, et un seul de ces groupes correspond au CSS pour lequel la plupart des expéditeurs conçoivent. Certains clients honorent @media (prefers-color-scheme: dark) exactement tel qu'écrit. D'autres le réécrivent silencieusement en une syntaxe qui ne peut jamais correspondre, puis se rabattent sur leurs propres heuristiques d'auto-inversion. Un troisième groupe reconnaît à peine la balise meta color-scheme, plus récente. Concevoir uniquement pour le premier groupe revient à concevoir pour moins de la moitié de la boîte de réception.
Premier groupe : les clients qui honorent la media query
Selon caniemail.com, @media (prefers-color-scheme: dark) est entièrement pris en charge dans Gmail (toutes plateformes) et Apple Mail (macOS 12.4+ / iOS 13.0+). Outlook n'est pas loin derrière sur la plupart de ses surfaces — Windows (2016+), macOS (16.70+), Outlook.com (2019-07+) et mobile (2020-01+) reconnaissent tous la media query, bien qu'Outlook macOS et Outlook.com appliquent en plus leurs propres attributs de données de mode sombre. Samsung Email (Android 6.1+) l'implémente aussi entièrement. Au total, le panel testé de caniemail.com évalue le support global à 41.86% — une réelle majorité des grands clients, mais loin de tous.
Deuxième groupe : les clients qui réécrivent la media query en quelque chose qui ne correspond jamais
C'est ce groupe qui produit réellement les emails en mode sombre à l'apparence cassée que la plupart des expéditeurs ont déjà vus. Yahoo Mail, AOL et Fastmail n'ignorent pas purement et simplement prefers-color-scheme — ils le réécrivent en une syntaxe invalide (@media ( _filtered_a )) qui ne peut jamais s'évaluer comme vraie, désactivant silencieusement toutes les règles qu'elle contient. HEY fait l'équivalent en réécrivant la media query en @media (false). Dans les deux cas, le client se rabat ensuite sur ses propres heuristiques automatiques d'inversion des couleurs appliquées à la conception originale en mode clair — ce qui produit précisément des logos délavés et un texte à faible contraste illisible que personne n'a explicitement conçu, puisque rien de ce que l'expéditeur a écrit ne pilote réellement le résultat.
Troisième groupe : la balise meta color-scheme, à peine adoptée
<meta name="color-scheme" content="light dark"> (et sa cousine supported-color-schemes) existe pour indiquer à un client pour quel(s) mode(s) un email est délibérément conçu, afin que le client puisse s'épargner entièrement l'auto-inversion plutôt que de deviner. C'est le correctif le plus chirurgical — mais selon caniemail.com, son adoption combinée ne s'élève qu'à 4.88%, avec un support significatif limité aux versions récentes d'Apple Mail (macOS 16+ / iOS 12.4+) et de Gmail webmail bureau (2023-09+). La plupart des autres clients l'ignorent purement et simplement.
Ce que cela implique pour la conception
Aucune règle CSS unique ne couvre les trois groupes à la fois — c'est la conséquence directe de la répartition ci-dessus, pas une lacune d'une technique en particulier. L'approche fiable est l'amélioration progressive, le même principe auquel aboutit le guide du mode sombre de Litmus :
- Concevez d'abord un email en mode clair solide et entièrement lisible. C'est la base sur laquelle se replie chaque client, y compris les auto-inverseurs du deuxième groupe.
- Superposez des surcharges explicites
prefers-color-scheme, pour les ~42% de clients qui les appliqueront réellement — ne comptez pas uniquement sur la balise meta, étant donné son adoption bien plus faible. - Blindez les logos et images contre l'auto-inversion : un PNG semi-transparent sur un fond blanc franc peut s'inverser en un résultat sombre sur sombre illisible chez les clients du deuxième groupe. Une fine bordure ou un aplat de couleur uni derrière l'image survit à l'inversion là où un PNG transparent nu n'y survit pas.
- Ne présumez jamais qu'un fond sombre implique une couleur de texte adaptée au mode sombre — l'auto-inversion du deuxième groupe peut inverser un fond sans toucher le texte de la façon qu'un expéditeur attend ; les couleurs de texte définies explicitement comptent donc davantage en mode sombre, pas moins.
Voir Support des clients de messagerie pour la même décomposition par client appliquée au studio et au moteur de repli de MailInApp.