Cet article est aussi disponible en :

Personnaliser le mode sombre (dark mode) d'un élément Engage

Le mode sombre permet d'adapter automatiquement l'apparence de vos éléments Engage lorsque le visiteur utilise un thème sombre sur son appareil ou son navigateur.
Toutes les personnalisations effectuées pour le mode sombre sont indépendantes du mode clair. En d'autres termes, les modifications apportées au thème sombre n'ont aucun impact sur le rendu du thème clair.

Par défaut, le thème sombre reprend automatiquement les styles définis pour le thème clair. Seules les propriétés que vous personnalisez pour le mode sombre remplaceront les valeurs du mode clair.

Cette fonctionnalité est actuellement disponible uniquement dans Engage. Elle sera prochainement disponible dans Access.

Forcer le thème d'affichage d'un élément Engage

Par défaut, l'élément Engage utilise automatiquement le thème détecté depuis le navigateur du visiteur (prefers-color-scheme).

Si besoin, vous pouvez forcer l'affichage d'un thème spécifique en configurant le paramètre theme :

light : force l'affichage en mode clair.
dark : force l'affichage en mode sombre.
auto : utilise automatiquement la préférence du navigateur (valeur par défaut).

Cette configuration est optionnelle. Il n'est pas nécessaire de la définir si vous souhaitez conserver le comportement automatique.

Pour plus d'informations sur la configuration du thème, consultez notre documentation dédiée :
Configurer le thème d'un élément Engage

Exemple :

engage.config('theme', 'light');

Méthode 1 : Personnalisation via les styles des blocks

Pour personnaliser l'apparence d'un élément en mode sombre directement dans l'éditeur:

Ouvrez le block que vous souhaitez modifier.
Accédez à l'onglet Styles.
Accédez à la tab Thème sombre.
Personnalisez les propriétés souhaitées (couleur de fond, texte, bouton CTA, bordures, etc.).

Ces modifications seront appliquées uniquement lorsque l'élément est affiché en mode sombre.

Méthode 2 : Personnalisation avancée avec du CSS

Pour des personnalisations plus poussées, vous pouvez utiliser du CSS dédié au mode sombre.

Ouvrez les options de l'élément.
Cliquez sur le toggle "Thème sombre".
Ajoutez vos règles CSS dans le sélecteur :

.dark {
  /* Vos styles */
}

Tous les styles définis dans le sélecteur .dark seront appliqués uniquement lorsque le mode sombre est actif.
Cette méthode est particulièrement utile pour réaliser des personnalisations avancées qui ne sont pas disponibles via les options de style.

Utilisation avec les templates

Si vous créez un élément à partir d'un template présent dans la plateforme, les principaux styles (couleurs, arrière-plans, boutons, textes, etc.) sont déjà exposés dans les champs de configuration situés dans le panneau de gauche.
Il suffit de modifier les valeurs prévues pour le mode sombre afin d'adapter rapidement votre template, sans avoir à intervenir directement sur le CSS.

Comme pour les autres méthodes, ces modifications sont strictement limitées au mode sombre et ne modifient pas l'apparence du mode clair.

Mis à jour le : 21/07/2026

Cet article a-t-il répondu à vos questions ?

Merci !