Conception d'emails en mode sombre : guide complet
Concevez des emails qui respectent les préférences des lecteurs et qui restent propres quand le client passe en fond sombre.
Pour la plupart des équipes qui construisent leurs emails en HTML, le meilleur choix reste MJML. C’est un framework open source qui transforme un markup simple en HTML compatible avec les clients de messagerie, sans abonnement listé sur sa page tarifs : vous payez surtout l’hébergement et le temps d’intégration. Son défaut face au mode sombre est connu : il ne génère pas à votre place les règles prefers-color-scheme. Vous devez les écrire, et c’est justement ce travail qui fait la différence entre un email lisible la nuit et un email avec des textes blancs sur fond blanc.
Ce guide s’adresse aux personnes qui choisissent un outil de construction ou un framework d’emails et qui veulent que le rendu tienne en mode sombre. Il explique ce que chaque client fait réellement de vos couleurs, quels réglages écrire dans le HTML, comment comparer les outils (MJML, React Email, Maizzle, Stripo, BEE, Unlayer) et comment tester avant d’envoyer.
Ce qu’un bon outil doit savoir faire en mode sombre
Avant de comparer des outils, il faut savoir ce que vous cherchez à obtenir. Un email peut être affiché en mode sombre de trois façons, et votre outil doit vous laisser agir sur chacune d’elles.
1. Le client n’applique aucun changement
Certains clients laissent votre design tel quel. Votre fond clair reste clair, vos textes restent foncés. Dans ce cas, le risque est surtout de ne pas avoir prévu de version sombre : un logo foncé sur fond foncé disparaît.
2. Le client inverse ou adapte les couleurs
Plusieurs applications de messagerie mobile et de bureau recalculent les couleurs. Les fonds clairs deviennent sombres, les textes sombres deviennent clairs. Le résultat dépend de l’algorithme du client, pas de votre intention. Un bon outil doit vous laisser choisir les couleurs de base de façon à ce que l’inversion reste lisible.
3. Le client applique votre CSS pour le mode sombre
Les clients qui lisent les media queries peuvent appliquer des règles écrites par vous. C’est la seule situation où vous contrôlez vraiment le rendu. Là encore, tout dépend de la prise en charge du client, qui varie d’une application à l’autre et d’une version à l’autre.
Le point commun à ces trois cas : un outil qui produit du HTML propre, avec des couleurs déclarées explicitement, offre plus de contrôle qu’un éditeur qui empile des tableaux imbriqués et des styles en ligne difficiles à relire.
Comparatif des outils
Le tableau suivant résume la place de chaque outil. Les prix ne sont indiqués que lorsque la page tarifs du fournisseur les publie ; sinon, la mention « tarif sur demande » signifie qu’il faut demander un devis au fournisseur.
| Outil | Idéal pour | Prix d’entrée | Limite principale |
|---|---|---|---|
| MJML | Équipes de développeurs qui veulent versionner leurs templates | Pas de forfait listé : logiciel à héberger soi-même | Les styles du mode sombre sont à écrire à la main |
| React Email | Équipes déjà sur React et TypeScript | Tarif sur demande | Nécessite un pipeline de build JavaScript |
| Maizzle | Développeurs front-end qui utilisent Tailwind | Tarif sur demande | Demande une configuration Node.js et une bonne maîtrise du HTML email |
| Stripo | Équipes marketing qui assemblent sans coder | Tarif sur demande | Le code exporté est à relire, la personnalisation dépend de l’éditeur |
| BEE | Éditeur visuel pour des modèles réutilisés par des marketeurs | Tarif sur demande | Les réglages avancés du mode sombre sont à vérifier dans l’éditeur |
| Unlayer | Intégrer un éditeur d’emails dans votre propre produit | Tarif sur demande | Vous dépendez de l’éditeur intégré pour les blocs et le rendu |
| Email on Acid | Contrôler les rendus clair et sombre avant envoi | 99 US$ par mois (plan Basic) | Ne construit pas l’email : il sert à vérifier le rendu |
Tarifs : ce que coûtent les options publiées
Seuls deux fournisseurs de cette liste publient des tarifs chiffrés sur leur page officielle. Pour les autres, il faut demander un devis. Le tableau ci-dessous ne reprend que les prix vérifiés sur les pages tarifs, avec le plan, la facturation et le volume concerné.
| Option | Plan | Prix | Facturation | Volume concerné |
|---|---|---|---|---|
| MJML | Open source, hébergement à votre charge | Aucun abonnement listé | Non applicable | Illimité, coûts d’hébergement à votre charge |
| Email on Acid | Basic | 99 US$ | Mensuelle | 1 000 aperçus par mois, plus de 100 clients et appareils |
| Email on Acid | Premium | 199 US$ | Mensuelle | 2 000 aperçus par mois, avec tests d’accessibilité et analyse HTML |
| Stripo, BEE, Unlayer, React Email, Maizzle | Plans payants | Tarif sur demande | Non précisée | Non précisé |
Le calcul annuel est simple à faire. Plan Basic : 12 × 99 = 1 188 US$ par an. Plan Premium : 12 × 199 = 2 388 US$ par an. Au-delà de 2 000 aperçus par mois, la page tarifs d’Email on Acid ne liste pas de palier supérieur : il faut demander un devis, et votre budget doit intégrer ce cas si votre volume de tests grandit vite.
Côté MJML, le coût réel n’est pas la licence mais le temps de mise en place : un serveur de build, un pipeline de tests et une personne responsable des templates. Si cette personne existe déjà dans l’équipe, l’outil revient souvent moins cher que n’importe quel éditeur facturé à l’usage.
MJML : le choix par défaut pour les équipes qui codent
MJML sépare la structure de l’email (sections, colonnes, boutons) du HTML brut que votre client verra. Vous écrivez des balises simples, MJML produit des tableaux compatibles et s’occupe des particularités de Outlook. Pour le mode sombre, c’est un avantage : vos couleurs sont déclarées à un seul endroit, et vous pouvez ajouter un bloc de style prefers-color-scheme dans l’en-tête du template.
Ce que MJML fait bien pour le mode sombre : les couleurs de marque se gèrent dans des variables que vous réutilisez partout, les templates restent dans Git avec le reste du code, et les revues de code permettent de repérer un texte en couleur fixe qui disparaîtrait sur un fond sombre.
Où MJML est limité : il ne vous dit pas quels clients inverseront vos couleurs et il n’ajoute pas de logique de mode sombre automatique. Si votre équipe n’a pas de développeur à l’aise avec le HTML email, la courbe d’apprentissage est réelle. Le tarif est à lire sur la page officielle : aucun abonnement n’y est listé.
Consulter la page tarifs de MJML
React Email : quand votre équipe travaille déjà en React
React Email permet d’écrire chaque email comme un composant React, avec des props, des tests unitaires et un aperçu local. Pour une équipe produit qui a déjà un design system en React, c’est le chemin le plus court : le même composant peut servir d’email, de page de confirmation et de modal.
Points forts pour le mode sombre : vous pouvez centraliser les couleurs dans un fichier de thème, les injecter dans les styles et vérifier leur contraste dans un test automatisé. Les règles de mode sombre se reviennent dans un même composant, ce qui facilite les mises à jour.
Limites : le pipeline de build est un vrai investissement. Un designer sans compétence en JavaScript ne pourra pas modifier un template seul. Le tarif n’est pas publié : demandez-le au fournisseur avant de bâtir un processus autour de l’outil.
Maizzle : Tailwind pour les emails
Maizzle applique la logique de Tailwind aux emails. Vous écrivez des classes utilitaires, Maizzle les convertit en styles en ligne compatibles et produit le HTML final. Pour un développeur front-end qui connaît déjà Tailwind, la prise en main est rapide.
Point fort pour le mode sombre : les variantes de couleur de Tailwind se prêtent bien à un jeu de couleurs clair et sombre, défini une fois et réutilisé dans les templates.
Limites : l’environnement Node.js et la configuration sont à maintenir. Si votre équipe marketing doit ajuster une couleur sans passer par le code, ce n’est pas le bon outil. Le tarif est sur demande.
Stripo, BEE et Unlayer : les éditeurs visuels
Les éditeurs visuels vous permettent d’assembler un email par glisser-déposer. Ils sont utiles pour les équipes marketing qui publient souvent, mais ils posent une question précise en mode sombre : le code exporté est-il lisible, et les réglages de couleur alternatifs sont-ils accessibles sans bricoler le HTML ?
Stripo
Stripo est conçu pour produire des emails sans code. Il convient aux équipes qui veulent créer rapidement des modèles et les dupliquer. Pour le mode sombre, vérifiez la façon dont l’éditeur gère les couleurs de fond et les images : un export propre facilite les corrections manuelles ensuite. Le tarif est sur demande.
BEE
BEE est un éditeur visuel orienté modèles réutilisables. Il peut suffire à une équipe qui fait des campagnes récurrentes avec peu de variations. Avant de vous engager, testez un modèle avec un fond sombre et regardez si les couleurs de texte restent modifiables sans toucher au code. Le tarif est sur demande.
Unlayer
Unlayer est pensé pour être intégré dans un produit : votre application propose à ses utilisateurs un éditeur d’emails. C’est un bon choix si l’éditeur fait partie de votre produit. Dans ce cas, le mode sombre devient une fonctionnalité que vous devez exposer à vos clients, et le tarif est sur demande.
Règle commune aux trois : ne validez jamais un modèle sur la seule prévisualisation de l’éditeur. Exportez le HTML, ouvrez-le dans les clients que vos lecteurs utilisent réellement et vérifiez le rendu en mode sombre.
Les outils de test : vérifier le rendu avant l’envoi
Un outil de construction ne remplace pas un contrôle de rendu. Email on Acid sert à voir comment votre email s’affiche dans une grande variété de clients et d’appareils, et propose des aperçus pour les différents scénarios de couleur. Le plan Basic (99 US$ par mois) couvre 1 000 aperçus par mois ; le plan Premium (199 US$ par mois) en couvre 2 000 et ajoute les tests d’accessibilité et l’analyse HTML.
Si vous utilisez un autre service de test, vérifiez dans sa documentation s’il propose des aperçus en mode sombre et combien d’aperçus sont inclus. Ne vous fiez pas à une liste de clients prise sur une page de marketing : demandez l’échantillon exact dont vous avez besoin.
Écrire le mode sombre : un système de couleurs simple
Quel que soit l’outil, la méthode la plus fiable consiste à définir deux jeux de couleurs : un jeu clair et un jeu sombre. Le jeu clair est celui qui s’affiche par défaut. Le jeu sombre est appliqué uniquement aux clients qui lisent la media query.
<style>
@media (prefers-color-scheme: dark) {
.corps-fond {
background-color: #1a1a1a !important;
}
.texte-principal {
color: #f2f2f2 !important;
}
.texte-secondaire {
color: #b3b3b3 !important;
}
.carte {
background-color: #2a2a2a !important;
}
}
</style>Les noms de classes ci-dessus sont des exemples. Votre outil doit vous permettre de les déclarer une fois, puis de les appliquer à tous les blocs. Si votre éditeur ne permet que des couleurs en ligne, c’est une limite à noter dans votre comparatif.
Éviter les couleurs extrêmes
Le blanc pur (#ffffff) peut devenir un noir très dur après inversion, et le noir pur (#000000) peut devenir un blanc éblouissant. Préférez un fond légèrement cassé, par exemple #f5f5f5, et un texte gris très foncé, par exemple #333333. Ces couleurs gardent un contraste suffisant dans les deux modes.
Logos et images
Un logo avec fond transparent fonctionne mal sur fond sombre s’il est lui-même foncé. Deux solutions : fournir une version claire du logo pour le mode sombre, ou ajouter un fond discret derrière l’image. Le code suivant illustre la première option :
<style>
.logo-sombre { display: none; }
@media (prefers-color-scheme: dark) {
.logo-clair { display: none !important; }
.logo-sombre { display: block !important; }
}
</style>
<img class="logo-clair" src="logo-fonce.png" width="160" alt="Nom de la marque">
<img class="logo-sombre" src="logo-clair.png" width="160" alt="Nom de la marque">Attention : certains clients ignorent les media queries et conservent le premier logo, ce qui est acceptable si le logo reste lisible sur les deux fonds. Testez ce cas précis avant d’adopter la méthode.
Boutons
Un bouton doit rester lisible si la couleur de fond est inversée. Les couleurs de marque de milieu de gamme fonctionnent souvent dans les deux modes. Évitez un bouton très clair avec un texte foncé : il peut basculer en bouton sombre avec un texte sombre. Vérifiez le contraste entre le texte du bouton et son fond dans les deux jeux de couleurs.
Ce que les services d’envoi peuvent modifier
Le HTML que vous produisez n’est pas toujours celui qui arrive dans la boîte de réception. Le service d’envoi peut réécrire certaines balises, ajouter un pied de page, raccourcir les liens ou supprimer des blocs <style> qu’il juge risqués. Avant une première campagne, envoyez un email de test à votre propre boîte et comparez le code source reçu avec le HTML d’origine.
Si votre outil d’envoi propose un éditeur séparé, décidez où vit la version de référence. Un email modifié à la fois dans le constructeur et dans l’éditeur de l’outil d’envoi perd sa cohérence, et les corrections de mode sombre disparaissent à la prochaine modification.
Choisir selon votre équipe
Le bon outil dépend moins des fonctions que de la personne qui maintient les emails. Le tableau suivant résume les cas les plus fréquents.
| Si vous avez besoin de… | Choisissez | Parce que |
|---|---|---|
| Versionner les templates dans Git avec le code | MJML | Le markup est lisible et il n’y a pas d’abonnement à gérer |
| Réutiliser les composants d’une application React | React Email | Les emails partagent le même langage et les mêmes thèmes que le produit |
| Un style Tailwind cohérent entre le web et l’email | Maizzle | Les classes utilitaires se traduisent en styles compatibles |
| Une équipe marketing autonome, sans code | Stripo ou BEE | L’éditeur visuel couvre la mise en page sans intervention technique |
| Un éditeur d’emails dans votre propre produit | Unlayer | L’éditeur est conçu pour être intégré à une application |
| Vérifier le rendu clair et sombre avant envoi | Email on Acid, en complément de l’outil de construction | Le test de rendu reste indispensable quel que soit l’éditeur |
Checklist de mise en place
Voici l’ordre de travail que nous recommandons pour un premier template en mode sombre. Chaque étape se fait avec votre outil, sans modifier les réglages de vos clients.
| Étape | Action | Résultat attendu |
|---|---|---|
| 1 | Définir les deux jeux de couleurs (clair et sombre) dans un fichier ou un thème | Une seule source pour chaque couleur |
| 2 | Remplacer le blanc pur et le noir pur par des teintes légèrement décalées | Pas d’inversion trop dure |
| 3 | Ajouter le bloc media query et les classes de couleur | Le mode sombre est appliqué aux clients qui le lisent |
| 4 | Préparer une version claire du logo et vérifier les images à fond transparent | Logo lisible sur les deux fonds |
| 5 | Contrôler le contraste des boutons et des liens | Texte lisible dans les deux modes |
| 6 | Envoyer un test à plusieurs boîtes et comparer avec le HTML source | Aucune balise supprimée par le service d’envoi |
| 7 | Faire un aperçu clair et sombre dans un outil de test | Rendu validé avant la campagne |
Quand ne pas chercher le mode sombre parfait
Tous les emails n’ont pas besoin d’un traitement sur mesure. Les messages transactionnels comme les confirmations de commande ou les réinitialisations de mot de passe sont souvent plus importants que les campagnes promotionnelles : ils doivent être lisibles, mais un écart de couleur mineur ne compromet pas le message. Consacrez votre temps aux modèles que vos lecteurs ouvrent le plus.
Un design très fortement identifié par ses couleurs peut aussi être mieux servi par un mode clair forcé, si l’identité de la marque repose sur une combinaison précise. C’est un choix défendable, à condition de le décider en connaissance de cause et non par défaut.
Le mot de la fin
Le mode sombre en email est une cible mouvante : les applications changent, les algorithmes évoluent, et un rendu validé l’an dernier peut se comporter différemment aujourd’hui. Choisissez un outil qui produit du HTML lisible, définissez vos couleurs à un seul endroit, testez dans les clients que vos lecteurs utilisent, et acceptez qu’une partie des variations échappe à votre contrôle.
Questions fréquentes
Quel est le meilleur outil pour débuter avec le mode sombre dans les emails ?
Pour une équipe qui sait écrire du HTML, MJML reste le point de départ le plus simple : il n’a pas de forfait listé sur sa page tarifs et il vous laisse écrire les règles de couleur en clair. Si votre équipe marketing doit travailler seule, un éditeur visuel comme Stripo ou BEE est plus adapté, à condition de vérifier le code exporté.
Faut-il payer un outil de test pour le mode sombre ?
Pas nécessairement, mais un test visuel est difficile à remplacer. Email on Acid propose un plan Basic à 99 US$ par mois avec 1 000 aperçus, et un plan Premium à 199 US$ par mois avec 2 000 aperçus. Si vous envoyez peu de modèles différents, le plan Basic suffit souvent pour valider les rendus clés.
Pourquoi mon logo disparaît-il sur fond sombre ?
Le logo est probablement foncé et utilise un fond transparent. Fournissez une version claire pour le mode sombre, ou ajoutez derrière l’image un fond discret et un arrondi. Testez les deux cas, car certains clients ignorent la media query.
Les media queries prefers-color-scheme fonctionnent-elles partout ?
Non. Leur prise en charge varie selon le client de messagerie et sa version. Considérez-les comme une amélioration pour les clients qui les lisent, et prévoyez un rendu acceptable sans elles, avec des couleurs qui restent lisibles après inversion automatique.
Dois-je créer deux versions complètes de chaque email ?
Non, dans la plupart des cas. Un seul HTML avec deux jeux de couleurs suffit, à condition de bien nommer les classes et de tester les images. Une version dupliquée se désynchronise vite et double le travail de correction.
Mon service d’envoi modifie-t-il les règles de couleur ?
Il peut supprimer ou réécrire certains blocs de style. Envoyez un test à votre propre boîte, comparez le code reçu avec votre source, et corrigez les balises concernées avant la première campagne.
Quand faut-il forcer le mode clair ?
Lorsque l’identité de la marque repose sur des couleurs précises qui perdent leur sens une fois inversées, et que le message n’est pas critique. Décidez-le par modèle, pas pour toute la base d’emails, et notez la décision dans votre processus.