Depuis un certain temps, j’ai des problèmes avec les icônes de mes en-têtes. Mon thème sombre a des icônes d’en-tête blanches, mon thème clair a des icônes d’en-tête sombres. J’ai essayé à nouveau de comprendre le problème et j’ai consulté un certain nombre de sujets.
Cependant, après avoir examiné mes thèmes de couleurs et joué avec, j’ai constaté que mon instance ne semble pas avoir reçu cette correction. Ce post lié date de 2019, je suis actuellement sur la version 3.4.0.beta1-dev.
Je n’avais jamais pensé à vérifier, je viens de le faire et oui, cela a disparu en faisant cela. Je suppose que cela doit être un problème du thème. Il est assez ancien à ce stade.
Les outils de développement du navigateur peuvent aider à résoudre ce problème en montrant quels styles sont appliqués. Pour Chrome/Firefox, faites un clic droit sur l’une des icônes de l’en-tête et choisissez “Inspecter”.
Recherchez le panneau des styles, qui affiche tout le code CSS qui affecte l’élément. La couleur de l’icône elle-même devrait être contrôlée par la propriété color. Il semble que le vôtre puisse également avoir un background-color défini sur “primary”.
Sur la droite, il affiche le nom du fichier source pour chaque bloc de style CSS. Beaucoup d’entre eux proviennent du cœur de Discourse (par exemple, le fichier “header.scss” de la capture d’écran). S’il indique quelque chose comme “theme_6.scss”, il provient probablement de votre thème ou d’un autre composant de thème actif. Vous pouvez cliquer sur le nom du fichier pour le visualiser et voir où se trouve ce code dans le fichier (ou vous référer au numéro de ligne à droite du nom du fichier).
Enfin, vous pouvez activer et désactiver les propriétés dans le panneau des styles pour voir à quoi cela ressemblerait si elles étaient supprimées (survolez une propriété pour voir une case à cocher). Elles sont listées de la priorité la plus élevée à la plus basse, donc généralement celles du haut remplaceront tout ce qui se trouve en dessous. Par exemple, dans la capture d’écran, vous pouvez voir que le color: var(--primary-low-mid) de “buttons.scss” a été remplacé (indiqué par le fait qu’il est barré).
Si vous ne voyez rien d’évident, vous pouvez essayer de sélectionner les éléments parents dans l’onglet Éléments pour rechercher le style là-bas. Dans ce cas, l’icône svg se trouve à l’intérieur d’un élément de lien (<a>), qui se trouve à l’intérieur d’un élément de liste (<li>), et la couleur d’arrière-plan pourrait provenir de l’un de ceux-ci.
Une fois que vous avez trouvé le code CSS fautif dans votre thème, vous devriez pouvoir le supprimer en toute sécurité pour revenir à l’apparence par défaut !
