For quite some time, I have been having issues with my icon headers. My dark theme has white header icons, my light theme has dark header icons. I tried again to figure out the issue, and looked at a number of topics.
However after looking at my colour themes and playing around, I found that my instance does not seem to have that fix. This linked post is from 2019, I am currently on 3.4.0.beta1-dev.
I never thought to check, I just did now and yes it went away when doing that. It must be an issue of the theme I am assuming. It is quite old at this point.
Browser dev tools can help get to the bottom of this by showing what styles are being applied. For Chrome/Firefox, you right click on one of the header icons and choose “Inspect”.
Look for the styles pane, which shows all of the CSS code that is affecting the element. The icon color itself should be controlled by the color property. It looks like yours might also have a background-color set to “primary”.
On the right it shows the source file name for each block of CSS styling. Many of them are from core Discourse (for instance the “header.scss” from the screenshot). If it says something like “theme_6.scss”, it’s probably from your theme or another active theme component. You can click the file name to view it and see where that code is in the file (or reference the line number to the right of the file name).
Lastly, you can toggle the properties on and off in the styles panel to see what it would look like if they were removed (hover over a property to see a checkbox). They’re listed from highest priority to lowest, so generally the ones on top will override anything below. For example, in the screenshot you can see that the color: var(--primary-low-mid) from “buttons.scss” was overridden (indicated by it being crossed out).
If you don’t see anything obvious, you could try selecting the parent elements in the Elements tab to look for styling there. In this case, the svg icon is inside of a link (<a>) element, which is inside of a list item (<li>) element, and the background color could be coming from one on those.
