Skip to content

Reinstate colors of symbol codicons when used in custom tree views#320391

Merged
alexr00 merged 7 commits into
microsoft:mainfrom
gjsjohnmurray:fix-299479
Jul 2, 2026
Merged

Reinstate colors of symbol codicons when used in custom tree views#320391
alexr00 merged 7 commits into
microsoft:mainfrom
gjsjohnmurray:fix-299479

Conversation

@gjsjohnmurray

Copy link
Copy Markdown
Contributor

This PR fixes #299479

Issue was caused by #267787

Copilot AI review requested due to automatic review settings June 8, 2026 10:48

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates tree view icon rendering so theme icons without an explicit color get a fallback CSS class applied.

Changes:

  • Add codicon-colored class when node.themeIcon has no color configured.

Comment thread src/vs/workbench/browser/parts/views/treeView.ts
@gjsjohnmurray

Copy link
Copy Markdown
Contributor Author

Validated using the extension-samples branch documented at #299479 (comment)

image

@n-gist

n-gist commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

@gjsjohnmurray can #311339 be affected by this? (SVG currentColor is not replaced by current theme colors, resulting in black unless color is set explicitly)
I can test something if needed.

@n-gist

n-gist commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

@gjsjohnmurray did some testing of this PR, maybe I'm doing something wrong, but can't confirm colors fallback to defaults:

tvicons

Icons assigned as TreeItem.iconPath = new ThemeIcon(codiconId)

Can be related to the issue - even some debug-* icons which are colored in window.createQuickPick() don't get colored when used in the tree view.

@gjsjohnmurray

Copy link
Copy Markdown
Contributor Author

@n-gist is the source of your test extension available somewhere? I'm puzzled that symbol-* codicons aren't colored in the quickpick.

@n-gist

n-gist commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

@gjsjohnmurray it is not released yet, but I can share current version. Do you need source code or vsix would be enough? Send it somewhere?
For quickpick, it doesn't supports custom colors, but theme icons are supported, at least those inferred from resourceUri #308704

@n-gist

n-gist commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

@gjsjohnmurray sent an invite to https://github.com/n-gist/temp.vscode.focus

To test icons - open a project and drop some files/folders to the extension view, and their icons will be customizeable.
To be free from resourceUri effects - create a group item by Arrange > Group, and customize its icon instead.

Customize > Icon for edit the value used in new ThemeIcon(id, color), format - id or id, color, like heart, problemsErrorIcon.foreground.

Customize > Icon Select is similar but through quickpick built over a list of builtin codicon ids.

Open issue in repo for any needs, I would be happy to assist with testing/fixing icons issues.

@gjsjohnmurray

Copy link
Copy Markdown
Contributor Author

@n-gist thanks, invitation accepted but I probably won't get time to investigate much before the end of June.

@n-gist

n-gist commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

@gjsjohnmurray I ran another test for this PR using https://github.com/alythobani/vscode-extension-samples/tree/show-299479 and can confirm that the color fallback is working. The source of confusion in the previous test was that the color is not visible until the item loses focus. This screencapture confirms that colors work both in the referenced vscode-extension-samples and in my extension. Lol, sorry.
tviconscolored
The lack of colors in the Quick Pick is a separate issue.

@gjsjohnmurray

Copy link
Copy Markdown
Contributor Author

The lack of colors in the Quick Pick is a separate issue.

I have created #321773 for this.

@vs-code-engineering

Copy link
Copy Markdown
Contributor

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@benibenj

Matched files:

  • src/vs/workbench/browser/parts/views/treeView.ts

@alexr00
alexr00 enabled auto-merge (squash) July 2, 2026 09:20

@alexr00 alexr00 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

@alexr00 alexr00 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(sorry for the approval and commit noise, needed to test something)

@alexr00
alexr00 merged commit 139c794 into microsoft:main Jul 2, 2026
29 checks passed
@vs-code-engineering vs-code-engineering Bot added this to the 1.128.0 milestone Jul 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Symbol theme icons are no longer colored when used in custom tree view items

5 participants