daohualiuxiang
/
vscode
mirror of https://github.com/microsoft/vscode.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix PWA title bar theme color active vs inactive

pull/236708/head
BeniBenj 2024-12-20 15:57:34 +01:00
parent 1b43b074a2
commit b7478b1590
No known key found for this signature in database
GPG Key ID: 88390C5F13A9A253
2 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
View File

@ -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;
}

22
src/vs/workbench/browser/style.ts
View File

@ -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.