EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

main
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 syncPromises: { [s: string]: Promise<void> } = {};
protected prefersDark?: MediaQueryList; protected prefersDark?: MediaQueryList;
protected colorSchemes: CoreColorScheme[] = []; protected colorSchemes: CoreColorScheme[] = [];
protected currentColorScheme = CoreColorScheme.LIGHT;
constructor() { constructor() {
this.prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
if (!CoreConstants.CONFIG.forceColorScheme) { if (!CoreConstants.CONFIG.forceColorScheme) {
// Update color scheme when a user enters or leaves a site, or when the site info is updated. // Update color scheme when a user enters or leaves a site, or when the site info is updated.
const applySiteScheme = (): void => { const applySiteScheme = (): void => {
@ -72,7 +75,6 @@ export class CoreSettingsHelperProvider {
// Dark mode is disabled, force light mode. // Dark mode is disabled, force light mode.
this.setColorScheme(CoreColorScheme.LIGHT); this.setColorScheme(CoreColorScheme.LIGHT);
} else { } else {
this.prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
// Reset color scheme settings. // Reset color scheme settings.
this.initColorScheme(); this.initColorScheme();
} }
@ -86,7 +88,12 @@ export class CoreSettingsHelperProvider {
// Reset color scheme settings. // Reset color scheme settings.
this.initColorScheme(); 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. * @param colorScheme Name of the color scheme.
*/ */
setColorScheme(colorScheme: CoreColorScheme): void { setColorScheme(colorScheme: CoreColorScheme): void {
this.currentColorScheme = colorScheme;
if (colorScheme == CoreColorScheme.SYSTEM && this.prefersDark) { 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); this.toggleDarkMode(this.prefersDark.matches);
} else { } else {
// Stop listening to changes.
this.prefersDark?.removeEventListener &&
this.prefersDark?.removeEventListener('change', this.toggleDarkModeListener);
this.toggleDarkMode(colorScheme == CoreColorScheme.DARK); this.toggleDarkMode(colorScheme == CoreColorScheme.DARK);
} }
} }
@ -460,11 +460,9 @@ export class CoreSettingsHelperProvider {
/** /**
* Listener function to toggle dark mode. * Listener function to toggle dark mode.
*
* @param e Event object.
*/ */
protected toggleDarkModeListener = (e: MediaQueryListEvent): void => { protected toggleDarkModeListener(): void {
document.body.classList.toggle('dark', e.matches); 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 useLightText = CoreColors.isWhiteContrastingBetter(color);
const statusBar = StatusBar.instance; const statusBar = StatusBar.instance;
statusBar.backgroundColorByHexString(color);
useLightText ? statusBar.styleLightContent() : statusBar.styleDefault();
this.isIOS() && statusBar.overlaysWebView(false); 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();
}
} }
/** /**