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:
Sorin Davidoi 2020-08-31 22:33:01 +02:00
parent b795f0e587
commit 260820711e
2 changed files with 19 additions and 3 deletions

View File

@ -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,
},
{

View File

@ -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');
});
}
}