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')(),
|
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,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -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');
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user