La prise en charge des styles de remplacement du mode sombre par les clients de messagerie se limite à Apple Mail sur iOS/macOS : les remplacements du mode sombre ne fonctionnent pas dans les autres clients comme Gmail, Outlook, etc. Gardez-le à l’esprit et concevez vos emails dans une logique d’amélioration progressive.
Tutoriel vidéo : ajouter des styles de mode sombre aux designs d’emails HTML
Cette vidéo montre comment ajouter des styles personnalisés de remplacement pour le mode sombre à vos designs d’email, afin d’exporter depuis Figma des emails HTML responsive et prêts pour la production avec le plugin Emailify.
Points de design importants pour le mode sombre
La prise en charge des styles de remplacement du mode sombre par les clients de messagerie se limite à Apple Mail sur iOS/macOS : les remplacements du mode sombre ne fonctionnent pas dans les autres clients comme Gmail, Outlook, etc. Gardez-le à l’esprit et concevez vos emails dans une logique d’amélioration progressive.
Comme chaque client de messagerie a sa propre implémentation, le mode sombre est très délicat à prendre en compte dans le design. Il vaut pourtant la peine d’essayer de composer avec les modifications (souvent désastreuses) que chaque client applique automatiquement en mode sombre.
Pour bien démarrer, consultez quelques ressources (comme ces articles de CampaignMonitor et de Litmus) qui détaillent précisément ce que modifient ces clients de messagerie et comment en atténuer certains effets dans le design.
Appliquer des remplacements de couleurs pour le mode sombre
Sélectionnez un élément, par exemple un calque de texte, une image, un Button, une Row, une Column ou un Wrapper, puis cliquez sur le bouton Settings dans l’en-tête du plugin. Vous pouvez définir les couleurs de texte et d’arrière-plan du mode sombre dans la section Dark Mode Overrides, en bas du panneau Settings.
Pour les calques Button, Row, Column et Wrapper, vous pouvez aussi définir un remplacement Border Color. Il modifie la couleur de la bordure en mode sombre sans changer l’épaisseur ni le style de bordure utilisés en mode clair.
Ces remplacements s’affichent dans les clients de messagerie qui prennent en charge cette fonctionnalité (les apps Apple Mail d’iOS/macOS) lorsque l’email est consulté sur un appareil où le mode sombre est activé.
La prise en charge des styles de remplacement du mode sombre par les clients de messagerie se limite à Apple Mail sur iOS/macOS : les remplacements du mode sombre ne fonctionnent pas dans les autres clients comme Gmail, Outlook, etc. Gardez-le à l’esprit et concevez vos emails dans une logique d’amélioration progressive.
Alterner entre deux calques d’image en mode sombre et en mode clair
Vous pouvez aussi remplacer certains calques d’image en mode sombre : cliquez sur votre calque de contenu Figma (à l’intérieur d’un calque Column), puis sur le bouton Settings dans l’en-tête du plugin, et activez l’option Only Hide in Dark Mode ou Only Show in Dark Mode, selon que vous voulez masquer ou afficher le calque d’image dans les clients de messagerie qui prennent en charge cette fonctionnalité (les apps Apple Mail d’iOS/macOS) lorsque l’email est consulté sur un appareil où le mode sombre est activé.
La prise en charge des styles de remplacement du mode sombre par les clients de messagerie se limite à Apple Mail sur iOS/macOS : les remplacements du mode sombre ne fonctionnent pas dans les autres clients comme Gmail, Outlook, etc. Gardez-le à l’esprit et concevez vos emails dans une logique d’amélioration progressive.
Prévisualiser le mode sombre dans le plugin
Ouvrez Preview et activez l’interrupteur Dark Mode dans la barre d’outils de l’aperçu HTML. Continuez à utiliser le sélecteur de largeur d’aperçu pour comparer le même design en mode sombre aux largeurs desktop et mobile. Dark Mode n’est pas disponible lorsque la vue hybride combinée Desktop & Mobile est sélectionnée.
L’aperçu local applique un traitement générique de mode sombre automatique et active les styles prefers-color-scheme de l’email. Ses ajustements de couleurs donnent une idée approximative et ne ciblent aucun client de messagerie en particulier. Si l’email contient des remplacements du mode sombre Emailify, utilisez l’interrupteur Overrides voisin pour afficher ou masquer ses styles explicites d’arrière-plan, de texte, de bordure et de remplacement d’images.
Cet interrupteur est une aide au design, pas un émulateur de client ou d’appareil. Il ne reproduit pas les filtres de nettoyage des clients connectés, les moteurs de rendu et polices natifs, l’interface des apps, le traitement à la livraison, ni toutes les différences entre clients et versions.
Tester vos emails en mode sombre
Tutoriel vidéo : tester en mode sombre des emails HTML exportés depuis Figma
Cette vidéo montre comment tester en mode sombre des emails HTML exportés depuis Figma avec le plugin Emailify et Litmus.com.
Il est toujours utile de tester vos propres emails avec un service comme Litmus ou Email on Acid pour vérifier qu’ils s’affichent bien avant de les envoyer.
La prise en charge des styles de remplacement du mode sombre par les clients de messagerie se limite à Apple Mail sur iOS/macOS : les remplacements du mode sombre ne fonctionnent pas dans les autres clients comme Gmail, Outlook, etc. Gardez-le à l’esprit et concevez vos emails dans une logique d’amélioration progressive.
Vous pouvez appliquer des réglages en masse : ouvrez Settings, puis sélectionnez dans Figma plusieurs calques Emailify du même type. Chaque réglage que vous modifiez s’applique alors à tous les calques sélectionnés.