Add color to ThemeIcon

src/vs/platform/theme/common/themeService.ts

@@ -25,10 +25,11 @@ export function themeColorFromId(id: ColorIdentifier) {
 // theme icon
 export interface ThemeIcon {
 	readonly id: string;
+	readonly themeColor?: ThemeColor;
 }
 
 export namespace ThemeIcon {
-	export function isThemeIcon(obj: any): obj is ThemeIcon {
+	export function isThemeIcon(obj: any): obj is ThemeIcon | { id: string } {
 		return obj && typeof obj === 'object' && typeof (<ThemeIcon>obj).id === 'string';
 	}
 

src/vs/vscode.proposed.d.ts

@@ -1025,11 +1025,6 @@ 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)
@@ -2282,4 +2277,14 @@ declare module 'vscode' {
 
 
 	//#endregion
+
+	//#region https://github.com/microsoft/vscode/issues/103120 @alexr00
+	export class ThemeIcon2 extends ThemeIcon {
+		/**
+		 * Returns a new `ThemeIcon` that will use the specified `ThemeColor`
+		 * @param color The `ThemeColor` to use for the icon.
+		 */
+		with(color: ThemeColor): ThemeIcon2;
+	}
+	//#endregion
 }

src/vs/workbench/api/common/extHost.api.impl.ts

@@ -1123,6 +1123,7 @@ export function createApiFactoryAndRegisterActors(accessor: ServicesAccessor): I
 			TextEditorSelectionChangeKind: extHostTypes.TextEditorSelectionChangeKind,
 			ThemeColor: extHostTypes.ThemeColor,
 			ThemeIcon: extHostTypes.ThemeIcon,
+			ThemeIcon2: extHostTypes.ThemeIcon,
 			TreeItem: extHostTypes.TreeItem,
 			TreeItem2: extHostTypes.TreeItem,
 			TreeItemCollapsibleState: extHostTypes.TreeItemCollapsibleState,

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, ThemeColor } from 'vs/workbench/api/common/extHostTypes';
+import { TreeItemCollapsibleState, ThemeIcon, MarkdownString as MarkdownStringType } 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';
@@ -538,7 +538,7 @@ class ExtHostTreeView<T> extends Disposable {
 		const disposable = new DisposableStore();
 		const handle = this.createHandle(element, extensionTreeItem, parent);
 		const icon = this.getLightIconPath(extensionTreeItem);
-		const item = {
+		const item: ITreeItem = {
 			handle,
 			parentHandle: parent ? parent.item.handle : undefined,
 			label: toTreeItemLabel(extensionTreeItem.label, this.extension),
@@ -549,8 +549,7 @@ class ExtHostTreeView<T> extends Disposable {
 			contextValue: extensionTreeItem.contextValue,
 			icon,
 			iconDark: this.getDarkIconPath(extensionTreeItem) || icon,
-			themeIcon: extensionTreeItem.iconPath instanceof ThemeIcon ? { id: extensionTreeItem.iconPath.id } : undefined,
-			iconColor: this.getIconColor(extensionTreeItem),
+			themeIcon: this.getThemeIcon(extensionTreeItem),
 			collapsibleState: isUndefinedOrNull(extensionTreeItem.collapsibleState) ? TreeItemCollapsibleState.None : extensionTreeItem.collapsibleState,
 			accessibilityInformation: extensionTreeItem.accessibilityInformation
 		};
@@ -564,9 +563,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 getThemeIcon(extensionTreeItem: vscode.TreeItem2): ThemeIcon | undefined {
+		if ((extensionTreeItem.iconPath instanceof ThemeIcon) && extensionTreeItem.iconPath.themeColor) {
+			checkProposedApiEnabled(this.extension);
+		}
+		return extensionTreeItem.iconPath instanceof ThemeIcon ? extensionTreeItem.iconPath : undefined;
 	}
 
 	private createHandle(element: T, { id, label, resourceUri }: vscode.TreeItem, parent: TreeNode | Root, returnFirst?: boolean): TreeItemHandle {

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

@@ -2170,9 +2170,15 @@ export class ThemeIcon {
 	static Folder: ThemeIcon;
 
 	readonly id: string;
+	readonly themeColor?: ThemeColor;
 
-	constructor(id: string) {
+	constructor(id: string, color?: ThemeColor) {
 		this.id = id;
+		this.themeColor = color;
+	}
+
+	with(color: ThemeColor): ThemeIcon {
+		return new ThemeIcon(this.id, color);
 	}
 }
 ThemeIcon.File = new ThemeIcon('file');

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 { ThemeColor, ThemeIcon } from 'vs/platform/theme/common/themeService';
+import { 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,8 +644,6 @@ export interface ITreeItem {
 
 	themeIcon?: ThemeIcon;
 
-	iconColor?: ThemeColor;
-
 	resourceUri?: UriComponents;
 
 	tooltip?: string | IMarkdownString;
@@ -668,7 +666,6 @@ 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

@@ -793,8 +793,8 @@ 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() ?? '';
+				if (node.themeIcon.themeColor) {
+					templateData.icon.style.color = this.themeService.getColorTheme().getColor(node.themeIcon.themeColor.id)?.toString() ?? '';
 				}
 			}
 			templateData.icon.className = iconClass ? `custom-view-tree-node-item-icon ${iconClass}` : '';