fix #8374: set default value of colorTheme and iconTheme preference

Also-by: tom-shan <swt0008411@163.com>
Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>

dev-packages/application-manager/src/generator/frontend-generator.ts

@@ -72,16 +72,15 @@ export class FrontendGenerator extends AbstractGenerator {
 ${this.ifBrowser("require('es6-promise/auto');")}
 require('reflect-metadata');
 const { Container } = require('inversify');
+const { FrontendApplicationConfigProvider } = require('@theia/core/lib/browser/frontend-application-config-provider');
+FrontendApplicationConfigProvider.set(${this.prettyStringify(this.pck.props.frontend.config)});
 const { FrontendApplication } = require('@theia/core/lib/browser');
 const { frontendApplicationModule } = require('@theia/core/lib/browser/frontend-application-module');
 const { messagingFrontendModule } = require('@theia/core/lib/${this.pck.isBrowser()
                 ? 'browser/messaging/messaging-frontend-module'
                 : 'electron-browser/messaging/electron-messaging-frontend-module'}');
 const { loggerFrontendModule } = require('@theia/core/lib/browser/logger-frontend-module');
 const { ThemeService } = require('@theia/core/lib/browser/theming');
-const { FrontendApplicationConfigProvider } = require('@theia/core/lib/browser/frontend-application-config-provider');
-
-FrontendApplicationConfigProvider.set(${this.prettyStringify(this.pck.props.frontend.config)});
 
 const container = new Container();
 container.load(frontendApplicationModule);

dev-packages/application-package/src/application-props.ts

@@ -110,6 +110,11 @@ export interface FrontendApplicationConfig extends ApplicationConfig {
      */
     readonly defaultTheme?: string;
 
+    /**
+     * The default icon theme for the application. If not give, defaults to `none`. If invalid theme is given, also defaults to `none`.
+     */
+    readonly defaultIconTheme?: string;
+
     /**
      * The name of the application. `Eclipse Theia` by default.
      */

packages/core/src/browser/common-frontend-contribution.ts

@@ -361,7 +361,7 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
     }
 
     protected updateThemePreference(preferenceName: 'workbench.colorTheme' | 'workbench.iconTheme'): void {
-        const inspect = this.preferenceService.inspect<string>(preferenceName);
+        const inspect = this.preferenceService.inspect<string | null>(preferenceName);
         const workspaceValue = inspect && inspect.workspaceValue;
         const userValue = inspect && inspect.globalValue;
         const value = workspaceValue || userValue;
@@ -373,16 +373,15 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
     }
 
     protected updateThemeFromPreference(preferenceName: 'workbench.colorTheme' | 'workbench.iconTheme'): void {
-        const value = this.preferences[preferenceName];
+        const inspect = this.preferenceService.inspect<string | null>(preferenceName);
+        const workspaceValue = inspect && inspect.workspaceValue;
+        const userValue = inspect && inspect.globalValue;
+        const value = workspaceValue || userValue;
         if (value !== undefined) {
             if (preferenceName === 'workbench.colorTheme') {
-                if (!value) {
-                    this.themeService.reset();
-                } else {
-                    this.themeService.setCurrentTheme(value);
-                }
+                this.themeService.setCurrentTheme(value || this.themeService.defaultTheme.id);
             } else {
-                this.iconThemes.current = value || 'none';
+                this.iconThemes.current = value || this.iconThemes.default.id;
             }
         }
     }

packages/core/src/browser/core-preferences.ts

@@ -17,7 +17,9 @@
 import { interfaces } from 'inversify';
 import { createPreferenceProxy, PreferenceProxy, PreferenceService, PreferenceContribution, PreferenceSchema } from './preferences';
 import { SUPPORTED_ENCODINGS } from './supported-encodings';
+import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
 
+const applicationConfig = FrontendApplicationConfigProvider.get();
 export const corePreferenceSchema: PreferenceSchema = {
     'type': 'object',
     properties: {
@@ -53,10 +55,12 @@ export const corePreferenceSchema: PreferenceSchema = {
         },
         'workbench.colorTheme': {
             type: 'string',
+            default: applicationConfig?.defaultTheme || 'dark',
             description: 'Specifies the color theme used in the workbench.'
         },
         'workbench.iconTheme': {
             type: ['string', 'null'],
+            default: applicationConfig?.defaultIconTheme || 'none',
             description: "Specifies the icon theme used in the workbench or 'null' to not show any file icons."
         },
         'workbench.silentNotifications': {
@@ -87,8 +91,8 @@ export interface CoreConfiguration {
     'workbench.list.openMode': 'singleClick' | 'doubleClick';
     'workbench.commandPalette.history': number;
     'workbench.editor.highlightModifiedTabs': boolean;
-    'workbench.colorTheme'?: string;
-    'workbench.iconTheme'?: string | null;
+    'workbench.colorTheme': string;
+    'workbench.iconTheme': string | null;
     'workbench.silentNotifications': boolean;
     'files.encoding': string
     'workbench.tree.renderIndentGuides': 'onHover' | 'none' | 'always';

packages/core/src/browser/icon-theme-contribution.ts

@@ -53,7 +53,6 @@ export class DefaultFileIconThemeContribution implements IconTheme, IconThemeCon
 
     registerIconThemes(iconThemes: IconThemeService): MaybePromise<void> {
         iconThemes.register(this);
-        iconThemes.default = this.id;
     }
 
     /* rely on behaviour before for backward-compatibility */

packages/core/src/browser/icon-theme-service.ts

@@ -18,6 +18,7 @@ import { injectable, inject, postConstruct } from 'inversify';
 import { Emitter } from '../common/event';
 import { Disposable, DisposableCollection } from '../common/disposable';
 import { LabelProviderContribution, DidChangeLabelEvent } from './label-provider';
+import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
 
 export interface IconThemeDefinition {
     readonly id: string
@@ -94,13 +95,10 @@ export class IconThemeService {
     protected readonly onDidChangeCurrentEmitter = new Emitter<string>();
     readonly onDidChangeCurrent = this.onDidChangeCurrentEmitter.event;
 
-    protected _default: IconTheme;
-
     protected readonly toDeactivate = new DisposableCollection();
 
     @postConstruct()
     protected init(): void {
-        this._default = this.noneIconTheme;
         this.register(this.noneIconTheme);
     }
 
@@ -124,12 +122,9 @@ export class IconThemeService {
             return undefined;
         }
         this._iconThemes.delete(id);
-        if (this._default === iconTheme) {
-            this._default = this.noneIconTheme;
-        }
         if (window.localStorage.getItem('iconTheme') === id) {
             window.localStorage.removeItem('iconTheme');
-            this.onDidChangeCurrentEmitter.fire(this._default.id);
+            this.onDidChangeCurrentEmitter.fire(this.default.id);
         }
         this.onDidChangeEmitter.fire(undefined);
         return iconTheme;
@@ -140,15 +135,15 @@ export class IconThemeService {
     }
 
     set current(id: string) {
-        const newCurrent = this._iconThemes.get(id) || this._default;
+        const newCurrent = this._iconThemes.get(id) || this.default;
         if (this.getCurrent().id !== newCurrent.id) {
             this.setCurrent(newCurrent);
         }
     }
 
     protected getCurrent(): IconTheme {
         const id = window.localStorage.getItem('iconTheme');
-        return id && this._iconThemes.get(id) || this._default;
+        return id && this._iconThemes.get(id) || this.default;
     }
 
     protected setCurrent(current: IconTheme): void {
@@ -158,21 +153,10 @@ export class IconThemeService {
         this.onDidChangeCurrentEmitter.fire(current.id);
     }
 
-    get default(): string {
-        return this._default.id;
+    get default(): IconTheme {
+        const defaultId = FrontendApplicationConfigProvider.get().defaultIconTheme;
+        return defaultId && this._iconThemes.get(defaultId) || this.noneIconTheme;
     }
-
-    set default(id: string) {
-        const newDefault = this._iconThemes.get(id) || this.noneIconTheme;
-        if (this._default.id === newDefault.id) {
-            return;
-        }
-        this._default = newDefault;
-        if (!window.localStorage.getItem('iconTheme')) {
-            this.onDidChangeCurrentEmitter.fire(newDefault.id);
-        }
-    }
-
     protected load(): string | undefined {
         return window.localStorage.getItem('iconTheme') || undefined;
     }

packages/core/src/browser/theming.ts

@@ -50,10 +50,7 @@ export class ThemeService {
         return global[ThemeServiceSymbol] || new ThemeService();
     }
 
-    protected constructor(
-        protected _defaultTheme: string | undefined = FrontendApplicationConfigProvider.get().defaultTheme,
-        protected fallbackTheme: string = 'dark'
-    ) {
+    protected constructor() {
         const global = window as any; // eslint-disable-line @typescript-eslint/no-explicit-any
         global[ThemeServiceSymbol] = this;
     }
@@ -134,7 +131,8 @@ export class ThemeService {
      * The default theme. If that is not applicable, returns with the fallback theme.
      */
     get defaultTheme(): Theme {
-        return this.themes[this._defaultTheme || this.fallbackTheme] || this.themes[this.fallbackTheme];
+        const defaultTheme = FrontendApplicationConfigProvider.get().defaultTheme;
+        return defaultTheme && this.themes[defaultTheme] || this.themes['dartk'];
     }
 
     /**