Le dark mode, c'est quoi ?
Le "Dark Mode" ou "Mode sombre" en français, permet d'assombrir les surfaces claires d'un smartphone ou ordinateur pour ainsi créer une luminosité et un contraste idéal pour le confort des yeux.
Lancé en été 2019 avec l’arrivée de systèmes d’exploitation comme iOS13, macOS Mojave et Android 10, quand le dark mode est activé sur l’OS, les informations sont transmises à l’ensemble du contenu (application, page web ou e-mail) qui peut en tenir compte.
Quels clients de messagerie prennent en charge le mode sombre ? (mis à jour le 28 octobre 2021)
Applications mobiles :
Courrier iPhone et iPad
Application Gmail (Android et IOS)
Application Outlook (Android et IOS)
Clients de bureau :
Courrier Apple
Outlook 2019 (Mac OS et Windows)
Clients Web :
Outlook.com
Hey.com
De nombreuses plateformes se sont mises à la page du mode sombre, comme YouTube, Gmail, Instagram, Twitter, et bien plus encore.
Les clients mails ci-dessus offrent le mode sombre, cependant certains d'entre eux font des modifications, en voici la liste :
Une différence d’affichage (mode sombre et mode clair), aujourd'hui réglée !
Certains utilisateurs du dashborard Mediego connaissent une différence d’affichage des newsletters quand le mode sombre est activé, car les couleurs sont automatiquement remplacées sur les appareils de lecture des utilisateurs.
Tout ça fait maintenant partie du passé.
Nous venons de lancer le Mode Sombre dans vos newsletters !
Vous avez donc la possibilité de configurer le rendu de vos newsletters pour chaque mode (le mode clair et le mode sombre).
Comment mettre en place le "dark mode" sur vos newsletters ?
Nous venons de sortir une fonctionnalité permettant de gérer les images de vos newsletters en fonction du mode clair et du mode sombre. Attention, utilisez cette fonctionnalité avec parcimonie car elle alourdit le code généré. Pour que le "dark mode" soit parfaitement déployé il vous faut :
Passer les images en .png
Prévoir un logo clair et un logo foncé (même principe pour les icônes p. ex. CTA vers les réseaux sociaux)
Mettre des contours noirs/blancs autour des typos & images (avec un contour blanc/noir, vous n’aurez pas besoin d’ajouter deux versions de l’image puisque les contours seront présents sur les deux versions de la newsletter. Cette astuce est donc utile pour prendre en charge le dark mode sans alourdir le code de la newsletter).
⚠️ Testez vos newsletters sur les 2 modes pour prévisualiser le rendu.
Comment gérer le "Dark Mode" sur le dashboard ?
Rendez-vous sur la newsletter que vous souhaitez visualiser ou modifier.
Le Template s'affiche comme habituellement.
Cliquez sur le bouton en bas au centre de votre Template, pour activer ou désactiver la vue "dark mode"
Quand le dark mode est activé :
Le fond change en bleu nuit pour simuler le mode nuit.
Vous avez accès au Chemin mode jour / Chemin mode nuit
Voici ce qui s'affiche (image1) quand vous activez le mode nuit (en bas, comme montré ci-dessous), et quand il n'est pas activé (image2).
! Attention ! : l’image ne doit ni être éditorialisée, ni être rattachée à un article, sinon le mode nuit affichera l'autre image. En d’autres termes, utilisez cette fonctionnalité sur les images statiques.
Vous avez la possibilité de choisir les images que vous voulez mettre quand le mode nuit est activé
Comment faire ?
Activer le dark mode comme expliqué ci-dessus
Rendez-vous dans Paramètres > Image
Dans Chemin, vous pouvez choisir l'image qui apparaîtra avec "Mode Jour" et avec le "Mode Nuit" (comme sur l'exemple ci-après)
Quand nous sauvegardons/envoyons la newsletter
Si celle-ci contient au moins une image dark mode.
Les modifications faites sur le code sont les suivantes :
Cependant ça alourdit le code, c'est pourquoi il est préférable de l'utiliser avec parcimonie.
Nous vous recommandons d'utiliser des images PNG avec des contours blancs.
Les balises meta ajoutées dans le <head>
<meta name="color-scheme" content="dark light">
<meta name="supported-color-schemes" content="dark light">Le HTML qui contient des balises images sont doublées avec des classes spécifiques pour le dark mode
<img class="mdg-img mdg-light" width="100" src="url-jour.jpg" style="width: 100%; display: block;">
<!--[if !mso]><!-->
<img class="mdg-img mdg-dark" width="100" src="url-nuit.jpg" style="width: 100%; display: none;">
<!--<![endif]-->