Skip to content

Add icon colors to the tree view#684

Open
autumn-puffin wants to merge 3 commits into
icsharpcode:masterfrom
autumn-puffin:icon-colors
Open

Add icon colors to the tree view#684
autumn-puffin wants to merge 3 commits into
icsharpcode:masterfrom
autumn-puffin:icon-colors

Conversation

@autumn-puffin
Copy link
Copy Markdown

Resolves #680

Comment thread vscode-extension/src/icons.ts Outdated
@Rpinski
Copy link
Copy Markdown
Member

Rpinski commented Jun 5, 2026

I'm also somewhat skeptical about hardcoding product icon colors here, while they are actually themeable in VS Code. If users don't like them, they are free to install a product icon theme they like. And then they would expect that our icons have the same colors as everywhere else.

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Adds VS Code theme-based colorization to tree view node icons so different node types are easier to distinguish at a glance (aligning behavior with the outliner), resolving #680.

Changes:

  • Introduces a NodeType → theme color token mapping for tree icons.
  • Passes the mapped color into ThemeIcon creation for product icons.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread vscode-extension/src/icons.ts Outdated
Comment on lines +37 to +61
const ProductColorMapping: {
[key in NodeType]?: { id: string };
} = {
[NodeType.Assembly]: { id: "symbolIcon.packageForeground" },
[NodeType.Namespace]: { id: "symbolIcon.namespaceForeground" },
[NodeType.Event]: { id: "symbolIcon.eventForeground" },
[NodeType.Field]: { id: "symbolIcon.fieldForeground" },
[NodeType.Method]: { id: "symbolIcon.methodForeground" },
[NodeType.Enum]: { id: "symbolIcon.enumeratorForeground" },
[NodeType.Class]: { id: "symbolIcon.classForeground" },
[NodeType.Interface]: { id: "symbolIcon.interfaceForeground" },
[NodeType.Struct]: { id: "symbolIcon.structForeground" },
[NodeType.Delegate]: { id: "symbolIcon.classForeground" },
[NodeType.Const]: { id: "symbolIcon.constantForeground" },
[NodeType.Property]: { id: "symbolIcon.propertyForeground" },
[NodeType.ReferencesRoot]: { id: "symbolIcon.folderForeground" },
[NodeType.AssemblyReference]: { id: "symbolIcon.referenceForeground" },
[NodeType.Unknown]: { id: "foreground" },
[NodeType.Analyzer]: { id: "symbolIcon.methodForeground" },
[NodeType.BaseTypes]: { id: "symbolIcon.interfaceForeground" },
[NodeType.DerivedTypes]: { id: "symbolIcon.interfaceForeground" },
[NodeType.NuGetPackage]: { id: "symbolIcon.referenceForeground" },
[NodeType.PackageFolder]: { id: "symbolIcon.folderForeground" },
[NodeType.Resource]: { id: "symbolIcon.fileForeground" },
};
Comment thread vscode-extension/src/icons.ts Outdated
Comment on lines +66 to +69
const colorMapping =
ProductColorMapping[nodeType ?? NodeType.Unknown] ?? undefined;
if ("id" in iconMapping) {
return new ThemeIcon(iconMapping.id);
return new ThemeIcon(iconMapping.id, colorMapping);
@autumn-puffin
Copy link
Copy Markdown
Author

I'm also somewhat skeptical about hardcoding product icon colors here, while they are actually themeable in VS Code. If users don't like them, they are free to install a product icon theme they like. And then they would expect that our icons have the same colors as everywhere else.

The strings are only keys, as it works now it resolves to whatever the user's theme sets for the symbol colors, and should be the same as the outline tree!

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.

Enhancement: Tree view icon colors a la the outliner

3 participants