[refactor] Introduce ThemingService (#2943)

* [refactor] Introduce ThemingService

* [refactor] Implement ThemingService for web

* [refactor] Implement ThemingService on browser

* [refactor] Implement ThemingService for desktop

* [refactor] Remove deprecated platformUtils.service theme methods

* [fix] Move ThemingService from libs/common to libs/angular

* [fix] Simplify ThemeBuilder's constructor

* [fix] Dont notify subscribers of null values from theme$

* [fix] Always notify PaymentComponent of theme changes

apps/desktop/src/app/accounts/settings.component.ts

@@ -3,6 +3,7 @@ import { FormControl } from "@angular/forms";
 import { debounceTime } from "rxjs/operators";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
@@ -74,7 +75,8 @@ export class SettingsComponent implements OnInit {
     private stateService: StateService,
     private messagingService: MessagingService,
     private cryptoService: CryptoService,
-    private modalService: ModalService
+    private modalService: ModalService,
+    private themingService: AbstractThemingService
   ) {
     const isMac = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop;
 
@@ -342,8 +344,7 @@ export class SettingsComponent implements OnInit {
   }
 
   async saveTheme() {
-    await this.stateService.setTheme(this.theme);
-    window.setTimeout(() => window.location.reload(), 200);
+    await this.themingService.updateConfiguredTheme(this.theme);
   }
 
   async saveMinOnCopyToClipboard() {

apps/desktop/src/app/services/desktop-theming.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from "@angular/core";
+import { ipcRenderer } from "electron";
+
+import { ThemingService } from "@bitwarden/angular/services/theming/theming.service";
+import { ThemeType } from "@bitwarden/common/enums/themeType";
+
+@Injectable()
+export class DesktopThemingService extends ThemingService {
+  protected async getSystemTheme(): Promise<ThemeType> {
+    return await ipcRenderer.invoke("systemTheme");
+  }
+
+  protected monitorSystemThemeChanges(): void {
+    ipcRenderer.on("systemThemeUpdated", (_event, theme: ThemeType) =>
+      this.updateSystemTheme(theme)
+    );
+  }
+}

apps/desktop/src/app/services/init.service.ts

@@ -1,6 +1,7 @@
 import { Inject, Injectable } from "@angular/core";
 
 import { WINDOW } from "@bitwarden/angular/services/jslib-services.module";
+import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { CryptoService as CryptoServiceAbstraction } from "@bitwarden/common/abstractions/crypto.service";
 import { EnvironmentService as EnvironmentServiceAbstraction } from "@bitwarden/common/abstractions/environment.service";
 import { EventService as EventServiceAbstraction } from "@bitwarden/common/abstractions/event.service";
@@ -11,7 +12,6 @@ import { StateService as StateServiceAbstraction } from "@bitwarden/common/abstr
 import { SyncService as SyncServiceAbstraction } from "@bitwarden/common/abstractions/sync.service";
 import { TwoFactorService as TwoFactorServiceAbstraction } from "@bitwarden/common/abstractions/twoFactor.service";
 import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from "@bitwarden/common/abstractions/vaultTimeout.service";
-import { ThemeType } from "@bitwarden/common/enums/themeType";
 import { ContainerService } from "@bitwarden/common/services/container.service";
 import { EventService } from "@bitwarden/common/services/event.service";
 import { VaultTimeoutService } from "@bitwarden/common/services/vaultTimeout.service";
@@ -33,7 +33,8 @@ export class InitService {
     private platformUtilsService: PlatformUtilsServiceAbstraction,
     private stateService: StateServiceAbstraction,
     private cryptoService: CryptoServiceAbstraction,
-    private nativeMessagingService: NativeMessagingService
+    private nativeMessagingService: NativeMessagingService,
+    private themingService: AbstractThemingService
   ) {}
 
   init() {
@@ -50,17 +51,7 @@ export class InitService {
       setTimeout(() => this.notificationsService.init(), 3000);
       const htmlEl = this.win.document.documentElement;
       htmlEl.classList.add("os_" + this.platformUtilsService.getDeviceString());
-
-      const theme = await this.platformUtilsService.getEffectiveTheme();
-      htmlEl.classList.add("theme_" + theme);
-      this.platformUtilsService.onDefaultSystemThemeChange(async (sysTheme) => {
-        const bwTheme = await this.stateService.getTheme();
-        if (bwTheme == null || bwTheme === ThemeType.System) {
-          htmlEl.classList.remove("theme_" + ThemeType.Light, "theme_" + ThemeType.Dark);
-          htmlEl.classList.add("theme_" + sysTheme);
-        }
-      });
-
+      await this.themingService.monitorThemeChanges();
       let installAction = null;
       const installedVersion = await this.stateService.getInstalledVersion();
       const currentVersion = await this.platformUtilsService.getApplicationVersion();

apps/desktop/src/app/services/services.module.ts

@@ -9,6 +9,7 @@ import {
   LOCALES_DIRECTORY,
   SYSTEM_LANGUAGE,
 } from "@bitwarden/angular/services/jslib-services.module";
+import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { BroadcasterService as BroadcasterServiceAbstraction } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CryptoService as CryptoServiceAbstraction } from "@bitwarden/common/abstractions/crypto.service";
 import { CryptoFunctionService as CryptoFunctionServiceAbstraction } from "@bitwarden/common/abstractions/cryptoFunction.service";
@@ -43,6 +44,7 @@ import { StateService } from "../../services/state.service";
 import { LoginGuard } from "../guards/login.guard";
 import { SearchBarService } from "../layout/search/search-bar.service";
 
+import { DesktopThemingService } from "./desktop-theming.service";
 import { InitService } from "./init.service";
 
 const RELOAD_CALLBACK = new InjectionToken<() => any>("RELOAD_CALLBACK");
@@ -129,6 +131,10 @@ const RELOAD_CALLBACK = new InjectionToken<() => any>("RELOAD_CALLBACK");
         STATE_SERVICE_USE_CACHE,
       ],
     },
+    {
+      provide: AbstractThemingService,
+      useClass: DesktopThemingService,
+    },
   ],
 })
 export class ServicesModule {}