Sur cette page : découvrez comment les clients de messagerie gèrent le mode sombre et comment prévisualiser et définir les paramètres personnalisés du mode sombre dans le Concepteur d’e-mail, ainsi que les bonnes pratiques pour un rendu cohérent.
Lors de la conception de vos e-mails, le Journey Optimizer Concepteur d’e-mail vous permet de passer à la vue Mode sombre.
Dans cette vue en mode sombre, vous pouvez également définir des paramètres personnalisés spécifiques qui seront affichés par les clients de messagerie en mode sombre.
Présentation du mode sombre what-is-dark-mode
La manière dont le mode sombre est rendu dans les différents clients de messagerie est complexe. Définissons d’abord le mode sombre.
Le mode sombre permet aux clients de messagerie et aux applications pris en charge d’afficher les e-mails avec des arrière-plans sombres et des couleurs plus claires pour le texte, les boutons et les autres éléments de l’interface d’utilisation. Il permet de réduire la fatigue oculaire, d’économiser la batterie et d’améliorer la lisibilité dans les environnements peu éclairés pour une expérience visuelle plus confortable.
Étant donné qu’il s’agit d’une tendance croissante dans les principaux systèmes d’exploitation et applications , cette fonctionnalité est devenue un point important à prendre en compte dans la conception d’e-mails modernes pour veiller à ce que le contenu reste lisible et visuellement attrayant pour l’ensemble des utilisateurs et utilisatrices.
Mécanismes de sécurisation guardrails
Les attentes en termes de rendu en mode sombre doivent rester mesurées, car leur application peut varier considérablement selon le client de messagerie.
Avant d’utiliser le mode sombre dans le Concepteur d’e-mail Journey Optimizer, il est essentiel de comprendre comment les principaux clients de messagerie le gèrent. Il existe trois cas :
Clients qui ne prennent pas en charge le mode sombre. not-supporting
Certains clients de messagerie ne prennent pas du tout en charge cette fonctionnalité, tels que :
- Yahoo!Mail
- AOL
Que vous définissiez des paramètres personnalisés pour le mode sombre ou non dans le Concepteur d’e-mail, ces clients de messagerie n’affichent jamais de rendu en mode sombre.
Clients qui appliquent leur propre mode sombre. default-support
Certains clients de messagerie appliquent uniquement leur propre mode sombre par défaut pour tous les e-mails reçus. Les couleurs, arrière-plans, images, etc., sont automatiquement ajustés avec les paramètres du mode sombre spécifiques au client de messagerie, ce qui signifie qu’aucune modification externe n’est possible.
Ces clients sont par exemple :
- Gmail (client de messagerie web de bureau, iOS, Android, client de messagerie web mobile)
- Outlook Windows
- Outlook Windows Mail
Dans ce cas, si vous définissez des paramètres de mode sombre personnalisés dans le Concepteur d’e-mail, ces paramètres sont remplacés par les paramètres du client de messagerie.
Il est important de comprendre que ces clients de messagerie gèrent le mode sombre, mais votre conception de mode sombre spécifique ne sera pas rendue.
Clients qui prennent en charge le mode sombre personnalisé. custom-support
D’autres clients de messagerie offrent la possibilité de rendre le mode sombre personnalisé avec la requête @media (prefers-color-scheme: dark), qui est la méthode utilisée par le Concepteur d’e-mail Journey Optimizer.
Voici une liste des principaux clients qui gèrent cette option :
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android
Dans ce cas, les paramètres spécifiques que vous définissez dans le Concepteur d’e-mail doivent s’afficher.
Cependant, certaines restrictions peuvent s’appliquer en fonction de chaque client de messagerie. Par exemple, certains clients tels qu’Apple Mail 16 (macOS 13) ne génèrent pas de mode sombre si des images sont présentes dans le contenu de l’e-mail.
Pour des résultats optimaux, testez votre contenu avec les clients de messagerie que vous ciblez. Pour visualiser une simulation qui se rapproche le plus possible du résultat final pour chaque client, utilisez l’option Rendu des e-mails dans le Concepteur d’e-mail.
Mode sombre dans le Concepteur d’e-mail dark-mode-email-designer
En ce qui concerne le mode sombre dans le Concepteur d’e-mail, deux aspects doivent être pris en compte :
- Vous pouvez prévisualiser la manière dont le mode sombre par défaut s’affichera dans la plupart des clients de messagerie pris en charge. En savoir plus
- Si vous souhaitez remplacer les paramètres par défaut des clients de messagerie pris en charge, vous pouvez définir des paramètres de mode sombre personnalisés qui s’appliquent à l’e-mail que vous être en train de modifier. En savoir plus
Prévisualiser le mode sombre par défaut preview-dark-mode
Pour accéder au mode sombre dans le Concepteur d’e-mail et prévisualiser les paramètres par défaut du mode sombre, procédez comme suit.
-
Dans la page d’accueil du Concepteur d’e-mail, cliquez sur le bouton Créer à partir de zéro. En savoir plus
-
Ajoutez des structures et des composants de contenu à votre contenu.
-
En haut à droite de la zone de travail centrale, cliquez sur le bouton pour passer en mode sombre.
-
La prévisualisation du mode sombre par défaut s’affiche.
Par défaut, l’aperçu en mode sombre du Concepteur d’e-mail applique le modèle de couleurs « inversion complète des couleurs » à tous les éléments, à l’exception des images et des icônes.
Cela signifie qu’il détecte les zones comportant des éléments clairs et sombres et les inverse, de sorte que les arrière-plans clairs deviennent sombres et que le texte sombre devient clair, tandis que les arrière-plans sombres deviennent clairs et que le texte clair devient sombre.
Définir le mode sombre personnalisé define-custom-dark-mode
Après avoir activé le mode sombre, vous pouvez choisir de modifier des éléments de style spécifiques dans votre contenu qui s’afficheront uniquement si le mode sombre est activé dans le client de messagerie de la personne destinataire, à condition que le client prenne en charge cette fonctionnalité.
Pour tirer parti du style du mode sombre personnalisé du Concepteur d’e-mail, Journey Optimizer utilise la requête CSS @media (prefers-color-scheme: dark), qui détecte si le client de messagerie de l’utilisateur ou de l’utilisatrice est en mode sombre et applique le thème sombre défini dans votre e-mail.
Pour définir les paramètres du mode sombre personnalisé, procédez comme suit.
-
Veillez à basculer vers l’aperçu en mode sombre dans le Concepteur d’e-mail. Voici comment procéder
-
Modifiez les attributs de couleurs du style, tels que le texte, les arrière-plans, les boutons, etc.
-
Vous ne pouvez pas modifier les couleurs des images et des icônes, mais vous pouvez définir des ressources spécifiques au mode sombre. Pour ce faire, sélectionnez une image. Passez en mode sombre à l’aide du bouton dédié dans le volet Paramètres et sélectionnez une autre ressource.
-
Vous pouvez à tout moment Passer en mode en direct afin de vérifier comment votre contenu s’affiche sur les différentes tailles d’appareils. Dans cette vue, cliquez sur le bouton Mode sombre en haut de l’écran pour prévisualiser la version en mode sombre de votre contenu sur les différents appareils.
note caution CAUTION Le mode en direct est une prévisualisation générique conçue pour comparer l’aspect du rendu sur différentes tailles d’appareils. Le rendu final peut varier en fonction du client de messagerie de la personne destinataire. -
Une fois que vous avez apporté les modifications souhaitées pour le mode sombre, cliquez sur Simuler le contenu, puis sélectionnez Simuler le contenu (profils AEP) dans la liste déroulante pour vérifier le rendu de l’e-mail.
-
Sélectionnez Rendu d’e-mail et connectez-vous à votre compte Litmus. Vous pouvez voir le rendu final en mode sombre pour divers clients de messagerie. En savoir plus sur le rendu des e-mails. Pour tester des variations de contenu avec des exemples de données d’entrée ou des données générées automatiquement par l’IA, cliquez directement sur Simuler le contenu. Découvrez comment simuler des variations de contenu.
note warning WARNING Bien que la simulation se rapproche beaucoup de la façon dont les e-mails s’afficheront en mode sombre, le rendu réel peut être différent en raison de variations au niveau des paramètres des fournisseurs de services de messagerie ou au niveau des paramètres des appareils.
Utiliser le mode sombre avec les thèmes dark-mode-themes
Si vous utilisez un thème avec le contenu de votre e-mail ou de votre modèle, vous pouvez également définir une version indépendante en mode sombre de chaque variante de couleur, directement au niveau du thème. Voici comment procéder
Bonnes pratiques best-practices
À mesure que l’adoption du mode sombre augmente dans les principaux clients de messagerie, il est essentiel d’examiner le rendu de vos e-mails à la fois dans les environnements clairs et sombres, que vous utilisiez le mode sombre personnalisé ou non.
Le mode sombre peut modifier les couleurs, les arrière-plans et les images, parfois en remplaçant les choix définis lors de la conception. Pour garantir la cohérence visuelle, l’accessibilité et l’intégrité de la marque, suivez les bonnes pratiques répertoriées ci-dessous.
Optimiser vos images et vos logos
-
Enregistrez les logos et les icônes au format PNG avec des arrière-plans transparents pour éviter la présence de zones blanches visibles en mode sombre.
-
Évitez les images avec des arrière-plans blancs ou clairs codés en dur.
-
Si vous ne pouvez pas utiliser la transparence, placez les images sur un arrière-plan uni dans votre conception pour éviter des inversions de couleurs inappropriées.
Vérifier vos arrière-plans
-
Vérifiez que le contraste entre le texte et les couleurs d’arrière-plan est suffisant pour garantir une bonne lisibilité en mode clair et en mode sombre.
-
Évitez de vous fier uniquement aux couleurs d’arrière-plan pour du contenu important. Certains clients remplacent les couleurs d’arrière-plan en mode sombre ; veillez donc à ce que les informations clés soient toujours visibles.
Concevoir du contenu accessible en mode sombre
-
Utilisez des combinaisons de couleurs faciles à distinguer pour les personnes atteintes de daltonisme.
-
Utilisez une palette de tons moyens pour garantir un contraste adéquat par rapport à des arrière-plans clairs et sombres.
-
Utilisez des combinaisons de couleurs accessibles à fort contraste pour améliorer la lisibilité et respecter les normes WCAG. Utilisez des outils tels que le vérificateur de contraste de WebAIM pour vérifier le contraste des couleurs.
-
Évitez les polices de caractères fines, car elles peuvent affecter la lisibilité. Si votre marque nécessite l’utilisation d’une police fine, mettez-la en gras en mode sombre.
-
N’utilisez pas de blanc pur sur du noir pur, car cela peut entraîner une fatigue oculaire et peut être automatiquement inversé par certains clients de messagerie.
-
Fournissez un style de secours accessible si le mode sombre n’est pas pris en charge.
Tester vos e-mails dans un environnement en mode sombre
-
Utilisez la prévisualisation du mode sombre du Concepteur d’e-mail, qui utilise des modèles de couleurs inversées, pour repérer les problèmes en amont.
-
Utilisez l’option Rendu des e-mails qui tire parti de Litmus pour simuler vos conceptions sur les principaux clients de messagerie (Apple Mail, Gmail, Outlook) et voir comment les couleurs et les images se comportent en mode sombre.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how email clients handle dark mode and how to preview the default dark mode and define custom dark mode settings in the Email Designer, along with best practices for consistent rendering.
Intents:
- Understand how the main email clients handle dark mode
- Preview the default dark mode in the Email Designer
- Define custom dark mode settings, including specific images for dark mode
- Check rendering with Switch to live view and Simulate content
- Apply best practices for images, backgrounds, and accessible dark mode content
Glossary:
- Dark mode: A view letting supporting email clients display emails with darker backgrounds and lighter text, buttons, and UI elements (product-specific)
- Full color invert: The color scheme the default dark mode preview applies to all elements except images and icons, inverting light and dark areas (product-specific)
- Custom dark mode: Specific styling settings you define that display only when dark mode is enabled in a supporting recipient’s email client (product-specific)
- Switch to live view: A generic preview to compare how content renders across various device sizes, with a Dark mode toggle (product-specific)
- Simulate content: The option used (via Simulate content (AEP profiles), then Render email with Litmus) to check email rendering (product-specific)
Guardrails:
- The final dark mode rendering depends on the recipient’s email client and can vary a lot from one to another.
- Clients that do not support dark mode (for example Yahoo!Mail, AOL) never display any dark mode rendering, whether or not custom settings are defined.
- Clients that apply their own default dark mode (for example Gmail, Outlook Windows, Outlook Windows Mail) override any custom dark mode settings defined in the Email Designer.
- Custom dark mode renders only on clients supporting the
@media (prefers-color-scheme: dark)query (for example Apple Mail macOS, Apple Mail iOS, Outlook macOS, Outlook.com, Outlook iOS, Outlook Android). - The default dark mode preview applies the full color invert color scheme to all elements except images and icons.
- You cannot change the colors of images and icons, but you can define specific assets for dark mode only.
- Some clients such as Apple Mail 16 (macOS 13) will not generate dark mode if images are present in the email content.
Terminology:
- Canonical name: Dark mode — Acronym: n/a — variants: Dark mode view, custom dark mode
- Method: Journey Optimizer uses the
@media (prefers-color-scheme: dark)CSS query for custom dark mode - Do not confuse: “default dark mode preview” (full color invert applied by the Email Designer) ≠ “custom dark mode” (specific settings you define)
- Do not confuse: “Switch to live view” (generic multi-device preview) ≠ “Simulate content” / “Email rendering” (Litmus-based simulation across email clients)
FAQ:
- Q: Will my dark mode design look the same everywhere? — No; the final rendering depends on each recipient’s email client and can vary; it cannot be guaranteed identical across clients.
- Q: Why do my custom dark mode settings not appear in Gmail? — Clients such as Gmail apply their own default dark mode, which overrides the custom settings defined in the Email Designer.
- Q: Can I change image colors for dark mode? — No; you cannot change the colors of images and icons, but you can define specific assets to display in dark mode.
- Q: How do I check the closest rendering to the final result? — Use Simulate content, then Simulate content (AEP profiles) and Render email with a Litmus account, or the Email rendering option.
- Q: What color scheme does the default preview use? — Full color invert, applied to all elements except images and icons.