Ce guide explique comment configurer des palettes de couleurs claires et sombres pour le thème de votre site Discourse. Il couvre la configuration par thème, l’attribution des palettes et les considérations relatives à l’interface utilisateur.
Niveau d’utilisateur requis : Administrateur
La configuration de palettes de couleurs distinctes pour les modes clair et 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 de 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 sombre préférée à chaque thème, et de laisser les utilisateurs choisir leur apparence souhaitée.
Résumé
Ce guide couvre :
- Comprendre les attributions de palettes pour les modes clair et sombre
- Attribution de palettes de couleurs claires et sombres à un thème
- Gestion des palettes de couleurs de votre site
- Comprendre les options destinées aux utilisateurs
- Bonnes pratiques pour l’utilisation des palettes et l’accessibilité
Comprendre les attributions de palettes pour les modes clair et sombre
Les thèmes Discourse prennent en charge l’attribution explicite d’une palette de couleurs “claire” et d’une palette “sombre”. De cette façon, n’importe quel thème peut basculer automatiquement en fonction des paramètres système de l’utilisateur, ou laisser l’utilisateur choisir un mode préféré, tout en conservant les couleurs de marque que vous préférez.
Attribution de palettes claires et sombres à un thème
Pour configurer les palettes de couleurs de votre thème :
-
Accédez à Admin > Apparence > Thèmes et composants (
/admin/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 sombre. Notez que d’autres palettes sélectionnables par l’utilisateur peuvent toujours être sélectionnées 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 à Admin > Apparence > Palettes de couleurs (
/admin/customize/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.
Options destinées aux utilisateurs
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, Automatique :
Si “Automatique” est sélectionné, Discourse s’adaptera aux préférences du schéma de couleurs du système de l’utilisateur.
Bonnes pratiques
- Cohérence de la marque : Personnalisez les palettes pour qu’elles correspondent à votre image de marque pour les deux modes. Gardez les couleurs principales cohérentes, mais ajustez-les pour le contraste et la lisibilité.
- Accessibilité : Assurez-vous que les rapports de contraste des couleurs respectent les directives WCAG (cet outil peut vous aider), en particulier en mode sombre, où certaines couleurs peuvent apparaître atténuées.
- Testez sur plusieurs appareils : Vérifiez l’apparence dans les deux modes, sur différents appareils et navigateurs.
- Actifs du logo : Vous pouvez télécharger des logos distincts pour les modes clair et sombre dans Admin > Apparence > Logos.
- Gardez le nombre de palettes gérable : Proposez uniquement 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 conserver une palette principale pour chaque mode 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 uniquement le mode sombre) ?
Vous pouvez le faire en définissant la même palette comme palettes claires et sombres par défaut, et en vous assurant qu’aucune autre palette n’est sélectionnable par l’utilisateur.
Les composants de thème personnalisés ajusteront-ils automatiquement les 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’ensemble du thème ou seulement les couleurs ?
Seules les variables de couleur changent. La structure, les polices et la mise en page restent les mêmes lors du changement de palettes de couleurs.