Skip to content

Commit 55f4cde

Browse files
author
Benjamin Pasero
committed
web - cache and restore base theme via localstorage
Also: let the theme service not change classes on document.body but the actual container of the workbench
1 parent 2498feb commit 55f4cde

7 files changed

Lines changed: 54 additions & 25 deletions

File tree

‎src/vs/code/browser/workbench/workbench.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<meta id="vscode-remote-connection-token" data-settings="{{CONNECTION_AUTH_TOKEN}}">
2525
</head>
2626

27-
<body class="vs-dark" aria-label="">
27+
<body aria-label="">
2828
</body>
2929

3030
<!-- Require our AMD loader -->

‎src/vs/code/electron-browser/workbench/workbench.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ bootstrapWindow.load([
4343
});
4444

4545
/**
46-
* // configuration: IWindowConfiguration
4746
* @param {{
4847
* partsSplashPath?: string,
4948
* highContrast?: boolean,

‎src/vs/workbench/browser/layout.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -557,6 +557,10 @@ export abstract class Layout extends Disposable implements IWorkbenchLayoutServi
557557
return offset;
558558
}
559559

560+
getWorkbenchContainer(): HTMLElement {
561+
return this.parent;
562+
}
563+
560564
getWorkbenchElement(): HTMLElement {
561565
return this.container;
562566
}

‎src/vs/workbench/browser/web.main.ts‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import { mark } from 'vs/base/common/performance';
7-
import { domContentLoaded, addDisposableListener, EventType } from 'vs/base/browser/dom';
7+
import { domContentLoaded, addDisposableListener, EventType, addClass } from 'vs/base/browser/dom';
88
import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
99
import { ILogService } from 'vs/platform/log/common/log';
1010
import { Disposable } from 'vs/base/common/lifecycle';
@@ -39,6 +39,7 @@ import { BACKUPS } from 'vs/platform/environment/common/environment';
3939
import { joinPath } from 'vs/base/common/resources';
4040
import { BrowserStorageService } from 'vs/platform/storage/browser/storageService';
4141
import { IStorageService } from 'vs/platform/storage/common/storage';
42+
import { getThemeTypeSelector, DARK, HIGH_CONTRAST, LIGHT } from 'vs/platform/theme/common/themeService';
4243

4344
class CodeRendererMain extends Disposable {
4445

@@ -57,6 +58,9 @@ class CodeRendererMain extends Disposable {
5758
await domContentLoaded();
5859
mark('willStartWorkbench');
5960

61+
// Base Theme
62+
this.restoreBaseTheme();
63+
6064
// Create Workbench
6165
this.workbench = new Workbench(
6266
this.domElement,
@@ -69,12 +73,30 @@ class CodeRendererMain extends Disposable {
6973

7074
// Workbench Lifecycle
7175
this._register(this.workbench.onShutdown(() => this.dispose()));
72-
this._register(this.workbench.onWillShutdown(() => services.storageService.close()));
76+
this._register(this.workbench.onWillShutdown(() => {
77+
services.storageService.close();
78+
this.saveBaseTheme();
79+
}));
7380

7481
// Startup
7582
this.workbench.startup();
7683
}
7784

85+
private restoreBaseTheme(): void {
86+
addClass(this.domElement, window.localStorage.getItem('baseTheme') || getThemeTypeSelector(DARK));
87+
}
88+
89+
private saveBaseTheme(): void {
90+
const classes = this.domElement.className;
91+
const baseThemes = [DARK, LIGHT, HIGH_CONTRAST].map(baseTheme => getThemeTypeSelector(baseTheme));
92+
for (const baseTheme of baseThemes) {
93+
if (classes.indexOf(baseTheme) >= 0) {
94+
window.localStorage.setItem('baseTheme', baseTheme);
95+
break;
96+
}
97+
}
98+
}
99+
78100
private async initServices(): Promise<{ serviceCollection: ServiceCollection, logService: ILogService, storageService: BrowserStorageService }> {
79101
const serviceCollection = new ServiceCollection();
80102

‎src/vs/workbench/services/layout/browser/layoutService.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,11 @@ export interface IWorkbenchLayoutService extends ILayoutService {
138138
*/
139139
setPanelPosition(position: Position): void;
140140

141+
/**
142+
* Returns the element that is parent of the workbench element.
143+
*/
144+
getWorkbenchContainer(): HTMLElement;
145+
141146
/**
142147
* Returns the element that contains the workbench.
143148
*/

‎src/vs/workbench/services/themes/browser/workbenchThemeService.ts‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { textmateColorsSchemaId, registerColorThemeSchemas, textmateColorSetting
3131
import { workbenchColorsSchemaId } from 'vs/platform/theme/common/colorRegistry';
3232
import { registerSingleton } from 'vs/platform/instantiation/common/extensions';
3333
import { getRemoteAuthority } from 'vs/platform/remote/common/remoteHosts';
34+
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
3435

3536
// implementation
3637

@@ -96,10 +97,11 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
9697
@IConfigurationService private readonly configurationService: IConfigurationService,
9798
@ITelemetryService private readonly telemetryService: ITelemetryService,
9899
@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService,
99-
@IFileService private readonly fileService: IFileService
100+
@IFileService private readonly fileService: IFileService,
101+
@IWorkbenchLayoutService readonly layoutService: IWorkbenchLayoutService
100102
) {
101103

102-
this.container = document.body;
104+
this.container = layoutService.getWorkbenchContainer();
103105
this.colorThemeStore = new ColorThemeStore(extensionService, ColorThemeData.createLoadedEmptyTheme(DEFAULT_THEME_ID, DEFAULT_THEME_SETTING_VALUE));
104106
this.onFileIconThemeChange = new Emitter<IFileIconTheme>();
105107
this.iconThemeStore = new FileIconThemeStore(extensionService);
@@ -385,14 +387,13 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
385387
}
386388

387389
private applyTheme(newTheme: ColorThemeData, settingsTarget: ConfigurationTarget | undefined | 'auto', silent = false): Promise<IColorTheme | null> {
388-
if (this.container) {
389-
if (this.currentColorTheme) {
390-
removeClasses(this.container, this.currentColorTheme.id);
391-
} else {
392-
removeClasses(this.container, VS_DARK_THEME, VS_LIGHT_THEME, VS_HC_THEME);
393-
}
394-
addClasses(this.container, newTheme.id);
390+
if (this.currentColorTheme) {
391+
removeClasses(this.container, this.currentColorTheme.id);
392+
} else {
393+
removeClasses(this.container, VS_DARK_THEME, VS_LIGHT_THEME, VS_HC_THEME);
395394
}
395+
addClasses(this.container, newTheme.id);
396+
396397
this.currentColorTheme = newTheme;
397398
if (!this.themingParticipantChangeListener) {
398399
this.themingParticipantChangeListener = themingRegistry.onThemingParticipantAdded(_ => this.updateDynamicCSSRules(this.currentColorTheme));
@@ -512,12 +513,10 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
512513
private doSetFileIconTheme(iconThemeData: FileIconThemeData): void {
513514
this.currentIconTheme = iconThemeData;
514515

515-
if (this.container) {
516-
if (iconThemeData.id) {
517-
addClasses(this.container, fileIconsEnabledClass);
518-
} else {
519-
removeClasses(this.container, fileIconsEnabledClass);
520-
}
516+
if (iconThemeData.id) {
517+
addClasses(this.container, fileIconsEnabledClass);
518+
} else {
519+
removeClasses(this.container, fileIconsEnabledClass);
521520
}
522521

523522
if (this.fileService && !resources.isEqual(iconThemeData.location, this.watchedIconThemeLocation)) {
@@ -574,12 +573,10 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
574573
}
575574

576575
private getBaseThemeFromContainer() {
577-
if (this.container) {
578-
for (let i = this.container.classList.length - 1; i >= 0; i--) {
579-
const item = document.body.classList.item(i);
580-
if (item === VS_LIGHT_THEME || item === VS_DARK_THEME || item === VS_HC_THEME) {
581-
return item;
582-
}
576+
for (let i = this.container.classList.length - 1; i >= 0; i--) {
577+
const item = this.container.classList.item(i);
578+
if (item === VS_LIGHT_THEME || item === VS_DARK_THEME || item === VS_HC_THEME) {
579+
return item;
583580
}
584581
}
585582
return VS_DARK_THEME;

‎src/vs/workbench/test/workbenchTestServices.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -534,6 +534,8 @@ export class TestLayoutService implements IWorkbenchLayoutService {
534534

535535
public addClass(_clazz: string): void { }
536536
public removeClass(_clazz: string): void { }
537+
538+
public getWorkbenchContainer(): HTMLElement { throw new Error('not implemented'); }
537539
public getWorkbenchElement(): HTMLElement { throw new Error('not implemented'); }
538540

539541
public toggleZenMode(): void { }

0 commit comments

Comments
 (0)