diff --git a/packages/monaco/src/browser/monaco-frontend-application-contribution.ts b/packages/monaco/src/browser/monaco-frontend-application-contribution.ts index 2e36d16d03f86..a982ffd95bb8e 100644 --- a/packages/monaco/src/browser/monaco-frontend-application-contribution.ts +++ b/packages/monaco/src/browser/monaco-frontend-application-contribution.ts @@ -16,15 +16,11 @@ import { injectable, inject } from 'inversify'; import { FrontendApplicationContribution, PreferenceSchemaProvider } from '@theia/core/lib/browser'; -import { ThemeService } from '@theia/core/lib/browser/theming'; import { MonacoSnippetSuggestProvider } from './monaco-snippet-suggest-provider'; @injectable() export class MonacoFrontendApplicationContribution implements FrontendApplicationContribution { - @inject(ThemeService) - protected readonly themeService: ThemeService; - @inject(MonacoSnippetSuggestProvider) protected readonly snippetSuggestProvider: MonacoSnippetSuggestProvider; @@ -32,10 +28,6 @@ export class MonacoFrontendApplicationContribution implements FrontendApplicatio protected readonly preferenceSchema: PreferenceSchemaProvider; async initialize() { - const currentTheme = this.themeService.getCurrentTheme(); - this.changeTheme(currentTheme.editorTheme); - this.themeService.onThemeChange(event => this.changeTheme(event.newTheme.editorTheme)); - monaco.suggest.setSnippetSuggestSupport(this.snippetSuggestProvider); for (const language of monaco.languages.getLanguages()) { @@ -48,9 +40,4 @@ export class MonacoFrontendApplicationContribution implements FrontendApplicatio }; } - protected changeTheme(editorTheme: string | undefined) { - const monacoTheme = editorTheme || this.themeService.defaultTheme.id; - monaco.editor.setTheme(monacoTheme); - document.body.classList.add(monacoTheme); - } } diff --git a/packages/monaco/src/browser/textmate/monaco-textmate-service.ts b/packages/monaco/src/browser/textmate/monaco-textmate-service.ts index 7e2a2415e4c22..edf4c50eb5893 100644 --- a/packages/monaco/src/browser/textmate/monaco-textmate-service.ts +++ b/packages/monaco/src/browser/textmate/monaco-textmate-service.ts @@ -74,7 +74,7 @@ export class MonacoTextmateService implements FrontendApplicationContribution { this.grammarRegistry = new Registry({ getOnigLib: () => this.onigasmPromise, - theme: this.monacoThemeRegistry.getTheme(MonacoThemeRegistry.DARK_DEFAULT_THEME), + theme: this.monacoThemeRegistry.getTheme(this.currentEditorTheme), loadGrammar: async (scopeName: string) => { const provider = this.textmateRegistry.getProvider(scopeName); if (provider) { @@ -99,10 +99,20 @@ export class MonacoTextmateService implements FrontendApplicationContribution { }); this.themeService.onThemeChange(themeChange => { - const theme = this.monacoThemeRegistry.getTheme(themeChange.newTheme.editorTheme || MonacoThemeRegistry.DARK_DEFAULT_THEME); + if (themeChange.oldTheme && themeChange.oldTheme.editorTheme) { + document.body.classList.remove(themeChange.oldTheme.editorTheme); + } + const currentEditorTheme = this.currentEditorTheme; + document.body.classList.add(currentEditorTheme); + + // first update registry to run tokenization with the proper theme + const theme = this.monacoThemeRegistry.getTheme(currentEditorTheme); if (theme) { this.grammarRegistry.setTheme(theme); } + + // then trigger tokenization by setting monaco theme + monaco.editor.setTheme(currentEditorTheme); }); for (const { id } of monaco.languages.getLanguages()) { @@ -110,6 +120,10 @@ export class MonacoTextmateService implements FrontendApplicationContribution { } } + protected get currentEditorTheme(): string { + return this.themeService.getCurrentTheme().editorTheme || MonacoThemeRegistry.DARK_DEFAULT_THEME; + } + async activateLanguage(languageId: string) { if (this._activatedLanguages.has(languageId)) { return;