diff --git a/libs/angular/src/services/theming/theming.service.ts b/libs/angular/src/services/theming/theming.service.ts index b57747b8d0..38eb574a72 100644 --- a/libs/angular/src/services/theming/theming.service.ts +++ b/libs/angular/src/services/theming/theming.service.ts @@ -1,4 +1,3 @@ -import { MediaMatcher } from "@angular/cdk/layout"; import { DOCUMENT } from "@angular/common"; import { Inject, Injectable } from "@angular/core"; import { BehaviorSubject, filter, fromEvent, Observable } from "rxjs"; @@ -6,6 +5,8 @@ import { BehaviorSubject, filter, fromEvent, Observable } from "rxjs"; import { StateService } from "@bitwarden/common/abstractions/state.service"; import { ThemeType } from "@bitwarden/common/enums/themeType"; +import { WINDOW } from "../jslib-services.module"; + import { Theme } from "./theme"; import { ThemeBuilder } from "./themeBuilder"; import { AbstractThemingService } from "./theming.service.abstraction"; @@ -17,7 +18,7 @@ export class ThemingService implements AbstractThemingService { constructor( private stateService: StateService, - private mediaMatcher: MediaMatcher | Window, + @Inject(WINDOW) private window: Window, @Inject(DOCUMENT) private document: Document ) { this.monitorThemeChanges(); @@ -55,14 +56,14 @@ export class ThemingService implements AbstractThemingService { // 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 { - return this.mediaMatcher.matchMedia("(prefers-color-scheme: dark)").matches + return this.window.matchMedia("(prefers-color-scheme: dark)").matches ? ThemeType.Dark : ThemeType.Light; } protected monitorSystemThemeChanges(): void { fromEvent( - this.mediaMatcher.matchMedia("(prefers-color-scheme: dark)"), + this.window.matchMedia("(prefers-color-scheme: dark)"), "change" ).subscribe((event) => { this.updateSystemTheme(event.matches ? ThemeType.Dark : ThemeType.Light);