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 !