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:
@@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user