Code change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: No <!-- If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. --<!-- Issues caused by an extension need to be reported directly to the extension publisher. The 'Help Report Issue' dialog can assist with this. --Version: 1.91.1 Commit: Date: 2024-07-09T22:06:49.809Z Electron: 29.4.0 ElectronBuildId: Chromium: 122.0.6261.156 20.9.0 V8: 12.2.281.27-electron.0 OS: Windows_NT x64 10.0. Steps to Reproduce: a TreeView with an TreeItem the TreeItem's iconPath to the extension. The TreeItem's icon will still be yellow same as in debugging. After inspecting developer tools, this is likely due to how the icon debug-stackframe's color rule is set to !important. The ThemeColor fails to overwrite it due to low specificity. This may not only happen with the icon "debug-stackframe" and is affecting customisations of treeitems. Why is some icons' color rules given the !important flag et al? There might not be any easy fix due to this flag's present. I hope the team could look into it, and if possible fix this selector specificity issue (if it won't break vscode, somehow).
Edit: This not only occurs on special icons like debug-stackframe, but also on very ordinary ones like circle-filled. style attribute { color: rgb(204, 204, 204); } .monaco-workbench .codicon { } Adding !important to the color flag of .monaco-workbench .codicon will fix the issue though.. The problem is worse :C
I think the best solution would be to get rid of that . it's coming from here. Can it be removed? The css you shared is correct. The rbg value is the one you set in your ThemeIcon. !
Yea, we should scope these rules better (and also move them to css now that we have variables there)
<!-- UNABLETOLOCATECOMMITMESSAGE --Issue marked as unreleased but unable to locate closing commit in issue timeline. You can manually reference a commit by commenting , or directly add the label if you know this has already been releaased

Related discussion:
text: } registerThemingParticipant((theme, collector) => { <ins> const scope = '.monaco-editor .glyph-margin-widgets, .monaco-workbench .debug-breakpoints, .monaco-workbench .disassembly-view'; </ins> const debugIconBreakpointColor = theme.getColor(debugIconBreakpointForeground); if (debugIconBreakpointColor) { <del> collector.addRule(` ${icons.allBreakpoints.map(b => `.monaco-workbench ${ThemeIcon.asCSSSelector(b.regular)}`).join(',n		')}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointUnsupported)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointHint)}:not([class*='codicon-debug-breakpoint']):not([class*='codicon-debug-stackframe']), .monaco-workbench ${ThemeIcon.asCSSSelector(icons.breakpoint.regular)}${ThemeIcon.asCSSSelector(icons.debugStackframeFocused)}::after, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.breakpoint.regular)}${ThemeIcon.asCSSSelector(icons.debugStackframe)}::after { color: ${debugIconBreakpointColor} !important; } `); </del> <ins> collector.addRule(`${scope} { ${icons.allBreakpoints.map(b => `${ThemeIcon.asCSSSelector(b.regular)}`).join(',n		')}, ${ThemeIcon.asCSSSelector(icons.debugBreakpointUnsupported)}, ${ThemeIcon.asCSSSelector(icons.debugBreakpointHint)}:not([class*='codicon-debug-breakpoint']):not([class*='codicon-debug-stackframe']), ${ThemeIcon.asCSSSelector(icons.breakpoint.regular)}${ThemeIcon.asCSSSelector(icons.debugStackframeFocused)}::after, ${ThemeIcon.asCSSSelector(icons.breakpoint.regular)}${ThemeIcon.asCSSSelector(icons.debugStackframe)}::after { color: ${debugIconBreakpointColor} !important; } }`); </ins> <del> collector.addRule(` .monaco-workbench ${ThemeIcon.asCSSSelector(icons.breakpoint.pending)} { color: ${debugIconBreakpointColor} !important; font-size: 12px !important; } `); </del> <ins> collector.addRule(`${scope} { ${ThemeIcon.asCSSSelector(icons.breakpoint.pending)} { color: ${debugIconBreakpointColor} !important; font-size: 12px !important; } }`); </ins> } const debugIconBreakpointDisabledColor = theme.getColor(debugIconBreakpointDisabledForeground); if (debugIconBreakpointDisabledColor) { <del> collector.addRule(` ${icons.allBreakpoints.map(b => `.monaco-workbench ${ThemeIcon.asCSSSelector(b.disabled)}`).join(',n		')} { color: ${debugIconBreakpointDisabledColor}; } `); </del> <ins> collector.addRule(`${scope} { ${icons.allBreakpoints.map(b => ThemeIcon.asCSSSelector(b.disabled)).join(',n		')} { color: ${debugIconBreakpointDisabledColor}; } }`); </ins> } const debugIconBreakpointUnverifiedColor = theme.getColor(debugIconBreakpointUnverifiedForeground); if (debugIconBreakpointUnverifiedColor) { <del> collector.addRule(` ${icons.allBreakpoints.map(b => `.monaco-workbench ${ThemeIcon.asCSSSelector(b.unverified)}`).join(',n		')} { color: ${debugIconBreakpointUnverifiedColor}; } `); </del> <ins> collector.addRule(`${scope} { ${icons.allBreakpoints.map(b => ThemeIcon.asCSSSelector(b.unverified)).join(',n		')} { color: ${debugIconBreakpointUnverifiedColor}; } }`); </ins> } const debugIconBreakpointCurrentStackframeForegroundColor = theme.getColor(debugIconBreakpointCurrentStackframeForeground); if (debugIconBreakpointCurrentStackframeForegroundColor) { collector.addRule(` <del> .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStackframe)}, </del> .monaco-editor .debug-top-stack-frame-column { color: ${debugIconBreakpointCurrentStackframeForegroundColor} !important; } <ins> ${scope} { ${ThemeIcon.asCSSSelector(icons.debugStackframe)} { color: ${debugIconBreakpointCurrentStackframeForegroundColor} !important; } } </ins> `); } const debugIconBreakpointStackframeFocusedColor = theme.getColor(debugIconBreakpointStackframeForeground); if (debugIconBreakpointStackframeFocusedColor) { <del> collector.addRule(` .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStackframeFocused)} { color: ${debugIconBreakpointStackframeFocusedColor} !important; } `); </del> <ins> collector.addRule(`${scope} { ${ThemeIcon.asCSSSelector(icons.debugStackframeFocused)} { color: ${debugIconBreakpointStackframeFocusedColor} !important; } }`); </ins> } });