Merge pull request #1373 from sorin-davidoi/system-theme

feat: Use system theme if available
This commit is contained in:
Chad Scharf 2020-12-16 10:33:33 -05:00 committed by GitHub
commit e88b73c747
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 3 deletions

View File

@ -74,7 +74,7 @@ export const authService = new AuthService(getBgService<CryptoService>('cryptoSe
export const searchService = new PopupSearchService(getBgService<SearchService>('searchService')(),
getBgService<CipherService>('cipherService')(), getBgService<ConsoleLogService>('consoleLogService')());
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)) {
@ -91,7 +91,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);
@ -172,7 +177,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,
@ -313,4 +314,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');
});
}
}