diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 315c6d02c..c86dd90f9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -52,7 +52,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     ngOnInit(): void {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const win = <any> window;
-        CoreDomUtils.toggleModeClass('ionic5', true);
+        CoreDomUtils.toggleModeClass('ionic5', true, { includeLegacy: true });
         this.addVersionClass(MOODLEAPP_VERSION_PREFIX, CoreConstants.CONFIG.versionname.replace('-dev', ''));
 
         CoreEvents.on(CoreEvents.LOGOUT, async () => {
@@ -212,22 +212,22 @@ export class AppComponent implements OnInit, AfterViewInit {
                 const isOnline = CoreNetwork.isOnline();
                 const hadOfflineMessage = CoreDomUtils.hasModeClass('core-offline');
 
-                CoreDomUtils.toggleModeClass('core-offline', !isOnline);
+                CoreDomUtils.toggleModeClass('core-offline', !isOnline, { includeLegacy: true });
 
                 if (isOnline && hadOfflineMessage) {
-                    CoreDomUtils.toggleModeClass('core-online', true);
+                    CoreDomUtils.toggleModeClass('core-online', true, { includeLegacy: true });
 
                     setTimeout(() => {
-                        CoreDomUtils.toggleModeClass('core-online', false);
+                        CoreDomUtils.toggleModeClass('core-online', false, { includeLegacy: true });
                     }, 3000);
                 } else if (!isOnline) {
-                    CoreDomUtils.toggleModeClass('core-online', false);
+                    CoreDomUtils.toggleModeClass('core-online', false, { includeLegacy: true });
                 }
             });
         });
 
         const isOnline = CoreNetwork.isOnline();
-        CoreDomUtils.toggleModeClass('core-offline', !isOnline);
+        CoreDomUtils.toggleModeClass('core-offline', !isOnline, { includeLegacy: true });
 
         // Set StatusBar properties.
         CoreApp.setStatusBarColor();
@@ -256,9 +256,9 @@ export class AppComponent implements OnInit, AfterViewInit {
         parts[1] = parts[1] || '0';
         parts[2] = parts[2] || '0';
 
-        CoreDomUtils.toggleModeClass(prefix + parts[0], true);
-        CoreDomUtils.toggleModeClass(prefix + parts[0] + '-' + parts[1], true);
-        CoreDomUtils.toggleModeClass(prefix + parts[0] + '-' + parts[1] + '-' + parts[2], true);
+        CoreDomUtils.toggleModeClass(prefix + parts[0], true, { includeLegacy: true });
+        CoreDomUtils.toggleModeClass(prefix + parts[0] + '-' + parts[1], true, { includeLegacy: true });
+        CoreDomUtils.toggleModeClass(prefix + parts[0] + '-' + parts[1] + '-' + parts[2], true, { includeLegacy: true });
     }
 
     /**
@@ -272,7 +272,7 @@ export class AppComponent implements OnInit, AfterViewInit {
                 continue;
             }
 
-            CoreDomUtils.toggleModeClass(modeClass, false);
+            CoreDomUtils.toggleModeClass(modeClass, false, { includeLegacy: true });
         }
     }
 
@@ -291,7 +291,7 @@ export class AppComponent implements OnInit, AfterViewInit {
             return '';
         }
 
-        let className = parsedUrl.domain?.replace('.', '-') || '';
+        let className = parsedUrl.domain?.replace(/\./g, '-') || '';
 
         if (parsedUrl.port) {
             className += `--${parsedUrl.port}`;
@@ -301,7 +301,7 @@ export class AppComponent implements OnInit, AfterViewInit {
             const trailing = new RegExp('/+$');
             const path = parsedUrl.path.replace(leading, '').replace(trailing, '');
             if (path) {
-                className += '--' + path.replace('/', '-');
+                className += '--' + path.replace(/\//g, '-') || '';
             }
         }
 
diff --git a/src/core/features/settings/services/settings-helper.ts b/src/core/features/settings/services/settings-helper.ts
index 428bce442..6e96f8774 100644
--- a/src/core/features/settings/services/settings-helper.ts
+++ b/src/core/features/settings/services/settings-helper.ts
@@ -462,7 +462,7 @@ export class CoreSettingsHelperProvider {
         const isDark = CoreDomUtils.hasModeClass('dark');
 
         if (isDark !== enable) {
-            CoreDomUtils.toggleModeClass('dark', enable);
+            CoreDomUtils.toggleModeClass('dark', enable, { includeLegacy: true });
             this.darkModeObservable.next(enable);
 
             CoreApp.setStatusBarColor();
diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts
index 841a8195f..702537b3f 100644
--- a/src/core/services/utils/dom.ts
+++ b/src/core/services/utils/dom.ts
@@ -2034,12 +2034,17 @@ export class CoreDomUtilsProvider {
      *
      * @param className Class name.
      * @param enable Whether to add or remove the class.
+     * @param options Legacy options, deprecated since 4.1.
      */
-    toggleModeClass(className: string, enable?: boolean): void {
+    toggleModeClass(
+        className: string,
+        enable = false,
+        options: { includeLegacy: boolean } = { includeLegacy: false },
+    ): void {
         document.documentElement.classList.toggle(className, enable);
 
         // @deprecated since 4.1
-        document.body.classList.toggle(className, enable);
+        document.body.classList.toggle(className, enable && options.includeLegacy);
     }
 
 }