Fix PWA title bar theme color active vs inactive

microsoft · Dec 20, 2024 · b7478b1 · b7478b1
1 parent 1b43b07
commit b7478b1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
@@ -18,7 +18,7 @@ import { IThemeService } from '../../../../platform/theme/common/themeService.js
 import { TITLE_BAR_ACTIVE_BACKGROUND, TITLE_BAR_ACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_BACKGROUND, TITLE_BAR_BORDER, WORKBENCH_BACKGROUND } from '../../../common/theme.js';
 import { isMacintosh, isWindows, isLinux, isWeb, isNative, platformLocale } from '../../../../base/common/platform.js';
 import { Color } from '../../../../base/common/color.js';
-import { EventType, EventHelper, Dimension, append, $, addDisposableListener, prepend, reset, getWindow, getWindowId, isAncestor, getActiveDocument, isHTMLElement } from '../../../../base/browser/dom.js';
+import { EventType, EventHelper, Dimension, append, $, addDisposableListener, prepend, reset, getWindow, getWindowId, isAncestor, getActiveDocument, isHTMLElement, createMetaElement } from '../../../../base/browser/dom.js';
 import { CustomMenubarControl } from './menubarControl.js';
 import { IInstantiationService, ServicesAccessor } from '../../../../platform/instantiation/common/instantiation.js';
 import { Emitter, Event } from '../../../../base/common/event.js';
@@ -717,6 +717,19 @@ export class BrowserTitlebarPart extends Part implements ITitlebarPart {
 			}) || '';
 			this.element.style.backgroundColor = titleBackground;
 
+			// Update <meta name="theme-color" content=""> based on selected theme
+			if (isWeb) {
+				const metaElementId = 'monaco-workbench-meta-theme-color';
+				let metaElement = mainWindow.document.getElementById(metaElementId) as HTMLMetaElement | null;
+				if (!metaElement) {
+					metaElement = createMetaElement();
+					metaElement.name = 'theme-color';
+					metaElement.id = metaElementId;
+				}
+
+				metaElement.content = titleBackground.toString();
+			}
+
 			if (this.appIconBadge) {
 				this.appIconBadge.style.backgroundColor = titleBackground;
 			}

diff --git a/src/vs/workbench/browser/style.ts b/src/vs/workbench/browser/style.ts
@@ -5,12 +5,10 @@
 
 import './media/style.css';
 import { registerThemingParticipant } from '../../platform/theme/common/themeService.js';
-import { WORKBENCH_BACKGROUND, TITLE_BAR_ACTIVE_BACKGROUND } from '../common/theme.js';
-import { isWeb, isIOS } from '../../base/common/platform.js';
-import { createMetaElement } from '../../base/browser/dom.js';
+import { WORKBENCH_BACKGROUND } from '../common/theme.js';
+import { isIOS } from '../../base/common/platform.js';
 import { isSafari, isStandalone } from '../../base/browser/browser.js';
 import { selectionBackground } from '../../platform/theme/common/colorRegistry.js';
-import { mainWindow } from '../../base/browser/window.js';
 
 registerThemingParticipant((theme, collector) => {
 
@@ -24,22 +22,6 @@ registerThemingParticipant((theme, collector) => {
 		collector.addRule(`.monaco-workbench ::selection { background-color: ${windowSelectionBackground}; }`);
 	}
 
-	// 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 = mainWindow.document.getElementById(metaElementId) as HTMLMetaElement | null;
-			if (!metaElement) {
-				metaElement = createMetaElement();
-				metaElement.name = 'theme-color';
-				metaElement.id = metaElementId;
-			}
-
-			metaElement.content = titleBackground.toString();
-		}
-	}
-
 	// We disable user select on the root element, however on Safari this seems
 	// to prevent any text selection in the monaco editor. As a workaround we
 	// allow to select text in monaco editor instances.