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. In this topic: Site header icons don't use header primary color it says that discourse was updated to use header primary and header secondary for icons: [image]Site header icons don't use header primary color I’ve just updated that to use $header_primary and $header_background instead of $primary and $secondary. 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. Examples of what I mean: [image] [image] If I change primary to red: [image] [image] If anyone has any insight or suggestions it would be greatly appreaciated.

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”. [A dropdown menu with options for opening links in new tabs or windows, saving links, and getting image descriptions from Google. (Captioned by AI)] 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). [This is a screenshot of a computer code editor showing a Python script. (Captioned by AI)] 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 ( ) element, which is inside of a list item ( ) element, and the background color could be coming from one on those. [The image is a screenshot of a computer interface, displaying a web page with HTML and CSS code, and a section showing what appears to be a chat between a user and a bot. (Captioned by AI)] Once you find the offending CSS code in your theme, you should be able to safely remove it to revert back to the default appearance!

Thank you so much for this detailed response! I am going to take a look at this later tonight and try to make the fixes.

Issue with discourse header icon colours

Development

Firepup650 (Firepup Sixfifty) August 24, 2024, 2:58am 3

Does the issue go away if you use safe mode in “no themes” mode?

Topic		Replies	Views
Site header icons don't use header primary color Bug	7	936	February 4, 2019
Dark theme header text and icon contrast UX dark-theme	6	2185	October 3, 2017
Header icons color on mouse hovering issue Product Support	2	942	February 3, 2022
Customizing colors of header icons Development	3	962	July 4, 2023
How to Change Header Icon Color? Development	19	5233	September 16, 2023

Issue with discourse header icon colours

Related topics