diff --git a/src/core/features/settings/services/settings-helper.ts b/src/core/features/settings/services/settings-helper.ts
index 713407274..cad265dad 100644
--- a/src/core/features/settings/services/settings-helper.ts
+++ b/src/core/features/settings/services/settings-helper.ts
@@ -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);
     };
 
     /**
diff --git a/src/core/services/app.ts b/src/core/services/app.ts
index a44ba3c64..7febb968a 100644
--- a/src/core/services/app.ts
+++ b/src/core/services/app.ts
@@ -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();
+        }
     }
 
     /**