GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3320 settings: Fix dark mode status bar color on iOS

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-06-10 11:01:21 +02:00
parent 045cd0b924
commit 182d9b5ae2
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/core/features/settings/services/settings-helper.ts
View File

@ -63,8 +63,11 @@ export class CoreSettingsHelperProvider {
protected syncPromises: { [s: string]: Promise<void> } = {};
protected prefersDark?: MediaQueryList;
protected colorSchemes: CoreColorScheme[] = [];
protected currentColorScheme = CoreColorScheme.LIGHT;
constructor() {
this.prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
if (!CoreConstants.CONFIG.forceColorScheme) {
// Update color scheme when a user enters or leaves a site, or when the site info is updated.
const applySiteScheme = (): void => {
@ -72,7 +75,6 @@ export class CoreSettingsHelperProvider {
// Dark mode is disabled, force light mode.
this.setColorScheme(CoreColorScheme.LIGHT);
} else {
this.prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
// Reset color scheme settings.
this.initColorScheme();
}
@ -86,7 +88,12 @@ export class CoreSettingsHelperProvider {
// Reset color scheme settings.
this.initColorScheme();
});
} else {
this.initColorScheme();
}
// Listen for changes to the prefers-color-scheme media query.
this.prefersDark.addEventListener && this.prefersDark.addEventListener('change', this.toggleDarkModeListener.bind(this));
}
/**
@ -432,17 +439,10 @@ export class CoreSettingsHelperProvider {
* @param colorScheme Name of the color scheme.
*/
setColorScheme(colorScheme: CoreColorScheme): void {
this.currentColorScheme = colorScheme;
if (colorScheme == CoreColorScheme.SYSTEM && this.prefersDark) {
// Listen for changes to the prefers-color-scheme media query.
this.prefersDark.addEventListener &&
this.prefersDark.addEventListener('change', this.toggleDarkModeListener);
this.toggleDarkMode(this.prefersDark.matches);
} else {
// Stop listening to changes.
this.prefersDark?.removeEventListener &&
this.prefersDark?.removeEventListener('change', this.toggleDarkModeListener);
this.toggleDarkMode(colorScheme == CoreColorScheme.DARK);
}
}
@ -460,11 +460,9 @@ export class CoreSettingsHelperProvider {
/**
* Listener function to toggle dark mode.
*
* @param e Event object.
*/
protected toggleDarkModeListener = (e: MediaQueryListEvent): void => {
document.body.classList.toggle('dark', e.matches);
protected toggleDarkModeListener(): void {
this.setColorScheme(this.currentColorScheme);
};
/**

11
src/core/services/app.ts
View File

@ -654,10 +654,17 @@ export class CoreAppProvider {
const useLightText = CoreColors.isWhiteContrastingBetter(color);
const statusBar = StatusBar.instance;
statusBar.backgroundColorByHexString(color);
useLightText ? statusBar.styleLightContent() : statusBar.styleDefault();
this.isIOS() && statusBar.overlaysWebView(false);
// styleDefault will use white text on iOS when darkmode is on. Force the background to black.
if (this.isIOS() && !useLightText && window.matchMedia('(prefers-color-scheme: dark)').matches) {
statusBar.backgroundColorByHexString('#000000');
statusBar.styleLightContent();
} else {
statusBar.backgroundColorByHexString(color);
useLightText ? statusBar.styleLightContent() : statusBar.styleDefault();
}
}
/**