mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-30 13:03:53 +01:00
feat: Use system theme if available
Depends on https://github.com/bitwarden/jslib/pull/161. Closes https://github.com/bitwarden/browser/issues/1256.
This commit is contained in:
parent
b795f0e587
commit
260820711e
@ -72,7 +72,7 @@ export const authService = new AuthService(getBgService<CryptoService>('cryptoSe
|
||||
export const searchService = new PopupSearchService(getBgService<SearchService>('searchService')(),
|
||||
getBgService<CipherService>('cipherService')(), getBgService<PlatformUtilsService>('platformUtilsService')());
|
||||
|
||||
export function initFactory(i18nService: I18nService, storageService: StorageService,
|
||||
export function initFactory(platformUtilsService: PlatformUtilsService, i18nService: I18nService, storageService: StorageService,
|
||||
popupUtilsService: PopupUtilsService): Function {
|
||||
return async () => {
|
||||
if (!popupUtilsService.inPopup(window)) {
|
||||
@ -89,7 +89,12 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
|
||||
|
||||
let theme = await storageService.get<string>(ConstantsService.themeKey);
|
||||
if (theme == null) {
|
||||
theme = 'light';
|
||||
theme = platformUtilsService.getDefaultSystemTheme();
|
||||
|
||||
platformUtilsService.onDefaultSystemThemeChange(theme => {
|
||||
window.document.documentElement.classList.remove('theme_light', 'theme_dark');
|
||||
window.document.documentElement.classList.add('theme_' + theme);
|
||||
});
|
||||
}
|
||||
window.document.documentElement.classList.add('locale_' + i18nService.translationLocale);
|
||||
window.document.documentElement.classList.add('theme_' + theme);
|
||||
@ -169,7 +174,7 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
|
||||
{
|
||||
provide: APP_INITIALIZER,
|
||||
useFactory: initFactory,
|
||||
deps: [I18nService, StorageService, PopupUtilsService],
|
||||
deps: [PlatformUtilsService, I18nService, StorageService, PopupUtilsService],
|
||||
multi: true,
|
||||
},
|
||||
{
|
||||
|
@ -16,6 +16,7 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
|
||||
private showDialogResolves = new Map<number, { resolve: (value: boolean) => void, date: Date }>();
|
||||
private deviceCache: DeviceType = null;
|
||||
private analyticsIdCache: string = null;
|
||||
private prefersColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
constructor(private messagingService: MessagingService,
|
||||
private clipboardWriteCallback: (clipboardValue: string, clearMs: number) => void) { }
|
||||
@ -308,4 +309,14 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
|
||||
private isSafariExtension(): boolean {
|
||||
return (window as any).safariAppExtension === true;
|
||||
}
|
||||
|
||||
getDefaultSystemTheme() {
|
||||
return this.prefersColorSchemeDark.matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
onDefaultSystemThemeChange(callback: ((theme: 'light' | 'dark') => unknown)) {
|
||||
this.prefersColorSchemeDark.addListener(({ matches }) => {
|
||||
callback(matches ? 'dark' : 'light');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user