API proposal for tree item icon color

Part of microsoft#103120

Author: alexr00

src/vs/vscode.proposed.d.ts

@@ -972,6 +972,11 @@ declare module 'vscode' {
 		 */
 		tooltip?: string | MarkdownString | /* for compilation */ any;
 
+		/**
+		 * When `iconPath` is a [ThemeColor](#ThemeColor) `iconColor` will be used to set the color of the icon.
+		 */
+		iconColor?: ThemeColor;
+
 		/**
 		 * @param label Label describing this item
 		 * @param collapsibleState [TreeItemCollapsibleState](#TreeItemCollapsibleState) of the tree item. Default is [TreeItemCollapsibleState.None](#TreeItemCollapsibleState.None)

src/vs/workbench/api/common/extHostTreeViews.ts

@@ -13,7 +13,7 @@ import { ExtHostTreeViewsShape, MainThreadTreeViewsShape } from './extHost.proto
 import { ITreeItem, TreeViewItemHandleArg, ITreeItemLabel, IRevealOptions } from 'vs/workbench/common/views';
 import { ExtHostCommands, CommandsConverter } from 'vs/workbench/api/common/extHostCommands';
 import { asPromise } from 'vs/base/common/async';
-import { TreeItemCollapsibleState, ThemeIcon, MarkdownString as MarkdownStringType } from 'vs/workbench/api/common/extHostTypes';
+import { TreeItemCollapsibleState, ThemeIcon, MarkdownString as MarkdownStringType, ThemeColor } from 'vs/workbench/api/common/extHostTypes';
 import { isUndefinedOrNull, isString } from 'vs/base/common/types';
 import { equals, coalesce } from 'vs/base/common/arrays';
 import { ILogService } from 'vs/platform/log/common/log';
@@ -550,6 +550,7 @@ class ExtHostTreeView<T> extends Disposable {
 			icon,
 			iconDark: this.getDarkIconPath(extensionTreeItem) || icon,
 			themeIcon: extensionTreeItem.iconPath instanceof ThemeIcon ? { id: extensionTreeItem.iconPath.id } : undefined,
+			iconColor: this.getIconColor(extensionTreeItem),
 			collapsibleState: isUndefinedOrNull(extensionTreeItem.collapsibleState) ? TreeItemCollapsibleState.None : extensionTreeItem.collapsibleState,
 			accessibilityInformation: extensionTreeItem.accessibilityInformation
 		};
@@ -563,6 +564,11 @@ class ExtHostTreeView<T> extends Disposable {
 		};
 	}
 
+	private getIconColor(extensionTreeItem: vscode.TreeItem2): ThemeColor | undefined {
+		checkProposedApiEnabled(this.extension);
+		return (extensionTreeItem.iconPath instanceof ThemeIcon) ? <ThemeColor>extensionTreeItem.iconColor : undefined;
+	}
+
 	private createHandle(element: T, { id, label, resourceUri }: vscode.TreeItem, parent: TreeNode | Root, returnFirst?: boolean): TreeItemHandle {
 		if (id) {
 			return `${ExtHostTreeView.ID_HANDLE_PREFIX}/${id}`;

src/vs/workbench/common/views.ts

@@ -10,7 +10,7 @@ import { RawContextKey, ContextKeyExpression } from 'vs/platform/contextkey/comm
 import { localize } from 'vs/nls';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 import { IDisposable, Disposable, toDisposable } from 'vs/base/common/lifecycle';
-import { ThemeIcon } from 'vs/platform/theme/common/themeService';
+import { ThemeColor, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { getOrSet } from 'vs/base/common/map';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { IKeybindings } from 'vs/platform/keybinding/common/keybindingsRegistry';
@@ -644,6 +644,8 @@ export interface ITreeItem {
 
 	themeIcon?: ThemeIcon;
 
+	iconColor?: ThemeColor;
+
 	resourceUri?: UriComponents;
 
 	tooltip?: string | IMarkdownString;
@@ -666,6 +668,7 @@ export class ResolvableTreeItem implements ITreeItem {
 	icon?: UriComponents;
 	iconDark?: UriComponents;
 	themeIcon?: ThemeIcon;
+	iconColor?: ThemeColor;
 	resourceUri?: UriComponents;
 	tooltip?: string | IMarkdownString;
 	contextValue?: string;

src/vs/workbench/contrib/views/browser/treeView.ts

@@ -792,6 +792,9 @@ class TreeRenderer extends Disposable implements ITreeRenderer<ITreeItem, FuzzyS
 			let iconClass: string | undefined;
 			if (node.themeIcon && !this.isFileKindThemeIcon(node.themeIcon)) {
 				iconClass = ThemeIcon.asClassName(node.themeIcon);
+				if (node.iconColor) {
+					templateData.icon.style.color = this.themeService.getColorTheme().getColor(node.iconColor.id)?.toString() ?? '';
+				}
 			}
 			templateData.icon.className = iconClass ? `custom-view-tree-node-item-icon ${iconClass}` : '';
 			templateData.icon.style.backgroundImage = '';