Je souhaiterais proposer un sélecteur de données pour les thèmes afin de faciliter la modification de thèmes complets depuis un composant.
Je ne sais pas à quel point ma situation est unique, mais j’utilise un exemple où j’ai deux instances de Graceful installées, ce qui me permet d’utiliser une palette sombre et une palette claire. J’utilise un composant de thème pour apporter des modifications à ces thèmes distants, afin d’effectuer des changements universels, comme modifier le bouton « J’aime ». Tout cela fonctionne très bien pour les modifications universelles gérées par les styles, mais le problème survient lorsque je veux apporter une modification à la version sombre qui ne doit pas apparaître dans le thème clair. Je ne vois pas de moyen d’utiliser CSS pour effectuer des modifications en fonction de l’ID du thème. Pour réaliser ce que je souhaite actuellement, je devrais créer des composants de thème individuels pour chaque thème pour les petits ajustements que je désire.
Peut-être quelque chose comme [data-theme-id].
Si cela est déjà possible, n’hésitez pas à ignorer ce message. Je pense simplement que cela aiderait grandement les sites qui souhaitent modifier plusieurs thèmes sans alourdir la liste des composants.
Je ne suis pas sûr de comprendre, mais vous pouvez ajouter directement du CSS dans ces thèmes clair et sombre.
À mon avis, les composants sont vraiment excellents pour des modifications universelles comme les marges, l’affichage, le remplissage ou la largeur, mais pour les couleurs, sauf si vous utilisez des variables, il vaut mieux modifier directement les thèmes.
Ça semble être une complication inutile d’une solution déjà disponible
Mais modifier des thèmes distants fait que vos modifications sont perdues lors de la prochaine mise à jour, n’est-ce pas ?
Il ne s’agit pas seulement de couleurs, mais d’apporter des modifications spécifiques à certains thèmes depuis un seul composant, sans avoir à créer davantage de composants et en les appliquant uniquement à certains thèmes.
Vous avez raison. Pour un thème distant, vous pouvez utiliser trois composants :
correctif de thème universel pour les modifications partagées
et correctif de thème sombre / correctif de thème clair pour les modifications spécifiques (comme les couleurs). Vous pouvez lier un composant à un seul thème.
Light graceful aura le correctif universel et le correctif clair.
Dark graceful aura le correctif universel et le correctif sombre.
En dernier recours, vous pouvez ajouter !important à une ligne de ces correctifs clair/sombre si une modification ne fonctionne pas.
Je suppose que vous avez raison. J’avais déjà pensé à un composant universel puis à un composant par thème, soit trois dans cet exemple, mais cela semblait excessif d’avoir trois dépôts alors que cela aurait peut-être pu être facilement résolu avec un sélecteur de données, puisque presque tout le reste dans Discourse en dispose.
À noter, l’ID du thème se trouve dans la balise meta sous forme d’ID de contenu, avec le mot-clé discourse_themes_id, et dans le lien pour changer de thème sous la forme [data-id=“#”], du moins si j’examine le lien du sélecteur de thème en forme de hamburger créé par ce composant installé ici sur Meta ou sur l’un de mes sites de test. Donc, ce n’est pas comme si l’information n’était pas accessible via Discourse.
Dans ce cas très spécifique, vous pourriez utiliser nos helpers SCSS. Voici un exemple issu du noyau, mais la même approche devrait fonctionner dans un thème :
Vous pouvez également utiliser @is-dark-color-scheme.
De cette façon, votre composant ne dépend pas des identifiants de thème, qui changeraient si vous installiez le thème sur un autre site.
