mcp: support new light/dark theme for mcp icons (microsoft#269437)

For merging after endgame

Author: connor4312

src/vs/workbench/contrib/chat/browser/actions/chatToolPicker.ts

@@ -317,9 +317,9 @@ export async function showToolsPicker(
 					children,
 					buttons,
 				};
-				const iconURI = mcpServer.serverMetadata.get()?.icons.getUrl(22);
-				if (iconURI) {
-					bucket.iconPath = { dark: iconURI, light: iconURI };
+				const iconPath = mcpServer.serverMetadata.get()?.icons.getUrl(22);
+				if (iconPath) {
+					bucket.iconPath = iconPath;
 				} else {
 					bucket.iconClass = ThemeIcon.asClassName(Codicon.mcp);
 				}

src/vs/workbench/contrib/mcp/browser/mcpResourceQuickAccess.ts

@@ -37,8 +37,7 @@ export class McpResourcePickHelper {
 	}
 
 	public static item(resource: IMcpResource | IMcpResourceTemplate): IQuickPickItem {
-		const icon = resource.icons.getUrl(22);
-		const iconPath = icon ? { dark: icon, light: icon } : undefined;
+		const iconPath = resource.icons.getUrl(22);
 		if (isMcpResourceTemplate(resource)) {
 			return {
 				id: resource.template.template,

src/vs/workbench/contrib/mcp/common/mcpIcons.ts

@@ -18,9 +18,17 @@ const mcpAllowableContentTypes: readonly string[] = [
 	'image/gif'
 ];
 
+const enum IconTheme {
+	Light,
+	Dark,
+	Any,
+}
+
 interface IIcon {
 	/** URI the image can be loaded from */
 	src: URI;
+	/** Theme for this icon. */
+	theme: IconTheme;
 	/** Sizes of the icon in ascending order. */
 	sizes: { width: number; height: number }[];
 }
@@ -80,6 +88,7 @@ export function parseAndValidateMcpIcon(icons: MCP.Icons, launch: McpServerLaunc
 		const sizesArr = typeof icon.sizes === 'string' ? icon.sizes.split(' ') : Array.isArray(icon.sizes) ? icon.sizes : [];
 		result.push({
 			src: uri,
+			theme: icon.theme === 'light' ? IconTheme.Light : icon.theme === 'dark' ? IconTheme.Dark : IconTheme.Any,
 			sizes: sizesArr.map(size => {
 				const [widthStr, heightStr] = size.toLowerCase().split('x');
 				return { width: Number(widthStr) || 0, height: Number(heightStr) || 0 };
@@ -94,7 +103,7 @@ export function parseAndValidateMcpIcon(icons: MCP.Icons, launch: McpServerLaunc
 
 export class McpIcons implements IMcpIcons {
 	public static fromStored(icons: StoredMcpIcons | undefined) {
-		return McpIcons.fromParsed(icons?.map(i => ({ src: URI.revive(i.src), sizes: i.sizes })));
+		return McpIcons.fromParsed(icons?.map(i => ({ src: URI.revive(i.src), theme: i.theme, sizes: i.sizes })));
 	}
 
 	public static fromParsed(icons: ParsedMcpIcons | undefined) {
@@ -103,14 +112,33 @@ export class McpIcons implements IMcpIcons {
 
 	protected constructor(private readonly _icons: IIcon[]) { }
 
-	getUrl(size: number): URI | undefined {
+	getUrl(size: number): { dark: URI; light?: URI } | undefined {
+		const dark = this.getSizeWithTheme(size, IconTheme.Dark);
+		if (dark?.theme === IconTheme.Any) {
+			return { dark: dark.src };
+		}
+
+		const light = this.getSizeWithTheme(size, IconTheme.Light);
+		if (!light && !dark) {
+			return undefined;
+		}
+
+		return { dark: (dark || light)!.src, light: light?.src };
+	}
+
+	private getSizeWithTheme(size: number, theme: IconTheme): IIcon | undefined {
+		let bestOfAnySize: IIcon | undefined;
+
 		for (const icon of this._icons) {
-			const firstWidth = icon.sizes[0]?.width ?? 0;
-			if (firstWidth > size) {
-				return icon.src;
+			if (icon.theme === theme || icon.theme === IconTheme.Any || icon.theme === undefined) { // undefined check for back compat
+				bestOfAnySize = icon;
+
+				const matchingSize = icon.sizes.find(s => s.width >= size);
+				if (matchingSize) {
+					return { ...icon, sizes: [matchingSize] };
+				}
 			}
 		}
-
-		return this._icons.at(-1)?.src;
+		return bestOfAnySize;
 	}
 }

src/vs/workbench/contrib/mcp/common/mcpLanguageModelToolContribution.ts

@@ -122,11 +122,11 @@ export class McpLanguageModelToolContribution extends Disposable implements IWor
 			const collection = collectionObservable.read(reader);
 			for (const tool of server.tools.read(reader)) {
 				const existing = tools.get(tool.id);
-				const iconURI = tool.icons.getUrl(22);
+				const icons = tool.icons.getUrl(22);
 				const toolData: IToolData = {
 					id: tool.id,
 					source: collectionData.value.source,
-					icon: iconURI ? { dark: iconURI, light: iconURI } : Codicon.tools,
+					icon: icons || Codicon.tools,
 					// duplicative: https://github.com/modelcontextprotocol/modelcontextprotocol/pull/813
 					displayName: tool.definition.annotations?.title || tool.definition.title || tool.definition.name,
 					toolReferenceName: tool.referenceName,

src/vs/workbench/contrib/mcp/common/mcpTypes.ts

@@ -885,5 +885,5 @@ export interface IMcpToolResourceLinkContents {
 
 export interface IMcpIcons {
 	/** Gets the image URI appropriate to the approximate display size */
-	getUrl(size: number): URI | undefined;
+	getUrl(size: number): { dark: URI; light?: URI } | undefined;
 }

src/vs/workbench/contrib/mcp/common/modelContextProtocol.ts

@@ -347,6 +347,15 @@ export namespace MCP {/* JSON-RPC types */
 		 * If not provided, the client should assume that the icon can be used at any size.
 		 */
 		sizes?: string;
+
+		/**
+		 * Optional specifier for the theme this icon is designed for. `light` indicates
+		 * the icon is designed to be used with a light background, and `dark` indicates
+		 * the icon is designed to be used with a dark background.
+		 *
+		 * If not provided, the client should assume the icon can be used with any theme.
+		 */
+		theme?: 'light' | 'dark';
 	}
 
 	/**

src/vs/workbench/contrib/mcp/test/common/mcpIcons.test.ts

@@ -7,28 +7,28 @@ import * as assert from 'assert';
 import { URI } from '../../../../../base/common/uri.js';
 import { ensureNoDisposablesAreLeakedInTestSuite } from '../../../../../base/test/common/utils.js';
 import { NullLogger } from '../../../../../platform/log/common/log.js';
-import { parseAndValidateMcpIcon } from '../../common/mcpIcons.js';
+import { McpIcons, parseAndValidateMcpIcon } from '../../common/mcpIcons.js';
 import { McpServerTransportHTTP, McpServerTransportStdio, McpServerTransportType } from '../../common/mcpTypes.js';
 
+const createHttpLaunch = (url: string): McpServerTransportHTTP => ({
+	type: McpServerTransportType.HTTP,
+	uri: URI.parse(url),
+	headers: []
+});
+
+const createStdioLaunch = (): McpServerTransportStdio => ({
+	type: McpServerTransportType.Stdio,
+	cwd: undefined,
+	command: 'cmd',
+	args: [],
+	env: {},
+	envFile: undefined
+});
+
 suite('MCP Icons', () => {
 	suite('parseAndValidateMcpIcon', () => {
 		ensureNoDisposablesAreLeakedInTestSuite();
 
-		const createHttpLaunch = (url: string): McpServerTransportHTTP => ({
-			type: McpServerTransportType.HTTP,
-			uri: URI.parse(url),
-			headers: []
-		});
-
-		const createStdioLaunch = (): McpServerTransportStdio => ({
-			type: McpServerTransportType.Stdio,
-			cwd: undefined,
-			command: 'cmd',
-			args: [],
-			env: {},
-			envFile: undefined
-		});
-
 		test('includes supported icons and sorts sizes ascending', () => {
 			const logger = new NullLogger();
 			const launch = createHttpLaunch('https://example.com');
@@ -86,4 +86,64 @@ suite('MCP Icons', () => {
 			assert.strictEqual(httpResult.length, 0);
 		});
 	});
+
+	suite('McpIcons', () => {
+		ensureNoDisposablesAreLeakedInTestSuite();
+
+		test('getUrl returns undefined when no icons are available', () => {
+			const icons = McpIcons.fromParsed(undefined);
+			assert.strictEqual(icons.getUrl(16), undefined);
+		});
+
+		test('getUrl prefers theme-specific icons and keeps light fallback', () => {
+			const logger = new NullLogger();
+			const launch = createHttpLaunch('https://example.com');
+			const parsed = parseAndValidateMcpIcon({
+				icons: [
+					{ src: 'https://example.com/dark.png', mimeType: 'image/png', sizes: '16x16 48x48', theme: 'dark' },
+					{ src: 'https://example.com/any.png', mimeType: 'image/png', sizes: '24x24' },
+					{ src: 'https://example.com/light.png', mimeType: 'image/png', sizes: '64x64', theme: 'light' }
+				]
+			}, launch, logger);
+			const icons = McpIcons.fromParsed(parsed);
+			const result = icons.getUrl(32);
+
+			assert.ok(result);
+			assert.strictEqual(result!.dark.toString(), 'https://example.com/dark.png');
+			assert.strictEqual(result!.light?.toString(), 'https://example.com/light.png');
+		});
+
+		test('getUrl falls back to any-theme icons when no exact size exists', () => {
+			const logger = new NullLogger();
+			const launch = createHttpLaunch('https://example.com');
+			const parsed = parseAndValidateMcpIcon({
+				icons: [
+					{ src: 'https://example.com/dark.png', mimeType: 'image/png', sizes: '16x16', theme: 'dark' },
+					{ src: 'https://example.com/any.png', mimeType: 'image/png', sizes: '64x64' }
+				]
+			}, launch, logger);
+			const icons = McpIcons.fromParsed(parsed);
+			const result = icons.getUrl(60);
+
+			assert.ok(result);
+			assert.strictEqual(result!.dark.toString(), 'https://example.com/any.png');
+			assert.strictEqual(result!.light, undefined);
+		});
+
+		test('getUrl reuses light icons when dark theme assets are missing', () => {
+			const logger = new NullLogger();
+			const launch = createHttpLaunch('https://example.com');
+			const parsed = parseAndValidateMcpIcon({
+				icons: [
+					{ src: 'https://example.com/light.png', mimeType: 'image/png', sizes: '32x32', theme: 'light' }
+				]
+			}, launch, logger);
+			const icons = McpIcons.fromParsed(parsed);
+			const result = icons.getUrl(16);
+
+			assert.ok(result);
+			assert.strictEqual(result!.dark.toString(), 'https://example.com/light.png');
+			assert.strictEqual(result!.light?.toString(), 'https://example.com/light.png');
+		});
+	});
 });