Ce guide explique comment configurer des palettes de couleurs pour le mode clair et le mode sombre pour le thème de votre site Discourse. Il couvre la configuration par thème, l’attribution de palette et les considérations relatives à l’interface utilisateur.
Niveau d’utilisateur requis : Administrateur
La configuration de palettes de couleurs distinctes pour le mode clair et le mode sombre vous permet de présenter votre communauté Discourse d’une manière qui correspond à votre marque, améliore l’accessibilité et donne à vos utilisateurs le contrôle sur leur expérience de visualisation. Les améliorations récentes du système de thèmes de Discourse vous permettent d’attribuer une palette claire et une palette sombre préférées à chaque thème, et de permettre aux utilisateurs de choisir l’apparence souhaitée.
Résumé
Ce guide couvre :
- Comprendre les attributions de palettes pour le mode clair et le mode sombre
- Attribution de palettes de couleurs claires et sombres à un thème
- Gestion des palettes de couleurs de votre site
- Activation du sélecteur de mode couleur pour les utilisateurs
- Comprendre les options visibles par l’utilisateur
- Bonnes pratiques pour l’utilisation des palettes et l’accessibilité
Comprendre les attributions de palettes pour le mode clair et le mode sombre
Les thèmes Discourse prennent en charge l’attribution explicite d’une palette de couleurs « claire » et d’une palette de couleurs « sombre ». De cette façon, n’importe quel thème peut basculer automatiquement en fonction du paramètre système de l’utilisateur, ou laisser l’utilisateur choisir un mode préféré, tout en conservant vos couleurs de marque préférées.
Attribution des palettes claires et sombres à un thème
Pour configurer les palettes de couleurs de votre thème :
-
Accédez à Administration > Apparence > Thèmes et composants (
/admin/config/customize/themes) -
Cliquez sur le thème que vous souhaitez modifier.
-
Dans les paramètres du thème, localisez la section Palettes de couleurs.
-
Pour Palette de couleurs et Palette de couleurs sombres, sélectionnez la palette que vous souhaitez utiliser.
-
Cliquez sur Enregistrer en bas de la page des paramètres du thème.
Cela garantit que le thème de votre site utilisera la palette correcte pour les utilisateurs en mode clair et en mode sombre. Notez que d’autres palettes sélectionnables par l’utilisateur peuvent toujours être choisies par vos membres, mais celles que vous définissez ici seront les valeurs par défaut.
Gestion de vos palettes de couleurs
Toutes les palettes de couleurs disponibles (et leurs attributions liées) peuvent être gérées de manière centralisée :
-
Accédez à Administration > Apparence > Palettes de couleurs (
/admin/config/colors) -
Ici, vous pouvez modifier, ajouter ou supprimer des palettes, les marquer comme sélectionnables par l’utilisateur et les attribuer comme palettes claires et sombres par défaut de votre thème.
Activation du sélecteur de mode couleur
Avant que les utilisateurs ne puissent basculer entre le mode clair et le mode sombre sur le site, vous devez activer le paramètre de site interface_color_selector. Par défaut, celui-ci est défini sur désactivé.
Pour l’activer :
- Accédez à Administration > Paramètres et recherchez
sélecteur de couleur d'interface. - Définissez-le sur l’une des options suivantes :
- Afficher dans le pied de page de la barre latérale — ajoute un interrupteur clair/sombre/auto au bas de la barre latérale
- Afficher dans l’en-tête — ajoute l’interrupteur à l’en-tête du site
Sans activer ce paramètre, les utilisateurs ne verront pas d’interrupteur de mode couleur sur le site et le site suivra automatiquement la préférence de schéma de couleur de chaque utilisateur.
Options visibles par l’utilisateur
Préférences utilisateur
Les utilisateurs peuvent choisir leur mode préféré pour visualiser le site :
-
Accédez à Préférences utilisateur > Interface
-
Dans la section « Palette de couleurs », les membres peuvent sélectionner leurs palettes claires et sombres préférées, ainsi que le mode qu’ils souhaitent utiliser : Clair, Sombre, Auto :
Si « Auto » est sélectionné, Discourse s’adaptera à la préférence de schéma de couleur du système de l’utilisateur.
Bonnes pratiques
- Cohérence de la marque : Personnalisez les palettes pour qu’elles correspondent à votre marque pour les deux modes. Maintenez les couleurs principales cohérentes, mais ajustez pour le contraste et la lisibilité.
- Accessibilité : Assurez-vous que les ratios de contraste des couleurs respectent les directives WCAG (cet outil peut aider), en particulier en mode sombre, où certaines couleurs peuvent paraître atténuées.
- Test sur plusieurs appareils : Vérifiez l’apparence dans les deux modes, sur différents appareils et navigateurs.
- Ressources de logo : Vous pouvez télécharger des logos séparés pour les modes clair et sombre dans Administration > Apparence > Logo du site (
/admin/config/logo). - Gardez le nombre de palettes gérable : N’offrez que les palettes dont les utilisateurs ont besoin ou qui vous semblent raisonnables.
FAQ
Puis-je avoir plus d’une palette sombre ou claire ?
Oui, mais il est recommandé de n’en garder qu’une principale pour chacune afin de réduire la confusion. N’attribuez que les palettes principales aux thèmes pour la sélection par l’utilisateur.
Puis-je forcer tout le monde à n’utiliser que le mode clair (ou seulement sombre) ?
Vous pouvez le faire en définissant la même palette comme palettes par défaut claire et sombre, et en vous assurant qu’aucune autre palette n’est sélectionnable par l’utilisateur.
Les composants de thème personnalisés s’adapteront-ils automatiquement aux couleurs ?
S’ils utilisent les variables de couleur CSS de Discourse (par exemple, --primary, --secondary), ils hériteront de la palette. Il est préférable d’éviter les couleurs codées en dur dans le CSS personnalisé.
Le changement de palette modifie-t-il l’intégralité du thème ou seulement les couleurs ?
Seules les variables de couleur changent. La structure, les polices et la disposition restent les mêmes lors du changement de palettes de couleurs.