[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/browser/src/popup/app.module.ts

@@ -1,5 +1,6 @@
 import { A11yModule } from "@angular/cdk/a11y";
 import { DragDropModule } from "@angular/cdk/drag-drop";
+import { LayoutModule } from "@angular/cdk/layout";
 import { OverlayModule } from "@angular/cdk/overlay";
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CurrencyPipe, DatePipe, registerLocaleData } from "@angular/common";
@@ -181,6 +182,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     DragDropModule,
     FormsModule,
     JslibModule,
+    LayoutModule,
     OverlayModule,
     ReactiveFormsModule,
     ScrollingModule,

apps/browser/src/popup/services/init.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from "@angular/core";
 
+import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService as LogServiceAbstraction } from "@bitwarden/common/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
-import { ThemeType } from "@bitwarden/common/enums/themeType";
 
 import { StateService as StateServiceAbstraction } from "../../services/abstractions/state.service";
 
@@ -16,7 +16,8 @@ export class InitService {
     private i18nService: I18nService,
     private popupUtilsService: PopupUtilsService,
     private stateService: StateServiceAbstraction,
-    private logService: LogServiceAbstraction
+    private logService: LogServiceAbstraction,
+    private themingService: AbstractThemingService
   ) {}
 
   init() {
@@ -32,15 +33,7 @@ export class InitService {
       }
 
       const htmlEl = window.document.documentElement;
-      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();
       htmlEl.classList.add("locale_" + this.i18nService.translationLocale);
 
       // Workaround for slow performance on external monitors on Chrome + MacOS

apps/browser/src/popup/settings/options.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 
+import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
@@ -38,7 +39,8 @@ export class OptionsComponent implements OnInit {
     private messagingService: MessagingService,
     private stateService: StateService,
     private totpService: TotpService,
-    i18nService: I18nService
+    i18nService: I18nService,
+    private themingService: AbstractThemingService
   ) {
     this.themeOptions = [
       { name: i18nService.t("default"), value: ThemeType.System },
@@ -145,8 +147,7 @@ export class OptionsComponent implements OnInit {
   }
 
   async saveTheme() {
-    await this.stateService.setTheme(this.theme);
-    window.setTimeout(() => window.location.reload(), 200);
+    await this.themingService.updateConfiguredTheme(this.theme);
   }
 
   async saveDefaultUriMatch() {

apps/browser/src/services/browserPlatformUtils.service.ts

@@ -2,7 +2,6 @@ import { MessagingService } from "@bitwarden/common/abstractions/messaging.servi
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { ClientType } from "@bitwarden/common/enums/clientType";
 import { DeviceType } from "@bitwarden/common/enums/deviceType";
-import { ThemeType } from "@bitwarden/common/enums/themeType";
 
 import { BrowserApi } from "../browser/browserApi";
 import { SafariApp } from "../browser/safariApp";
@@ -17,7 +16,6 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
     { tryResolve: (canceled: boolean, password: string) => Promise<boolean>; date: Date }
   >();
   private deviceCache: DeviceType = null;
-  private prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
 
   constructor(
     private messagingService: MessagingService,
@@ -355,23 +353,4 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
   supportsSecureStorage(): boolean {
     return false;
   }
-
-  getDefaultSystemTheme(): Promise<ThemeType.Light | ThemeType.Dark> {
-    return Promise.resolve(this.prefersColorSchemeDark.matches ? ThemeType.Dark : ThemeType.Light);
-  }
-
-  onDefaultSystemThemeChange(callback: (theme: ThemeType.Light | ThemeType.Dark) => unknown) {
-    this.prefersColorSchemeDark.addEventListener("change", ({ matches }) => {
-      callback(matches ? ThemeType.Dark : ThemeType.Light);
-    });
-  }
-
-  async getEffectiveTheme() {
-    const theme = (await this.stateService.getTheme()) as ThemeType;
-    if (theme == null || theme === ThemeType.System) {
-      return this.getDefaultSystemTheme();
-    } else {
-      return theme;
-    }
-  }
 }