Add icon colors to the tree view#684
Conversation
|
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. |
There was a problem hiding this comment.
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
ThemeIconcreation for product icons.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 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" }, | ||
| }; |
| const colorMapping = | ||
| ProductColorMapping[nodeType ?? NodeType.Unknown] ?? undefined; | ||
| if ("id" in iconMapping) { | ||
| return new ThemeIcon(iconMapping.id); | ||
| return new ThemeIcon(iconMapping.id, colorMapping); |
72f0de9 to
1db0cc2
Compare
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! |
Resolves #680