Conception d'emails en mode sombre : Guide complet
Concevez des emails qui respectent les préférences des utilisateurs et qui ont l\'air superbes dans des environnements sombres.
Le mode sombre est devenu la norme pour de nombreux utilisateurs. Apple Mail, Gmail, Outlook et la plupart des clients mobiles supportent désormais le mode sombre. Mais chacun le gère différemment, créant un défi de conception complexe.
Ce guide explique comment les clients email appliquent le mode sombre, les techniques pour contrôler l\'expérience, et les stratégies de test pour s\'assurer que vos emails ont bonne apparence dans les environnements clair et sombre.
Comment les clients email gèrent le mode sombre
Les clients email utilisent différentes approches pour le mode sombre :
1. Pas de changement (Contrôles utilisateur)
Certains clients (Gmail web ancien, certaines versions d\'Outlook) ne modifient pas les couleurs des emails. Votre design apparaît tel que prévu indépendamment du thème du client.
2. Inversion partielle des couleurs
Des clients comme Apple Mail et iOS Mail inversent intelligemment les couleurs. Les arrière-plans clairs deviennent sombres. Le texte sombre devient clair. Le client essaie de maintenir la lisibilité.
3. Inversion complète des couleurs
Certains clients inversent agressivement toutes les couleurs. Cela peut causer des problèmes avec les images, logos et schémas de couleurs soigneusement conçus.
4. Support des media queries CSS
Le meilleur scénario : les clients qui supportent les media queries prefers-color-scheme. Vous pouvez fournir des styles explicites pour le mode sombre.
L\'approche des media queries
Là où c\'est supporté, prefers-color-scheme vous permet de définir des styles pour le mode sombre :
<style>
@media (prefers-color-scheme: dark) {
.body-bg {
background-color: #1a1a1a !important;
}
.text-primary {
color: #ffffff !important;
}
.text-secondary {
color: #b3b3b3 !important;
}
.card {
background-color: #2d2d2d !important;
}
}
</style>Support en 2026 :
- Apple Mail (macOS/iOS) : Support complet
- Outlook (macOS) : Support complet
- Gmail App (iOS) : Support partiel
- Outlook App : Support limité
- Gmail (web) : Pas de support (utilise son propre algorithme)
Balise meta color-scheme
Indiquez aux clients que votre email supporte le mode sombre :
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
</head>Cela indique aux clients que vous avez fourni des styles pour le mode sombre. Certains clients utilisent cela pour décider s\'ils appliquent leurs propres changements de couleurs.
Conception pour l\'inversion automatique
Puisque vous ne pouvez pas contrôler tous les clients, concevez en gardant l\'inversion automatique à l\'esprit :
Évitez le blanc pur (#ffffff)
Les arrière-plans blancs purs peuvent s\'inverser en noir pur, ce qui peut être dur. Utilisez un blanc légèrement décalé (#f5f5f5) pour les arrière-plans principaux.
Évitez le texte noir pur (#000000)
Le texte noir pur peut s\'inverser en blanc pur. Utilisez plutôt un gris foncé (#333333). Il s\'inverse en un gris clair plus doux.
Utilisez des logos PNG transparents
Les logos avec arrière-plans transparents s\'adaptent mieux. Si votre logo est sombre, envisagez de fournir une version claire pour le mode sombre :
<style>
@media (prefers-color-scheme: dark) {
.logo-light {
display: none !important;
}
.logo-dark {
display: block !important;
}
}
</style>
<img class="logo-light" src="logo-dark.png" alt="Logo">
<img class="logo-dark" src="logo-light.png" alt="Logo" style="display: none;">Ajoutez du padding/bordure aux images
Les images avec arrière-plans transparents peuvent disparaître sur des arrière-plans sombres. Ajoutez des bordures ou arrière-plans subtils :
<img src="icon.png"
style="background-color: #ffffff; padding: 8px; border-radius: 4px;"
alt="Icône">Conception de boutons pour le mode sombre
Les boutons doivent fonctionner dans les deux modes :
<!-- Use mid-range colors that work in both modes -->
<table role="presentation">
<tr>
<td style="background-color: #007bff; border-radius: 4px;">
<a href="..."
style="color: #ffffff; padding: 12px 24px; display: block; text-decoration: none;">
Primary Button
</a>
</td>
</tr>
</table>Évitez les arrière-plans de boutons très clairs (ils peuvent s\'inverser en sombre avec du texte sombre). Les couleurs de marque de milieu de gamme fonctionnent généralement dans les deux modes.
Test du mode sombre
Test manuel
Testez en mode sombre réel :
- Activez le mode sombre sur votre appareil
- Envoyez des emails de test à plusieurs comptes
- Vérifiez dans Apple Mail, Gmail, Outlook
- Testez à la fois mobile et desktop
Test automatisé
Litmus et Email on Acid incluent des aperçus en mode sombre. Voyez comment votre email se rend à travers les clients en modes clair et sombre.
Mode sombre dans les constructeurs d\'emails
Certains constructeurs d\'emails gèrent le mode sombre automatiquement. Sequenzy et des plateformes similaires génèrent des emails avec des considérations pour le mode sombre. Les templates sont testés dans les deux modes.
Si vous utilisez un framework comme MJML, vous devrez ajouter les styles de mode sombre manuellement. Le framework compile votre markup mais n\'ajoute pas automatiquement les queries prefers-color-scheme.
Stratégie pratique
Compte tenu de la complexité, voici une approche pratique :
- Concevez d\'abord pour le mode clair avec des couleurs qui s\'inversent raisonnablement
- Évitez les extrêmes (blanc pur, noir pur)
- Ajoutez des media queries pour les clients qui les supportent
- Utilisez les balises meta pour signaler le support du mode sombre
- Testez dans les principaux clients et acceptez que certaines variations soient inévitables
Quand ignorer le mode sombre
Pas tous les emails ont besoin d\'un support parfait du mode sombre. Les emails transactionnels (reçus, resets de mot de passe) importent plus que les campagnes promotionnelles. Concentrez les efforts là où l\'impact est le plus grand.
Certains designs fortement brandés peuvent mieux paraître en forçant le mode clair. C\'est un choix valide si l\'identité de votre marque dépend de combinaisons de couleurs spécifiques.
Le mot de la fin
Le mode sombre en email est une cible mouvante. Le comportement des clients varie et continue d\'évoluer. Concevez avec flexibilité à l\'esprit, testez à travers les clients, et acceptez que certaines variations soient inévitables.
L\'approche la plus sûre : utilisez des couleurs qui fonctionnent raisonnablement quand inversées, ajoutez des media queries pour un contrôle fin là où supporté, et testez avant envoi. Des outils comme Sequenzy avec des considérations intégrées pour le mode sombre réduisent le travail manuel.