Expose theme name in webviews (#98128)

* Expose theme name in webviews

Fixes #97663

Adds a data attribute to webviews with the theme name. This is lets extensions write theme specific css for webviews

* Change name to `vscode-theme-name` and add `vscode-theme-kind`

vscode-theme-kind is generic kind: light, dark, high contrast. We already expose this as a classname but for conistency also want to have it as an attribute

src/vs/editor/standalone/test/browser/standaloneLanguages.test.ts

@@ -42,6 +42,8 @@ suite('TokenizationSupport2Adapter', () => {
 		}
 		public getColorTheme(): IStandaloneTheme {
 			return {
+				label: 'mock',
+
 				tokenTheme: new MockTokenTheme(),
 
 				themeName: LIGHT,

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

@@ -87,8 +87,11 @@ export interface ITokenStyle {
 }
 
 export interface IColorTheme {
+
 	readonly type: ThemeType;
 
+	readonly label: string;
+
 	/**
 	 * Resolves the color of the given color identifier. If the theme does not
 	 * specify the color, the default color is returned unless <code>useDefault</code> is set to false.

src/vs/platform/theme/test/common/testThemeService.ts

@@ -9,6 +9,8 @@ import { Color } from 'vs/base/common/color';
 
 export class TestColorTheme implements IColorTheme {
 
+	public readonly label = 'test';
+
 	constructor(private colors: { [id: string]: string; } = {}, public type = DARK) {
 	}
 

src/vs/workbench/contrib/webview/browser/baseWebviewElement.ts

@@ -270,8 +270,8 @@ export abstract class BaseWebview<T extends HTMLElement> extends Disposable {
 	}
 
 	protected style(): void {
-		const { styles, activeTheme } = this.webviewThemeDataProvider.getWebviewThemeData();
-		this._send('styles', { styles, activeTheme });
+		const { styles, activeTheme, themeLabel } = this.webviewThemeDataProvider.getWebviewThemeData();
+		this._send('styles', { styles, activeTheme, themeName: themeLabel });
 	}
 
 	protected handleFocusChange(isFocused: boolean): void {

src/vs/workbench/contrib/webview/browser/pre/main.js

@@ -179,7 +179,7 @@
 		let pendingMessages = [];
 
 		const initData = {
-			initialScrollProgress: undefined
+			initialScrollProgress: undefined,
 		};
 
 
@@ -195,6 +195,9 @@
 			if (body) {
 				body.classList.remove('vscode-light', 'vscode-dark', 'vscode-high-contrast');
 				body.classList.add(initData.activeTheme);
+
+				body.dataset.vscodeThemeKind = initData.activeTheme;
+				body.dataset.vscodeThemeName = initData.themeName || '';
 			}
 
 			if (initData.styles) {
@@ -383,6 +386,7 @@
 			host.onMessage('styles', (_event, data) => {
 				initData.styles = data.styles;
 				initData.activeTheme = data.activeTheme;
+				initData.themeName = data.themeName;
 
 				const target = getActiveFrame();
 				if (!target) {

src/vs/workbench/contrib/webview/common/themeing.ts

@@ -13,6 +13,7 @@ import { Emitter } from 'vs/base/common/event';
 
 interface WebviewThemeData {
 	readonly activeTheme: string;
+	readonly themeLabel: string;
 	readonly styles: { readonly [key: string]: string | number; };
 }
 
@@ -73,7 +74,7 @@ export class WebviewThemeDataProvider extends Disposable {
 		};
 
 		const activeTheme = ApiThemeClassName.fromTheme(theme);
-		return { styles, activeTheme };
+		return { styles, activeTheme, themeLabel: theme.label, };
 	}
 
 	private reset() {