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: [תמונה]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.

בעיה בצבעי אייקוני הכותרת של discourse

מפתח

Firepup650 (Firepup Sixfifty) 24 באוגוסט,‏ 2024,‏ 2:58am 3

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

נושא		תגובות	צפיות
Site header icons don't use header primary color Bug	7	938	4 בפברואר,‏ 2019
Dark theme header text and icon contrast UX dark-theme	6	2186	3 באוקטובר,‏ 2017
Header icons color on mouse hovering issue Product Support	2	942	3 בפברואר,‏ 2022
Customizing colors of header icons Development	3	963	4 ביולי,‏ 2023
How to Change Header Icon Color? Development	19	5234	16 בספטמבר,‏ 2023

בעיה בצבעי אייקוני הכותרת של discourse

נושאים קשורים