diff --git a/config.xml b/config.xml
index fa9016359..18f423f71 100644
--- a/config.xml
+++ b/config.xml
@@ -51,6 +51,8 @@
+
+
diff --git a/package.json b/package.json
index eebb41b50..a76b756bc 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,6 @@
"cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-media-capture": "3.0.3",
- "cordova-plugin-moodleapp": "file:cordova-plugin-moodleapp",
"cordova-plugin-network-information": "^3.0.0",
"cordova-plugin-prevent-override": "^1.0.1",
"cordova-plugin-screen-orientation": "^3.0.2",
@@ -161,6 +160,7 @@
"check-es-compat": "^1.1.1",
"compare-versions": "^4.1.4",
"concurrently": "^8.2.0",
+ "cordova-plugin-moodleapp": "file:cordova-plugin-moodleapp",
"cross-env": "^7.0.3",
"eslint": "^7.25.0",
"eslint-config-prettier": "^8.3.0",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index dafc3ff30..4f8005305 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -34,6 +34,7 @@ import { CoreDom } from '@singletons/dom';
import { CorePlatform } from '@services/platform';
import { CoreUrl } from '@singletons/url';
import { CoreLogger } from '@singletons/logger';
+import { CorePromisedValue } from '@classes/promised-value';
const MOODLE_SITE_URL_PREFIX = 'url-';
const MOODLE_VERSION_PREFIX = 'version-';
@@ -206,9 +207,39 @@ export class AppComponent implements OnInit, AfterViewInit {
this.logger.debug('Hide splash screen');
SplashScreen.hide();
+ this.setSystemUIColorsAfterSplash();
});
}
+ /**
+ * Set the system UI Colors after hiding the splash to ensure it's correct.
+ *
+ * @returns Promise resolved when done.
+ */
+ protected async setSystemUIColorsAfterSplash(): Promise {
+ // When the app starts and the splash is hidden, the color of the bars changes from transparent to black.
+ // We have to set the current color but we don't know when the change will be made.
+ // This problem is only related to Android, so on iOS it will be only set once.
+ if (!CorePlatform.isAndroid()) {
+ CoreApp.setSystemUIColors();
+
+ return;
+ }
+
+ const promise = new CorePromisedValue();
+
+ const interval = window.setInterval(() => {
+ CoreApp.setSystemUIColors();
+ });
+ setTimeout(() => {
+ clearInterval(interval);
+ promise.resolve();
+
+ }, 1000);
+
+ return promise;
+ }
+
/**
* Async init function on platform ready.
*/
@@ -240,9 +271,6 @@ export class AppComponent implements OnInit, AfterViewInit {
const isOnline = CoreNetwork.isOnline();
CoreDomUtils.toggleModeClass('core-offline', !isOnline, { includeLegacy: true });
-
- // Set StatusBar properties.
- CoreApp.setStatusBarColor();
}
/**
diff --git a/src/core/features/settings/services/settings-helper.ts b/src/core/features/settings/services/settings-helper.ts
index 6e96f8774..b5fdf00ad 100644
--- a/src/core/features/settings/services/settings-helper.ts
+++ b/src/core/features/settings/services/settings-helper.ts
@@ -465,7 +465,7 @@ export class CoreSettingsHelperProvider {
CoreDomUtils.toggleModeClass('dark', enable, { includeLegacy: true });
this.darkModeObservable.next(enable);
- CoreApp.setStatusBarColor();
+ CoreApp.setSystemUIColors();
}
}
diff --git a/src/core/features/styles/services/styles.ts b/src/core/features/styles/services/styles.ts
index 3414d71c2..119730d12 100644
--- a/src/core/features/styles/services/styles.ts
+++ b/src/core/features/styles/services/styles.ts
@@ -278,8 +278,7 @@ export class CoreStylesService {
this.disableStyleElement(style, true);
});
- // Set StatusBar properties.
- CoreApp.setStatusBarColor();
+ CoreApp.setSystemUIColors();
}
/**
@@ -341,7 +340,7 @@ export class CoreStylesService {
this.disableStyleElementByName(siteId, sourceName, false);
}
- CoreApp.setStatusBarColor();
+ CoreApp.setSystemUIColors();
}
}
@@ -371,8 +370,7 @@ export class CoreStylesService {
}));
if (!disabled) {
- // Set StatusBar properties.
- CoreApp.setStatusBarColor();
+ CoreApp.setSystemUIColors();
}
}
@@ -390,7 +388,7 @@ export class CoreStylesService {
await this.setStyle(CoreStylesService.TMP_SITE_ID, handler, false, config);
}));
- CoreApp.setStatusBarColor();
+ CoreApp.setSystemUIColors();
}
/**
@@ -438,7 +436,7 @@ export class CoreStylesService {
}
delete this.stylesEls[siteId];
- CoreApp.setStatusBarColor();
+ CoreApp.setSystemUIColors();
}
}
diff --git a/src/core/services/app.ts b/src/core/services/app.ts
index 56263b143..1b8f62d55 100644
--- a/src/core/services/app.ts
+++ b/src/core/services/app.ts
@@ -15,7 +15,7 @@
import { Injectable } from '@angular/core';
import { CoreDB } from '@services/db';
-import { CoreEvents } from '@singletons/events';
+import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { SQLiteDB, SQLiteDBTableSchema } from '@classes/sqlitedb';
import { makeSingleton, Keyboard, StatusBar } from '@singletons';
@@ -31,6 +31,7 @@ import { CorePromisedValue } from '@classes/promised-value';
import { Subscription } from 'rxjs';
import { CorePlatform } from '@services/platform';
import { CoreNetwork, CoreNetworkConnection } from '@services/network';
+import { CoreMainMenuProvider } from '@features/mainmenu/services/mainmenu';
/**
* Factory to provide some global functionalities, like access to the global app database.
@@ -56,9 +57,14 @@ export class CoreAppProvider {
protected keyboardClosing = false;
protected redirect?: CoreRedirectData;
protected schemaVersionsTable = asyncInstance>();
+ protected mainMenuListener?: CoreEventObserver;
constructor() {
this.logger = CoreLogger.getInstance('CoreAppProvider');
+ if (CorePlatform.isAndroid()) {
+ this.mainMenuListener =
+ CoreEvents.on(CoreMainMenuProvider.MAIN_MENU_VISIBILITY_UPDATED, () => this.setAndroidNavigationBarColor());
+ }
}
/**
@@ -200,7 +206,7 @@ export class CoreAppProvider {
* @returns Store URL.
*/
getAppStoreUrl(storesConfig: CoreStoreConfig): string | undefined {
- if (this.isIOS() && storesConfig.ios) {
+ if (CorePlatform.isIOS() && storesConfig.ios) {
return 'itms-apps://itunes.apple.com/app/' + storesConfig.ios;
}
@@ -618,6 +624,14 @@ export class CoreAppProvider {
return () => false;
}
+ /**
+ * Set System UI Colors.
+ */
+ setSystemUIColors(): void {
+ this.setStatusBarColor();
+ this.setAndroidNavigationBarColor();
+ }
+
/**
* Set StatusBar color depending on platform.
*
@@ -635,16 +649,7 @@ export class CoreAppProvider {
this.logger.debug(`Set status bar color ${color}`);
- const useLightText = CoreColors.isWhiteContrastingBetter(color);
-
- // 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();
- }
+ StatusBar.backgroundColorByHexString(color);
}
/**
@@ -684,6 +689,26 @@ export class CoreAppProvider {
}
}
+ /**
+ * Set NavigationBar color for Android
+ *
+ * @param color RGB color to use as background. If not set the css variable will be read.
+ */
+ protected setAndroidNavigationBarColor(color?: string): void {
+ if (!CorePlatform.isAndroid()) {
+ return;
+ }
+
+ if (!color) {
+ // Get the default color to change it.
+ color = CoreColors.getBottomPageBackgroundColor();
+ }
+
+ this.logger.debug(`Set navigation bar color ${color}`);
+
+ ( window).StatusBar.navigationBackgroundColorByHexString(color);
+ }
+
}
export const CoreApp = makeSingleton(CoreAppProvider);
diff --git a/src/core/singletons/colors.ts b/src/core/singletons/colors.ts
index 44affaa59..806fffe74 100644
--- a/src/core/singletons/colors.ts
+++ b/src/core/singletons/colors.ts
@@ -206,4 +206,23 @@ export class CoreColors {
return CoreColors.getColorHex(color);
}
+ /**
+ * Get the bottom page current background color. Bottom bar if shown or page background otherwise.
+ *
+ * @returns Color in hex format.
+ */
+ static getBottomPageBackgroundColor(): string {
+ const element = document.querySelector('ion-tabs.placement-bottom:not(.tabshidden) ion-tab-bar.mainmenu-tabs');
+ let color: string;
+
+ if (element) {
+ color = getComputedStyle(element).getPropertyValue('--background').trim();
+ } else {
+ // Fallback, it won't always work.
+ color = getComputedStyle(document.body).getPropertyValue('--ion-background-color').trim();
+ }
+
+ return CoreColors.getColorHex(color);
+ }
+
}