Gli strumenti per sviluppatori del browser possono aiutare a risolvere questo problema mostrando quali stili vengono applicati. Per Chrome/Firefox, fai clic con il pulsante destro del mouse su una delle icone dell’intestazione e scegli “Ispeziona”.
Cerca il riquadro degli stili, che mostra tutto il codice CSS che influisce sull’elemento. Il colore dell’icona stessa dovrebbe essere controllato dalla proprietà color. Sembra che anche il tuo potrebbe avere un background-color impostato su “primary”.
Sulla destra vengono mostrati il nome del file sorgente per ogni blocco di stile CSS. Molti di essi provengono dal core di Discourse (ad esempio, “header.scss” dallo screenshot). Se dice qualcosa come “theme_6.scss”, probabilmente proviene dal tuo tema o da un altro componente del tema attivo. Puoi fare clic sul nome del file per visualizzarlo e vedere dove si trova quel codice nel file (o fare riferimento al numero di riga a destra del nome del file).
Infine, puoi attivare e disattivare le proprietà nel pannello degli stili per vedere come apparirebbero se venissero rimosse (passa il mouse sopra una proprietà per vedere una casella di controllo). Sono elencate dalla priorità più alta alla più bassa, quindi in genere quelle in alto sovrascriveranno qualsiasi cosa al di sotto. Ad esempio, nello screenshot puoi vedere che il color: var(--primary-low-mid) da “buttons.scss” è stato sovrascritto (indicato dal fatto che è barrato).
Se non vedi nulla di ovvio, potresti provare a selezionare gli elementi padre nella scheda Elementi per cercare gli stili lì. In questo caso, l’icona svg si trova all’interno di un elemento link (<a>), che si trova all’interno di un elemento di lista (<li>), e il colore di sfondo potrebbe provenire da uno di questi.
Una volta trovato il codice CSS incriminato nel tuo tema, dovresti essere in grado di rimuoverlo in sicurezza per ripristinare l’aspetto predefinito!