Comment utiliser du CSS personnalisé pour personnaliser l’apparence de mon e-mail en mode sombre ?

Vous pouvez utiliser le CSS personnalisé dans l’éditeur d’e-mails pour modifier les couleurs des boutons et des sections, ajuster l’arrière-plan du message et garantir la visibilité des logos en mode sombre. Vous pouvez également conserver certaines couleurs de votre mise en page en mode clair.

Vous pouvez commencer par les options de base du mode sombre lors de la préparation de votre e-mail. Si votre message nécessite encore des ajustements (par exemple, si un logo devient difficile à distinguer ou si les couleurs des boutons perdent en contraste), vous pouvez utiliser le CSS personnalisé pour affiner son apparence.

Les exemples présentés dans cet article contiennent des commentaires entre /* et */. Ceux-ci expliquent à quoi sert chaque groupe de règles. Vous pouvez laisser ces commentaires lorsque vous copiez le code ; ils n’ont aucune incidence sur son fonctionnement.

Certains exemples comportent plusieurs groupes de règles, car les applications de messagerie prennent en charge différentes techniques :

  • @media (prefers-color-scheme: dark) applique les styles du mode sombre dans les applications prenant en charge cette requête média.
  • [data-ogsc] et [data-ogsb] fournissent des règles supplémentaires pour le mode sombre dans certaines applications Outlook.
  • background-image: linear-gradient(...) permet de conserver les couleurs d’arrière-plan dans les applications Gmail.

Conservez !important dans les exemples afin que les règles puissent prévaloir sur les couleurs définies par l’éditeur. Conservez les classes de bloc dans les sélecteurs afin que vos styles ciblent bien les éléments souhaités.

Les codes de couleur sont donnés à titre d’exemple. Lorsque vous conservez une couleur, utilisez la couleur exacte de votre conception en mode clair. Si vous modifiez cette couleur ultérieurement dans l’éditeur, mettez également à jour le CSS.

De quoi avez-vous besoin avant d’ajouter des styles personnalisés

Vous devez avoir accès à l’option CSS personnalisé et maîtriser le langage CSS. Consultez l’article Comment utiliser l’option CSS personnalisé dans l’éditeur d’e-mails ?.

Vous devez activer le CSS personnalisé pour chaque bloc que vous souhaitez cibler. Sans cela, la classe CSS du bloc n’est pas ajoutée à l’e-mail envoyé, et les styles personnalisés ne s’appliqueront donc pas. Cela s’applique également lorsque vous ajoutez le code à l’ensemble du message.

Ajouter du CSS personnalisé à un bloc

Pour préparer un bloc :

  1. Sélectionnez le bouton, la section ou l’image que vous souhaitez personnaliser.
  2. Activez l’option Ajouter une règle CSS personnalisée dans le panneau de droite.
  3. Dans le champ CSS, saisissez .elem pour afficher la classe du bloc sélectionné.
  4. Copiez la classe et utilisez-la pour remplacer chaque occurrence de .elem-ID dans l’exemple que vous avez choisi.
Ajout de CSS personnalisé à un bloc d’image avec le paramètre .elem visible dans le bloc.

Par exemple, remplacez .elem-ID par une classe telle que .elem-image-5dc6501190a6. La classe sera différente pour chaque bloc.

Ajouter du CSS personnalisé à l’ensemble du message

Pour appliquer les styles du mode sombre à l’ensemble de votre message :

  1. Ouvrez Style du message.
  2. Développez la section CSS personnalisée.

    Ajout de styles CSS personnalisés à l’ensemble du message dans l’onglet « Style du message » de l’éditeur de messages.

  3. Ajoutez ce code une seule fois par message, avant vos autres règles. Cela permet de prendre en charge à la fois les schémas de couleurs clairs et sombres. Testez le résultat dans toutes les applications de messagerie utilisées par vos destinataires.
:root {
 color-scheme: light dark;
 supported-color-schemes: light dark;
}

Comment modifier les couleurs des boutons en mode sombre

Ajoutez le code suivant au CSS personnalisé du bouton. Remplacez chaque .elem-ID par la classe du bouton.

Cet exemple utilise un fond orange clair et du texte foncé dans les applications de messagerie compatibles. 

1/* Styles du mode sombre pour les applications prenant en charge cette requête média,
2  y compris les versions prises en charge d’Apple Mail, Outlook et Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID table td,
5  .elem-ID a,
6  .elem-ID p {
7    background-color: #FFB27A !important;
 8  }
9
10  .elem-ID a,
11  .elem-ID p {
12    color: #1A1A1A !important;
13  }
14}
15
16/* Règles d'arrière-plan supplémentaires pour Outlook.com et les applications mobiles Outlook */
17 [data-ogsb] .elem-ID table td,
18[data-ogsb] .elem-ID a,
19[data-ogsb] .elem-ID p {
20  background-color: #FFB27A !important;
21}
22
23/* Règles de mise en forme supplémentaires pour Outlook.com et les applications mobiles Outlook */
24[data-ogsc] .elem-ID a,
25[data-ogsc] .elem-ID p {
26  color: #1A1A1A !important;
27}

Conservez les sélecteurs « a » et « p ». Ils s’appliquent aux boutons comportant ou non un lien. Les règles commençant par[data-ogsb] et [data-ogsc] offrent une prise en charge supplémentaire dans certaines applications Outlook.

Comment conserver les couleurs d’origine du bouton

Utilisez le même exemple, mais remplacez :

  • #FFB27A par la couleur d’arrière-plan du bouton en mode clair.
  • #1A1A1A par la couleur du texte du bouton en mode clair.

Pour aider à préserver l’arrière-plan dans les applications Gmail, ajoutez également cette règle. Remplacez les deux occurrences de #FF6600 par la couleur d’arrière-plan de votre bouton en mode clair :

.elem-ID table td,
.elem-ID a,
.elem-ID p {
 background-image: linear-gradient(#FF6600, #FF6600) !important;
}

Comment modifier les couleurs des sections en mode sombre

Ajoutez ce code dans le CSS personnalisé de la section et remplacez chaque .elem-ID par la classe de la section :

1/* Styles du mode sombre pour les applications prenant en charge cette requête média,
2  y compris les versions prises en charge d’Apple Mail, Outlook et Samsung Email */
3@media (prefers-color-scheme: dark) {
4  .elem-ID,
5  .elem-ID > table {
6    background-color: #1E1E1E !important;
7  }
 8
9  .elem-ID div > p,
10  .elem-ID div > h1,
11  .elem-ID div > h2,
12  .elem-ID div > h3,
13  .elem-ID li {
14    color: #F2F2F2 !important;
15  }
16}
17
18/* Règles d’arrière-plan supplémentaires pour Outlook.com et les applications mobiles Outlook */
19[data-ogsb] .elem-ID,
20[data-ogsb] .elem-ID > table {
21  background-color: #1E1E1E !important;
22}
23
24/* Règles de mise en forme supplémentaires pour Outlook.com et les applications mobiles Outlook */
25[data-ogsc] .elem-ID div > p,
26[data-ogsc] .elem-ID div > h1,
27 [data-ogsc] .elem-ID div > h2,
28[data-ogsc] .elem-ID div > h3,
29[data-ogsc] .elem-ID li {
30  color: #F2F2F2 !important;
31}

Cet exemple attribue à la section un arrière-plan sombre et un texte clair. Il s’applique aux sections standard et à largeur pleine, tout en conservant les couleurs propres aux boutons situés à l’intérieur de la section.

Les colonnes dotées de leurs propres couleurs d’arrière-plan nécessitent des règles distinctes. Les fragments de texte auxquels des couleurs ont été attribuées individuellement peuvent néanmoins être gérés par l’application de messagerie.

Comment conserver les couleurs du mode clair de la section

Utilisez le même exemple, mais remplacez :

  • #1E1E1E par la couleur d’arrière-plan de la section en mode clair.
  • #F2F2F2 par la couleur du texte de la section en mode clair.

Définissez ces deux couleurs ensemble. Si vous ne conservez qu’un arrière-plan clair, vous risquez de vous retrouver avec du texte clair sur un arrière-plan clair si l’application de messagerie modifie la couleur du texte.

N’appliquez pas la technique de dégradé de Gmail à une section comportant du texte foncé sur fond clair. Gmail pourrait éclaircir le texte tandis que le dégradé maintiendrait le fond clair, rendant ainsi le contenu difficile à lire.

Comment modifier l’arrière-plan du message en mode sombre

Ajoutez cet exemple au CSS personnalisé de l’ensemble du message, sous la configuration au niveau du message :

1/* Modifier l’arrière-plan du message dans les applications prenant en charge cette requête média */
2@media (prefers-color-scheme: dark) {
3  body,
4  .elem-body {
5    background-color: #121212 !important;
 6  }
7}
8
9/* Règle d’arrière-plan supplémentaire pour Outlook.com et les applications mobiles Outlook */
10[data-ogsb] .elem-body {
11  background-color: #121212 !important;
12}

Cela modifie l’arrière-plan autour de vos sections dans les applications de messagerie compatibles. Les sections disposant de leur propre arrière-plan nécessitent leurs propres styles.

Ne modifiez pas .elem-body. Il s’agit de la classe réelle du message, et non d’un espace réservé.

Pour conserver l’arrière-plan d’origine du message, remplacez #121212 par sa couleur en mode clair. Cela n’empêchera pas toutes les applications de messagerie de modifier l’arrière-plan.

Comment garantir la visibilité d’un logo sombre

Un logo sombre sur fond transparent peut devenir difficile à distinguer lorsque la zone située derrière lui s’assombrit. Vous pouvez ajouter un fond clair derrière l’image.

Ajoutez ce code dans le CSS personnalisé du bloc d’image et remplacez chaque .elem-ID par la classe du bloc d’image :

1/* Ajouter un arrière-plan clair dans les applications prenant en charge cette requête média */
2@media (prefers-color-scheme: dark) {
3  .elem-ID img {
4    background-color: #FFFFFF !important;
 5  }
6}
7
8/* Règle d’arrière-plan supplémentaire pour Outlook.com et les applications mobiles Outlook */
9[data-ogsb] .elem-ID img {
10  background-color: #FFFFFF !important;
11}
12
13/* Applications Gmail : conserver l’arrière-plan derrière l’image.
14  Cette règle s’applique également en mode clair. */
15.elem-ID img {
16  background-image: linear-gradient(#FFFFFF, #FFFFFF) !important;
17}

Remplacez #FFFFFF partout par la couleur d’arrière-plan du mode clair de la section. Le dégradé permet de conserver cet arrière-plan dans les applications Gmail et s’applique également en mode clair.

Une image qui possède déjà un arrière-plan uni, comme un fichier JPG, ne nécessite généralement pas cet ajustement.

Comment utiliser une image différente en mode sombre

Vous pouvez également utiliser une image distincte conçue pour les arrière-plans sombres. La technique suivante bénéficie d’une prise en charge limitée et est destinée aux applications de messagerie basées sur WebKit, telles qu’Apple Mail.

Collez-la dans le CSS personnalisé du bloc d’image :

@media (prefers-color-scheme: dark) {
 .elem-ID img {
   content: url("https://example.com/logo-dark.png") !important;
 }
}

Remplacez .elem-ID par la classe du bloc d’image et l’exemple de l’URL par l’URL de votre image en mode sombre.

Utilisez une image présentant les mêmes proportions que l’originale. Veillez à ce que l’image originale reste utilisable dans les deux modes, car d’autres applications de messagerie pourraient continuer à l’afficher.

Pourquoi les styles s’affichent-ils différemment selon les applications de messagerie

Les applications de messagerie gèrent le mode sombre de manière différente. Les commentaires dans les exemples décrivent l’utilisation prévue de chaque technique ; ils ne garantissent pas la prise en charge dans toutes les versions d’une application.

Application de messagerieÀ quoi s’attendre
Apple Mail, les applications Outlook prises en charge sur macOS et Samsung EmailLes règles de media query pour le mode sombre peuvent s’appliquer. Testez l’application et la version concernées.
Outlook.com et les applications Outlook sur iOS et AndroidDes règles supplémentaires spécifiques à Outlook peuvent s’avérer utiles, mais la prise en charge varie.
Applications GmailLes dégradés peuvent conserver les arrière-plans sélectionnés, mais les couleurs du texte peuvent tout de même changer. Les exemples de changement de couleur en mode sombre ne s’appliquent pas.
Outlook pour WindowsCes exemples ne permettent pas de contrôler de manière fiable les changements de couleur propres au mode sombre de l’application.
Yahoo et AOLLes règles de media query pour le mode sombre utilisées ici ne sont pas prises en charge.
Applications supprimant les styles intégrésLe CSS personnalisé peut être entièrement ignoré.

Que se passe-t-il si Gmail ignore un extrait de code ?

Essayez de déplacer les règles spécifiques à Outlook — celles qui commencent par [data-ogsc] ou [data-ogsb] — dans le CSS personnalisé de l’ensemble du message, en les séparant des autres règles du bloc.

Laissez le CSS personnalisé activé sur le bloc ciblé et conservez sa classe dans chaque sélecteur.

Dépannage

Si aucun des styles ne s’applique, vérifiez que :

  • Le CSS personnalisé est activé sur chaque bloc ciblé.
  • Chaque .elem-ID a bien été remplacé par la classe de bloc appropriée.
  • .elem-body n’a pas été modifié dans les règles d’arrière-plan du message.
  • L’application de messagerie du destinataire prend en charge la technique que vous utilisez.
  • Vous ne combinez pas ces exemples avec l’option « Forcer le mode clair ».

Avant d’envoyer le message à votre liste de diffusion, veillez à le tester.

  1. Vérifiez la mise en page aussi bien en mode clair qu’en mode sombre.
  2. Envoyez des messages de test vers les applications de messagerie et les appareils utilisés par vos destinataires.
  3. Vérifiez le contraste du texte, les libellés des boutons, la visibilité du logo et les arrière-plans autour des sections.
  4. Vérifiez que la mise en page d’origine reste lisible lorsque les styles personnalisés ne sont pas pris en charge.
  5. Répétez les tests après avoir modifié les couleurs ou les images.

Remarque : l’aperçu en mode sombre de l’éditeur ne reproduit pas le comportement de toutes les applications de messagerie, et le CSS personnalisé n’apparaît pas dans l’aperçu standard du message.

Articles connexes

Ressources populaires