The discussion is about an Issue with discourse header icon colours. lucr is experiencing issues with their icon headers, where their dark theme has white header icons and their light theme has dark header icons. They tried to troubleshoot the issue by looking at a previous topic on meta.discourse.org, which mentioned an update to use $header_primary and $header_background for icons. However, lucr found that this fix was not applied to their instance, which is currently on version 3.4.0.beta1-dev.
lucr provided examples of the issue and tried changing the primary color to red, but the issue persisted. Firepup650 suggested checking if the issue goes away in safe mode with no themes, and lucr found that it did, indicating that the issue is likely with the theme.
bryce provided a detailed response on how to use browser dev tools to inspect the styles being applied to the header icons and identify the source of the issue. They suggested looking for the color property and checking if there are any background-color properties set to “primary”. bryce also explained how to toggle properties on and off in the styles panel to see the effect of removing them.
lucr thanked bryce for the detailed response and plans to investigate further to make the necessary fixes.
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.
