Web: update PWA theme_color dynamically based on theme

Benjamin Pasero · Benjamin Pasero · commit fa9c39ae35fb · 2019-09-27T07:43:17.000+02:00
diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts
@@ -781,6 +781,12 @@ export function createStyleSheet(container: HTMLElement = document.getElementsBy
 	return style;
 }
 
+export function createMetaElement(container: HTMLElement = document.getElementsByTagName('head')[0]): HTMLMetaElement {
+	let meta = document.createElement('meta');
+	container.appendChild(meta);
+	return meta;
+}
+
 let _sharedStyleSheet: HTMLStyleElement | null = null;
 function getSharedStyleSheet(): HTMLStyleElement {
 	if (!_sharedStyleSheet) {
diff --git a/src/vs/workbench/browser/style.ts b/src/vs/workbench/browser/style.ts
@@ -7,7 +7,9 @@ import 'vs/css!./media/style';
 
 import { registerThemingParticipant, ITheme, ICssStyleCollector, HIGH_CONTRAST } from 'vs/platform/theme/common/themeService';
 import { iconForeground, foreground, selectionBackground, focusBorder, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, listHighlightForeground, inputPlaceholderForeground } from 'vs/platform/theme/common/colorRegistry';
-import { WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme';
+import { WORKBENCH_BACKGROUND, TITLE_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
+import { isWeb } from 'vs/base/common/platform';
+import { createMetaElement } from 'vs/base/browser/dom';
 
 registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 
@@ -143,4 +145,19 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 		`);
 	}
 
+	// Update <meta name="theme-color" content=""> based on selected theme
+	if (isWeb) {
+		const titleBackground = theme.getColor(TITLE_BAR_ACTIVE_BACKGROUND);
+		if (titleBackground) {
+			const metaElementId = 'monaco-workbench-meta-theme-color';
+			let metaElement = document.getElementById(metaElementId) as HTMLMetaElement | null;
+			if (!metaElement) {
+				metaElement = createMetaElement();
+				metaElement.name = 'theme-color';
+				metaElement.id = metaElementId;
+			}
+
+			metaElement.content = titleBackground.toString();
+		}
+	}
 });
