Seit einiger Zeit habe ich Probleme mit meinen Icon-Headern. Mein Dark-Theme hat weiße Header-Icons, mein Light-Theme hat dunkle Header-Icons. Ich habe erneut versucht, das Problem zu verstehen, und mir eine Reihe von Themen angesehen.
Nachdem ich mir jedoch meine Farbthemen angesehen und herumgespielt habe, stellte ich fest, dass meine Instanz diese Korrektur anscheinend nicht hat. Dieser verlinkte Beitrag stammt aus dem Jahr 2019, ich bin derzeit auf 3.4.0.beta1-dev.
Ich hätte nie daran gedacht, nachzusehen, habe es aber gerade getan und ja, es verschwand, als ich das tat. Ich gehe davon aus, dass es sich um ein Problem mit dem Theme handeln muss. Es ist zu diesem Zeitpunkt ziemlich alt.
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.
