From 210167b95ab6d252a180367edb56ceeca364a31d Mon Sep 17 00:00:00 2001
From: Matt Bierner <matb@microsoft.com>
Date: Wed, 20 May 2020 14:32:27 -0700
Subject: [PATCH] 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
---
 .../standalone/test/browser/standaloneLanguages.test.ts     | 2 ++
 src/vs/platform/theme/common/themeService.ts                | 3 +++
 src/vs/platform/theme/test/common/testThemeService.ts       | 2 ++
 .../workbench/contrib/webview/browser/baseWebviewElement.ts | 4 ++--
 src/vs/workbench/contrib/webview/browser/pre/main.js        | 6 +++++-
 src/vs/workbench/contrib/webview/common/themeing.ts         | 3 ++-
 6 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/vs/editor/standalone/test/browser/standaloneLanguages.test.ts b/src/vs/editor/standalone/test/browser/standaloneLanguages.test.ts
index 07bfa4b14bb..ac779135546 100644
--- a/src/vs/editor/standalone/test/browser/standaloneLanguages.test.ts
+++ b/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,
diff --git a/src/vs/platform/theme/common/themeService.ts b/src/vs/platform/theme/common/themeService.ts
index 77f4795576f..6ece94f8379 100644
--- a/src/vs/platform/theme/common/themeService.ts
+++ b/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.
diff --git a/src/vs/platform/theme/test/common/testThemeService.ts b/src/vs/platform/theme/test/common/testThemeService.ts
index 82dbe518768..8f7ab1d68bf 100644
--- a/src/vs/platform/theme/test/common/testThemeService.ts
+++ b/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) {
 	}
 
diff --git a/src/vs/workbench/contrib/webview/browser/baseWebviewElement.ts b/src/vs/workbench/contrib/webview/browser/baseWebviewElement.ts
index 76b1d31219c..e7a2d3d65b9 100644
--- a/src/vs/workbench/contrib/webview/browser/baseWebviewElement.ts
+++ b/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 {
diff --git a/src/vs/workbench/contrib/webview/browser/pre/main.js b/src/vs/workbench/contrib/webview/browser/pre/main.js
index cbeca1aed54..e42932ecf9f 100644
--- a/src/vs/workbench/contrib/webview/browser/pre/main.js
+++ b/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) {
diff --git a/src/vs/workbench/contrib/webview/common/themeing.ts b/src/vs/workbench/contrib/webview/common/themeing.ts
index 5d66fb268ef..01d079be88b 100644
--- a/src/vs/workbench/contrib/webview/common/themeing.ts
+++ b/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() {