Browser-Entwicklertools können helfen, dem auf den Grund zu gehen, indem sie zeigen, welche Stile angewendet werden. Für Chrome/Firefox klicken Sie mit der rechten Maustaste auf eines der Header-Symbole und wählen Sie “Untersuchen”.
Suchen Sie nach dem Stilbereich, der den gesamten CSS-Code anzeigt, der das Element beeinflusst. Die Symbolfarbe selbst sollte durch die color-Eigenschaft gesteuert werden. Es sieht so aus, als ob bei Ihnen möglicherweise auch eine background-color auf “primary” gesetzt ist.
Auf der rechten Seite wird für jeden Block von CSS-Styling der Name der Quelldatei angezeigt. Viele davon stammen aus dem Kern von Discourse (zum Beispiel das “header.scss” aus dem Screenshot). Wenn dort etwas wie “theme_6.scss” steht, stammt es wahrscheinlich aus Ihrem Theme oder einer anderen aktiven Theme-Komponente. Sie können auf den Dateinamen klicken, um ihn anzuzeigen und zu sehen, wo sich dieser Code in der Datei befindet (oder die Zeilennummer rechts neben dem Dateinamen nachschlagen).
Zuletzt können Sie die Eigenschaften im Stilbereich ein- und ausschalten, um zu sehen, wie es aussehen würde, wenn sie entfernt würden (fahren Sie mit der Maus über eine Eigenschaft, um eine Checkbox zu sehen). Sie sind von der höchsten zur niedrigsten Priorität aufgelistet, daher überschreiben die oberen Elemente im Allgemeinen alles darunter. Im Screenshot sehen Sie zum Beispiel, dass die color: var(--primary-low-mid) aus “buttons.scss” überschrieben wurde (angezeigt durchgestrichen).
Wenn Sie nichts Offensichtliches sehen, können Sie versuchen, die übergeordneten Elemente im Elements-Tab auszuwählen, um dort nach Styling zu suchen. In diesem Fall befindet sich das SVG-Symbol innerhalb eines Link-Elements (<a>), das sich innerhalb eines Listenelement-Elements (<li>) befindet, und die Hintergrundfarbe könnte von einem dieser Elemente stammen.
Sobald Sie den störenden CSS-Code in Ihrem Theme gefunden haben, sollten Sie ihn sicher entfernen können, um zum Standardaussehen zurückzukehren!