Register the current EditorTheme and retrigger monaco tokenizing...

...initially and after theme changed. Additionally remove old css theme class from body. Fixes #4550
eclipse-theia · Jul 16, 2019 · 141f874 · 141f874
1 parent da653c2
commit 141f874
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/packages/monaco/src/browser/monaco-frontend-application-contribution.ts b/packages/monaco/src/browser/monaco-frontend-application-contribution.ts
@@ -16,26 +16,18 @@
 
 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;
 
     @inject(PreferenceSchemaProvider)
     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
@@ -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,17 +99,31 @@ 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 but setting monaco theme
+            monaco.editor.setTheme(currentEditorTheme);
         });
 
         for (const { id } of monaco.languages.getLanguages()) {
             monaco.languages.onLanguage(id, () => this.activateLanguage(id));
         }
     }
 
+    protected get currentEditorTheme(): string {
+        return this.themeService.getCurrentTheme().editorTheme || MonacoThemeRegistry.DARK_DEFAULT_THEME;;
+    }
+
     async activateLanguage(languageId: string) {
         if (this._activatedLanguages.has(languageId)) {
             return;