Code change:
I think these used to be blue: <img width="297" alt="image" src="https://user-"vs <img width="193" alt="image" src="https://user-"
Using the "Default Light+" theme this is working (on main). So it is either already fixed ( or theme dependency (unlikely) but what theme is this? <img width="1004" alt="Screenshot 2022-12-21 at 17 59 20" src="https://user-"
Ran into the same issue with my theme. After a recent vscode update the coloring of the icons is gone. I'm using the theme.
I also cannot reproduce from source, but it still reproduces in latest Insiders using :
Today's insiders also doesn't have colors for me, so this might be a packaging issue or something specific to my setup. Are you able to reproduce with Insiders? <img width="661" alt="image" src="https://user-"
Yeah, I can repro in insiders with an empty profile
This also happens in other places that show symbol icons and is only happening because of how things are ordered in the packaged CSS. what's the procedure to fix this? <img width="1250" alt="Screenshot 2022-12-22 at 17 32 26" src="https://user-"
While the CSS rules in a single file will remain in order when being loaded or packaged, there are unfortunately no guarantees to the CSS rules order of multiple files. That is because CSS files can't express dependencies on other CSS files, so they will be loaded or packaged in any order. The exact order depends on the internals of the AMD loader/bundler, but it isn't guaranteed to be consistent, as it can depend on fs read times, etc. I think it is a coincidence that this works every time when running from source. The correct way to fix this is to use to ensure the desired rule wins regardless of the css file order. I speculate that this only worked before (when CSS was generated from JS) because the dynamic CSS was injected in a tag towards the bottom of the element.

Related discussion:
text: *  Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ <del> .codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); } .codicon.codicon-symbol-boolean { color: var(--vscode-symbolIcon-booleanForeground); } .codicon.codicon-symbol-class { color: var(--vscode-symbolIcon-classForeground); } .codicon.codicon-symbol-method { color: var(--vscode-symbolIcon-methodForeground); } .codicon.codicon-symbol-color { color: var(--vscode-symbolIcon-colorForeground); } .codicon.codicon-symbol-constant { color: var(--vscode-symbolIcon-constantForeground); } .codicon.codicon-symbol-constructor { color: var(--vscode-symbolIcon-constructorForeground); } .codicon.codicon-symbol-value, .codicon.codicon-symbol-enum { color: var(--vscode-symbolIcon-enumeratorForeground); } .codicon.codicon-symbol-enum-member { color: var(--vscode-symbolIcon-enumeratorMemberForeground); } .codicon.codicon-symbol-event { color: var(--vscode-symbolIcon-eventForeground); } .codicon.codicon-symbol-field { color: var(--vscode-symbolIcon-fieldForeground); } .codicon.codicon-symbol-file { color: var(--vscode-symbolIcon-fileForeground); } .codicon.codicon-symbol-folder { color: var(--vscode-symbolIcon-folderForeground); } .codicon.codicon-symbol-function { color: var(--vscode-symbolIcon-functionForeground); } .codicon.codicon-symbol-interface { color: var(--vscode-symbolIcon-interfaceForeground); } .codicon.codicon-symbol-key { color: var(--vscode-symbolIcon-keyForeground); } .codicon.codicon-symbol-keyword { color: var(--vscode-symbolIcon-keywordForeground); } .codicon.codicon-symbol-module { color: var(--vscode-symbolIcon-moduleForeground); } .codicon.codicon-symbol-namespace { color: var(--vscode-symbolIcon-namespaceForeground); } .codicon.codicon-symbol-null { color: var(--vscode-symbolIcon-nullForeground); } .codicon.codicon-symbol-number { color: var(--vscode-symbolIcon-numberForeground); } .codicon.codicon-symbol-object { color: var(--vscode-symbolIcon-objectForeground); } .codicon.codicon-symbol-operator { color: var(--vscode-symbolIcon-operatorForeground); } .codicon.codicon-symbol-package { color: var(--vscode-symbolIcon-packageForeground); } .codicon.codicon-symbol-property { color: var(--vscode-symbolIcon-propertyForeground); } .codicon.codicon-symbol-reference { color: var(--vscode-symbolIcon-referenceForeground); } .codicon.codicon-symbol-snippet { color: var(--vscode-symbolIcon-snippetForeground); } .codicon.codicon-symbol-string { color: var(--vscode-symbolIcon-stringForeground); } .codicon.codicon-symbol-struct { color: var(--vscode-symbolIcon-structForeground); } .codicon.codicon-symbol-text { color: var(--vscode-symbolIcon-textForeground); } .codicon.codicon-symbol-type-parameter { color: var(--vscode-typeParameterForeground); } .codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); } .codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); } </del> <ins> .monaco-editor .codicon.codicon-symbol-array, .monaco-workbench .codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); } .monaco-editor .codicon.codicon-symbol-boolean, .monaco-workbench .codicon.codicon-symbol-boolean { color: var(--vscode-symbolIcon-booleanForeground); } .monaco-editor .codicon.codicon-symbol-class, .monaco-workbench .codicon.codicon-symbol-class { color: var(--vscode-symbolIcon-classForeground); } .monaco-editor .codicon.codicon-symbol-method, .monaco-workbench .codicon.codicon-symbol-method { color: var(--vscode-symbolIcon-methodForeground); } .monaco-editor .codicon.codicon-symbol-color, .monaco-workbench .codicon.codicon-symbol-color { color: var(--vscode-symbolIcon-colorForeground); } .monaco-editor .codicon.codicon-symbol-constant, .monaco-workbench .codicon.codicon-symbol-constant { color: var(--vscode-symbolIcon-constantForeground); } .monaco-editor .codicon.codicon-symbol-constructor, .monaco-workbench .codicon.codicon-symbol-constructor { color: var(--vscode-symbolIcon-constructorForeground); } .monaco-editor .codicon.codicon-symbol-value, .monaco-workbench .codicon.codicon-symbol-value, .monaco-editor .codicon.codicon-symbol-enum, .monaco-workbench .codicon.codicon-symbol-enum { color: var(--vscode-symbolIcon-enumeratorForeground); } .monaco-editor .codicon.codicon-symbol-enum-member, .monaco-workbench .codicon.codicon-symbol-enum-member { color: var(--vscode-symbolIcon-enumeratorMemberForeground); } .monaco-editor .codicon.codicon-symbol-event, .monaco-workbench .codicon.codicon-symbol-event { color: var(--vscode-symbolIcon-eventForeground); } .monaco-editor .codicon.codicon-symbol-field, .monaco-workbench .codicon.codicon-symbol-field { color: var(--vscode-symbolIcon-fieldForeground); } .monaco-editor .codicon.codicon-symbol-file, .monaco-workbench .codicon.codicon-symbol-file { color: var(--vscode-symbolIcon-fileForeground); } .monaco-editor .codicon.codicon-symbol-folder, .monaco-workbench .codicon.codicon-symbol-folder { color: var(--vscode-symbolIcon-folderForeground); } .monaco-editor .codicon.codicon-symbol-function, .monaco-workbench .codicon.codicon-symbol-function { color: var(--vscode-symbolIcon-functionForeground); } .monaco-editor .codicon.codicon-symbol-interface, .monaco-workbench .codicon.codicon-symbol-interface { color: var(--vscode-symbolIcon-interfaceForeground); } .monaco-editor .codicon.codicon-symbol-key, .monaco-workbench .codicon.codicon-symbol-key { color: var(--vscode-symbolIcon-keyForeground); } .monaco-editor .codicon.codicon-symbol-keyword, .monaco-workbench .codicon.codicon-symbol-keyword { color: var(--vscode-symbolIcon-keywordForeground); } .monaco-editor .codicon.codicon-symbol-module, .monaco-workbench .codicon.codicon-symbol-module { color: var(--vscode-symbolIcon-moduleForeground); } .monaco-editor .codicon.codicon-symbol-namespace, .monaco-workbench .codicon.codicon-symbol-namespace { color: var(--vscode-symbolIcon-namespaceForeground); } .monaco-editor .codicon.codicon-symbol-null, .monaco-workbench .codicon.codicon-symbol-null { color: var(--vscode-symbolIcon-nullForeground); } .monaco-editor .codicon.codicon-symbol-number, .monaco-workbench .codicon.codicon-symbol-number { color: var(--vscode-symbolIcon-numberForeground); } .monaco-editor .codicon.codicon-symbol-object, .monaco-workbench .codicon.codicon-symbol-object { color: var(--vscode-symbolIcon-objectForeground); } .monaco-editor .codicon.codicon-symbol-operator, .monaco-workbench .codicon.codicon-symbol-operator { color: var(--vscode-symbolIcon-operatorForeground); } .monaco-editor .codicon.codicon-symbol-package, .monaco-workbench .codicon.codicon-symbol-package { color: var(--vscode-symbolIcon-packageForeground); } .monaco-editor .codicon.codicon-symbol-property, .monaco-workbench .codicon.codicon-symbol-property { color: var(--vscode-symbolIcon-propertyForeground); } .monaco-editor .codicon.codicon-symbol-reference, .monaco-workbench .codicon.codicon-symbol-reference { color: var(--vscode-symbolIcon-referenceForeground); } .monaco-editor .codicon.codicon-symbol-snippet, .monaco-workbench .codicon.codicon-symbol-snippet { color: var(--vscode-symbolIcon-snippetForeground); } .monaco-editor .codicon.codicon-symbol-string, .monaco-workbench .codicon.codicon-symbol-string { color: var(--vscode-symbolIcon-stringForeground); } .monaco-editor .codicon.codicon-symbol-struct, .monaco-workbench .codicon.codicon-symbol-struct { color: var(--vscode-symbolIcon-structForeground); } .monaco-editor .codicon.codicon-symbol-text, .monaco-workbench .codicon.codicon-symbol-text { color: var(--vscode-symbolIcon-textForeground); } .monaco-editor .codicon.codicon-symbol-type-parameter, .monaco-workbench .codicon.codicon-symbol-type-parameter { color: var(--vscode-typeParameterForeground); } .monaco-editor .codicon.codicon-symbol-unit, .monaco-workbench .codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); } .monaco-editor .codicon.codicon-symbol-variable, .monaco-workbench .codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); } </ins>