Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-10 19:38:11 +01:00
Code Issues Projects Releases Wiki Activity

[fix] Always use the Window directly in ThemingService (#3116)

Browse Source
This commit is contained in:
Addison Beck 2022-07-15 05:27:13 -04:00 committed by GitHub
parent 797fc3a390
commit d23e043141
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
libs/angular/src/services/theming/theming.service.ts
View File

@ -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<ThemeType> {
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<MediaQueryListEvent>(
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);