Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-28 12:45:45 +01:00
Code Issues Projects Releases Wiki Activity

feat: Use system theme if available

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/popup/services/services.module.ts
View File

@ -72,7 +72,7 @@ export const authService = new AuthService(getBgService<CryptoService>('cryptoSe
export const searchService = new PopupSearchService(getBgService<SearchService>('searchService')(), export const searchService = new PopupSearchService(getBgService<SearchService>('searchService')(),
getBgService<CipherService>('cipherService')(), getBgService<PlatformUtilsService>('platformUtilsService')()); 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 { popupUtilsService: PopupUtilsService): Function {
return async () => { return async () => {
if (!popupUtilsService.inPopup(window)) { if (!popupUtilsService.inPopup(window)) {
@ -89,7 +89,12 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
let theme = await storageService.get<string>(ConstantsService.themeKey); let theme = await storageService.get<string>(ConstantsService.themeKey);
if (theme == null) { 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('locale_' + i18nService.translationLocale);
window.document.documentElement.classList.add('theme_' + theme); window.document.documentElement.classList.add('theme_' + theme);
@ -169,7 +174,7 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
{ {
provide: APP_INITIALIZER, provide: APP_INITIALIZER,
useFactory: initFactory, useFactory: initFactory,
deps: [I18nService, StorageService, PopupUtilsService], deps: [PlatformUtilsService, I18nService, StorageService, PopupUtilsService],
multi: true, multi: true,
}, },
{ {

11
src/services/browserPlatformUtils.service.ts
View File

@ -16,6 +16,7 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
private showDialogResolves = new Map<number, { resolve: (value: boolean) => void, date: Date }>(); private showDialogResolves = new Map<number, { resolve: (value: boolean) => void, date: Date }>();
private deviceCache: DeviceType = null; private deviceCache: DeviceType = null;
private analyticsIdCache: string = null; private analyticsIdCache: string = null;
private prefersColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)');
constructor(private messagingService: MessagingService, constructor(private messagingService: MessagingService,
private clipboardWriteCallback: (clipboardValue: string, clearMs: number) => void) { } private clipboardWriteCallback: (clipboardValue: string, clearMs: number) => void) { }
@ -308,4 +309,14 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
private isSafariExtension(): boolean { private isSafariExtension(): boolean {
return (window as any).safariAppExtension === true; 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');
});
}
} }