1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-22 11:13:46 +00:00

[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
This commit is contained in:
Addison Beck
2022-06-23 04:36:05 -07:00
committed by GitHub
parent fd69e163ff
commit 57b8144013
21 changed files with 188 additions and 159 deletions

View File

@@ -5,21 +5,17 @@ import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/abstractions/log.service";
import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
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";
@Injectable()
export class WebPlatformUtilsService implements PlatformUtilsService {
private browserCache: DeviceType = null;
private prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
constructor(
private i18nService: I18nService,
private messagingService: MessagingService,
private logService: LogService,
private stateService: StateService
private logService: LogService
) {}
getDevice(): DeviceType {
@@ -303,32 +299,4 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
supportsSecureStorage() {
return false;
}
getDefaultSystemTheme(): Promise<ThemeType.Light | ThemeType.Dark> {
return Promise.resolve(this.prefersColorSchemeDark.matches ? ThemeType.Dark : ThemeType.Light);
}
async getEffectiveTheme(): Promise<ThemeType.Light | ThemeType.Dark> {
const theme = await this.stateService.getTheme();
if (theme === ThemeType.Dark) {
return ThemeType.Dark;
} else if (theme === ThemeType.System) {
return this.getDefaultSystemTheme();
} else {
return ThemeType.Light;
}
}
onDefaultSystemThemeChange(callback: (theme: ThemeType.Light | ThemeType.Dark) => unknown) {
try {
this.prefersColorSchemeDark.addEventListener("change", ({ matches }) => {
callback(matches ? ThemeType.Dark : ThemeType.Light);
});
} catch (e) {
// Safari older than v14
this.prefersColorSchemeDark.addListener((ev) => {
callback(ev.matches ? ThemeType.Dark : ThemeType.Light);
});
}
}
}