Merge pull request #1373 from sorin-davidoi/system-theme
feat: Use system theme if available
This commit is contained in:
commit
e88b73c747
|
@ -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,
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue