---
url: "/fr/emailify/design/dark-mode.md"
description: "Les remplacements du mode sombre ne sont pris en charge que dans les apps Apple Mail d’iOS/macOS (Gmail, Outlook, etc. _ne prennent pas en charge_ ces remplacements)."
---

# Ajouter des remplacements de design pour le mode sombre (pris en charge uniquement dans Apple Mail sur iOS/macOS)

> Les remplacements du mode sombre ne sont pris en charge que dans les apps Apple Mail d’iOS/macOS (Gmail, Outlook, etc. _ne prennent pas en charge_ ces remplacements).

> **Warning:** La [prise en charge des styles de remplacement du mode sombre](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/uAxQ5Psi1m4)

## Points de design importants pour le mode sombre {#important-design-considerations-for-dark-mode}

![Prise en charge du CSS du mode sombre par les clients de messagerie](/assets/images/emailify/caniemail-dark-mode.jpg)

> **Warning:** La [prise en charge des styles de remplacement du mode sombre](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

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](https://www.campaignmonitor.com/blog/email-marketing/designing-an-email-for-dark-mode-dark-and-light-optimization/) et de [Litmus](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)) 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 {#applying-dark-mode-color-overrides}

[Video](/assets/videos/emailify/design/dark-mode-color-override.mp4)

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](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) cette fonctionnalité (les apps Apple Mail d’iOS/macOS) lorsque l’email est consulté sur un appareil où le mode sombre est activé.

> **Warning:** La [prise en charge des styles de remplacement du mode sombre](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

## Alterner entre deux calques d’image en mode sombre et en mode clair {#swapping-between-two-image-layers-in-dark-and-light-mode}

[Video](/assets/videos/emailify/design/swap-dark-mode-content.mp4)

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](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) cette fonctionnalité (les apps Apple Mail d’iOS/macOS) lorsque l’email est consulté sur un appareil où le mode sombre est activé.

> **Warning:** La [prise en charge des styles de remplacement du mode sombre](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

## Prévisualiser le mode sombre dans le plugin {#previewing-dark-mode-in-the-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.

> **Warning:** 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 {#testing-your-emails-in-dark-mode}

### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/h5Gq9apZrxk)

Il est toujours utile de tester vos propres emails avec un service comme [Litmus](https://www.litmus.com/) ou [Email on Acid](https://www.emailonacid.com/) pour vérifier qu’ils s’affichent bien avant de les envoyer.

> **Warning:** La [prise en charge des styles de remplacement du mode sombre](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) 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](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

> **Tip:** Vous pouvez [appliquer des réglages en masse](/fr/emailify/design/settings#apply-settings-in-bulk) : 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.