Da parecchio tempo ho problemi con le icone dell’header. Il mio tema scuro ha icone dell’header bianche, il mio tema chiaro ha icone dell’header scure. Ho provato di nuovo a capire il problema e ho esaminato diversi argomenti.
Tuttavia, dopo aver esaminato i miei temi colore e aver sperimentato, ho scoperto che la mia istanza sembra non avere quella correzione. Questo post collegato è del 2019, attualmente sono sulla versione 3.4.0.beta1-dev.
Non avevo mai pensato di controllare, l’ho appena fatto e sì, è scomparso facendolo. Suppongo che debba essere un problema del tema. È piuttosto vecchio a questo punto.
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.
