[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

libs/angular/src/services/jslib-services.module.ts

@@ -1,5 +1,7 @@
 import { InjectionToken, Injector, LOCALE_ID, NgModule } from "@angular/core";
 
+import { ThemingService } from "@bitwarden/angular/services/theming/theming.service";
+import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
 import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/abstractions/appId.service";
 import { AuditService as AuditServiceAbstraction } from "@bitwarden/common/abstractions/audit.service";
@@ -423,6 +425,10 @@ export const SYSTEM_LANGUAGE = new InjectionToken<string>("SYSTEM_LANGUAGE");
       useClass: TwoFactorService,
       deps: [I18nServiceAbstraction, PlatformUtilsServiceAbstraction],
     },
+    {
+      provide: AbstractThemingService,
+      useClass: ThemingService,
+    },
   ],
 })
 export class JslibServicesModule {}

libs/angular/src/services/theming/theme.ts

@@ -0,0 +1,6 @@
+import { ThemeType } from "@bitwarden/common/enums/themeType";
+
+export interface Theme {
+  configuredTheme: ThemeType;
+  effectiveTheme: ThemeType;
+}

libs/angular/src/services/theming/themeBuilder.ts

@@ -0,0 +1,19 @@
+import { ThemeType } from "@bitwarden/common/enums/themeType";
+
+import { Theme } from "./theme";
+
+export class ThemeBuilder implements Theme {
+  get effectiveTheme(): ThemeType {
+    return this.configuredTheme != ThemeType.System ? this.configuredTheme : this.systemTheme;
+  }
+
+  constructor(readonly configuredTheme: ThemeType, readonly systemTheme: ThemeType) {}
+
+  updateSystemTheme(systemTheme: ThemeType): ThemeBuilder {
+    return new ThemeBuilder(this.configuredTheme, systemTheme);
+  }
+
+  updateConfiguredTheme(configuredTheme: ThemeType): ThemeBuilder {
+    return new ThemeBuilder(configuredTheme, this.systemTheme);
+  }
+}

libs/angular/src/services/theming/theming.service.abstraction.ts

@@ -0,0 +1,12 @@
+import { Observable } from "rxjs";
+
+import { ThemeType } from "@bitwarden/common/enums/themeType";
+
+import { Theme } from "./theme";
+
+export abstract class AbstractThemingService {
+  theme$: Observable<Theme>;
+  monitorThemeChanges: () => Promise<void>;
+  updateSystemTheme: (systemTheme: ThemeType) => void;
+  updateConfiguredTheme: (theme: ThemeType) => Promise<void>;
+}

libs/angular/src/services/theming/theming.service.ts

@@ -0,0 +1,71 @@
+import { MediaMatcher } from "@angular/cdk/layout";
+import { DOCUMENT } from "@angular/common";
+import { Inject, Injectable } from "@angular/core";
+import { BehaviorSubject, filter, fromEvent, Observable } from "rxjs";
+
+import { StateService } from "@bitwarden/common/abstractions/state.service";
+import { ThemeType } from "@bitwarden/common/enums/themeType";
+
+import { Theme } from "./theme";
+import { ThemeBuilder } from "./themeBuilder";
+import { AbstractThemingService } from "./theming.service.abstraction";
+
+@Injectable()
+export class ThemingService implements AbstractThemingService {
+  private _theme = new BehaviorSubject<ThemeBuilder | null>(null);
+  theme$: Observable<Theme> = this._theme.pipe(filter((x) => x !== null));
+
+  constructor(
+    private stateService: StateService,
+    private mediaMatcher: MediaMatcher,
+    @Inject(DOCUMENT) private document: Document
+  ) {
+    this.monitorThemeChanges();
+  }
+
+  async monitorThemeChanges(): Promise<void> {
+    this._theme.next(
+      new ThemeBuilder(await this.stateService.getTheme(), await this.getSystemTheme())
+    );
+    this.monitorConfiguredThemeChanges();
+    this.monitorSystemThemeChanges();
+  }
+
+  updateSystemTheme(systemTheme: ThemeType): void {
+    this._theme.next(this._theme.getValue().updateSystemTheme(systemTheme));
+  }
+
+  async updateConfiguredTheme(theme: ThemeType): Promise<void> {
+    await this.stateService.setTheme(theme);
+    this._theme.next(this._theme.getValue().updateConfiguredTheme(theme));
+  }
+
+  protected monitorConfiguredThemeChanges(): void {
+    this.theme$.subscribe((theme: Theme) => {
+      this.document.documentElement.classList.remove(
+        "theme_" + ThemeType.Light,
+        "theme_" + ThemeType.Dark,
+        "theme_" + ThemeType.Nord,
+        "theme_" + ThemeType.SolarizedDark
+      );
+      this.document.documentElement.classList.add("theme_" + theme.effectiveTheme);
+    });
+  }
+
+  // We use a media match query for monitoring the system theme on web and browser, but this doesn't work for electron apps on Linux.
+  // In desktop we override these methods to track systemTheme with the electron renderer instead, which works for all OSs.
+  protected async getSystemTheme(): Promise<ThemeType> {
+    return this.mediaMatcher.matchMedia("(prefers-color-scheme: dark)").matches
+      ? ThemeType.Dark
+      : ThemeType.Light;
+  }
+
+  protected monitorSystemThemeChanges(): void {
+    fromEvent<MediaQueryListEvent>(
+      this.mediaMatcher.matchMedia("(prefers-color-scheme: dark)"),
+      "change"
+    ).subscribe((event) => {
+      this.updateSystemTheme(event.matches ? ThemeType.Dark : ThemeType.Light);
+    });
+  }
+}

libs/common/src/abstractions/platformUtils.service.ts

@@ -1,6 +1,5 @@
 import { ClientType } from "../enums/clientType";
 import { DeviceType } from "../enums/deviceType";
-import { ThemeType } from "../enums/themeType";
 
 interface ToastOptions {
   timeout?: number;
@@ -43,10 +42,5 @@ export abstract class PlatformUtilsService {
   readFromClipboard: (options?: any) => Promise<string>;
   supportsBiometric: () => Promise<boolean>;
   authenticateBiometric: () => Promise<boolean>;
-  getDefaultSystemTheme: () => Promise<ThemeType.Light | ThemeType.Dark>;
-  onDefaultSystemThemeChange: (
-    callback: (theme: ThemeType.Light | ThemeType.Dark) => unknown
-  ) => unknown;
-  getEffectiveTheme: () => Promise<ThemeType>;
   supportsSecureStorage: () => boolean;
 }

libs/electron/src/services/electronPlatformUtils.service.ts

@@ -6,7 +6,6 @@ import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUti
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { ClientType } from "@bitwarden/common/enums/clientType";
 import { DeviceType } from "@bitwarden/common/enums/deviceType";
-import { ThemeType } from "@bitwarden/common/enums/themeType";
 
 import { isDev, isMacAppStore } from "../utils";
 
@@ -189,25 +188,6 @@ export class ElectronPlatformUtilsService implements PlatformUtilsService {
     });
   }
 
-  getDefaultSystemTheme() {
-    return ipcRenderer.invoke("systemTheme");
-  }
-
-  onDefaultSystemThemeChange(callback: (theme: ThemeType.Light | ThemeType.Dark) => unknown) {
-    ipcRenderer.on("systemThemeUpdated", (event, theme: ThemeType.Light | ThemeType.Dark) =>
-      callback(theme)
-    );
-  }
-
-  async getEffectiveTheme() {
-    const theme = await this.stateService.getTheme();
-    if (theme == null || theme === ThemeType.System) {
-      return this.getDefaultSystemTheme();
-    } else {
-      return theme;
-    }
-  }
-
   supportsSecureStorage(): boolean {
     return true;
   }

libs/node/src/cli/services/cliPlatformUtils.service.ts

@@ -3,7 +3,6 @@ import * as child_process from "child_process";
 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";
 
 // eslint-disable-next-line
 const open = require("open");
@@ -148,18 +147,6 @@ export class CliPlatformUtilsService implements PlatformUtilsService {
     return Promise.resolve(false);
   }
 
-  getDefaultSystemTheme() {
-    return Promise.resolve(ThemeType.Light as ThemeType.Light | ThemeType.Dark);
-  }
-
-  onDefaultSystemThemeChange() {
-    /* noop */
-  }
-
-  getEffectiveTheme() {
-    return Promise.resolve(ThemeType.Light);
-  }
-
   supportsSecureStorage(): boolean {
     return false;
   }