Les feuilles de style du plugin doivent utiliser des propriétés CSS personnalisées pour les couleurs

Dans quelques jours, je fusionnerai cette PR dans le noyau, ce qui modifiera la façon dont les feuilles de style des plugins sont compilées. Cette modification affecte les variables de couleur SCSS utilisées dans les feuilles de style des plugins. En bref, elles doivent être remplacées par des propriétés personnalisées CSS. La plupart des plugins sont déjà mis à jour et, dans de nombreux cas, il s’agit d’un changement simple : la variable SCSS doit être remplacée par une propriété personnalisée CSS :

-   background-color: $primary-low;
+   background-color: var(--primary-low);

Le guide disponible sur Update themes and plugins to support automatic dark mode contient davantage d’exemples et explique également comment gérer des transformations de couleurs plus complexes. (Ce guide devrait suffire aux auteurs de plugins pour s’assurer que leurs styles fonctionneront correctement.)


Si vous vous demandez pourquoi nous apportons ce changement, lisez la suite.

Auparavant, les feuilles de style du noyau et des plugins étaient compilées par thème afin d’inclure le schéma de couleurs du thème partout où des variables de couleur SCSS étaient utilisées. Cela signifiait qu’un site disposant de nombreux thèmes (ou un environnement multisite) mettait beaucoup de temps à précompiler, car il devait multiplier le nombre de feuilles de style du noyau et des plugins par le nombre de thèmes actifs afin de couvrir toutes les combinaisons nécessaires.

Depuis août 2020, et pour prendre en charge la commutation automatique du mode sombre, nous avons ajouté une feuille de style de définitions de couleurs distincte qui stocke les variables de couleur sous forme de propriétés personnalisées CSS. Ce changement nous a permis de changer de schéma de couleurs à la volée, mais il a également abstrait les couleurs de la plupart des feuilles de style. Grâce à la magie des propriétés personnalisées CSS, nous pouvons désormais référencer les couleurs partout (noyau, plugins, thèmes) sans avoir à charger chaque thème lors de la compilation de la feuille de style.

Au cours des derniers mois, nous avons converti tous les plugins pour qu’ils utilisent des propriétés personnalisées CSS. La grande majorité des plugins Discourse sont maintenant à jour, mais il existe probablement quelques plugins qui utilisent encore des variables SCSS pour les couleurs et qui devront être mis à jour.

10 « J'aime »

Merci pour cette explication claire. Je la comprends moi-même pour la plupart !

Est-ce que cela va entraîner l’échec des mises à niveau et des reconstructions sur les sites comportant des composants de thème qui ne respectent pas ces règles ? Comme cela s’est produit pour Failed to Bootstrap, due to discourse-alt-logo theme component pour une autre raison ?

Si oui, existe-t-il un moyen de rendre le message d’erreur plus clair (pour les personnes qui ne parviennent pas à interpréter les journaux de construction) ? Et ajouter quelque chose comme « désinstallez le plugin x avant de tenter une mise à niveau ». Ou, mieux encore, existe-t-il un moyen d’avertir les utilisateurs dans le panneau d’administration lorsque nous savons qu’un tel changement est à venir ? (ou peut-être existe-t-il déjà un tel avertissement que personne ne lit).

2 « J'aime »

Non, cela ne provoquera pas d’échec des reconstructions. Cela entraînera uniquement des couleurs incorrectes sur les plugins qui n’ont pas été mis à jour. Cela ne devrait se produire que pour les plugins maison ; j’ai passé en revue la plupart des plugins publiés ici sur Meta et je me suis assuré qu’ils étaient à jour.

Le problème que vous avez lié n’a rien à voir avec ce changement ; il s’agit d’un composant de thème, et nous bloquons actuellement les reconstructions si un composant de thème marqué pour une mise à jour automatique ne peut pas être mis à jour automatiquement.

4 « J'aime »

Ah. Hourra. Désolé pour ça. Je suis encore en train de me familiariser avec ces éléments.

2 « J'aime »

J’ai rencontré un problème en mode sombre. Où et quel paramètre de couleur dois-je ajuster pour le texte cité ?

Cela fonctionne bien dans les catégories publiques, mais dans les bulles de messages privés, c’est illisible.

J’ai effectué quelques recherches, mais je n’arrive pas à trouver le terme correct.

Cela affecte également le lien d’un sujet.