diff --git a/src/app/shared/theme-support/theme.effects.spec.ts b/src/app/shared/theme-support/theme.effects.spec.ts
index 96699498c98..2343c8f0736 100644
--- a/src/app/shared/theme-support/theme.effects.spec.ts
+++ b/src/app/shared/theme-support/theme.effects.spec.ts
@@ -2,13 +2,8 @@ import { TestBed } from '@angular/core/testing';
 import { ROOT_EFFECTS_INIT } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { provideMockStore } from '@ngrx/store/testing';
-import {
-  cold,
-  hot,
-} from 'jasmine-marbles';
+import { hot } from 'jasmine-marbles';
 
-import { SetThemeAction } from './theme.actions';
-import { BASE_THEME_NAME } from './theme.constants';
 import { ThemeEffects } from './theme.effects';
 
 describe('ThemeEffects', () => {
@@ -46,13 +41,5 @@ describe('ThemeEffects', () => {
         }),
       );
     });
-
-    it('should set the default theme', () => {
-      const expected = cold('--b-', {
-        b: new SetThemeAction(BASE_THEME_NAME),
-      });
-
-      expect(themeEffects.initTheme$).toBeObservable(expected);
-    });
   });
 });
diff --git a/src/app/shared/theme-support/theme.effects.ts b/src/app/shared/theme-support/theme.effects.ts
index f16c6cee705..cc54928c4c2 100644
--- a/src/app/shared/theme-support/theme.effects.ts
+++ b/src/app/shared/theme-support/theme.effects.ts
@@ -1,35 +1,13 @@
 import { Injectable } from '@angular/core';
-import {
-  Actions,
-  createEffect,
-  ofType,
-  ROOT_EFFECTS_INIT,
-} from '@ngrx/effects';
-import { map } from 'rxjs/operators';
+import { Actions } from '@ngrx/effects';
 
-import { getDefaultThemeConfig } from '../../../config/config.util';
-import { hasValue } from '../empty.util';
-import { SetThemeAction } from './theme.actions';
-import { BASE_THEME_NAME } from './theme.constants';
 
 @Injectable()
 export class ThemeEffects {
   /**
    * Initialize with a theme that doesn't depend on the route.
    */
-  initTheme$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(ROOT_EFFECTS_INIT),
-      map(() => {
-        const defaultThemeConfig = getDefaultThemeConfig();
-        if (hasValue(defaultThemeConfig)) {
-          return new SetThemeAction(defaultThemeConfig.name);
-        } else {
-          return new SetThemeAction(BASE_THEME_NAME);
-        }
-      }),
-    ),
-  );
+
 
   constructor(
     private actions$: Actions,
diff --git a/src/app/shared/theme-support/theme.service.ts b/src/app/shared/theme-support/theme.service.ts
index 6d0ba38b5b7..dc146901264 100644
--- a/src/app/shared/theme-support/theme.service.ts
+++ b/src/app/shared/theme-support/theme.service.ts
@@ -383,6 +383,13 @@ export class ThemeService {
             take(1),
             map((theme: Theme) => this.getActionForMatch(theme, currentTheme)),
           );
+        } else if (hasNoValue(currentTheme)) {
+          const defaultThemeConfig = getDefaultThemeConfig();
+          if (hasValue(defaultThemeConfig)) {
+            return [new SetThemeAction(defaultThemeConfig.name)];
+          } else {
+            return [new SetThemeAction(BASE_THEME_NAME)];
+          }
         } else {
           // If there are no themes configured, do nothing
           return observableOf(new NoOpAction());
diff --git a/src/app/shared/theme-support/themed.component.ts b/src/app/shared/theme-support/themed.component.ts
index 84b1163d7b6..cd40d59825d 100644
--- a/src/app/shared/theme-support/themed.component.ts
+++ b/src/app/shared/theme-support/themed.component.ts
@@ -30,6 +30,7 @@ import { GenericConstructor } from '../../core/shared/generic-constructor';
 import {
   hasNoValue,
   hasValue,
+  hasValueOperator,
   isNotEmpty,
 } from '../empty.util';
 import { BASE_THEME_NAME } from './theme.constants';
@@ -71,6 +72,7 @@ export abstract class ThemedComponent<T extends object> implements AfterViewInit
   protected abstract getComponentName(): string;
 
   protected abstract importThemedComponent(themeName: string): Promise<any>;
+
   protected abstract importUnthemedComponent(): Promise<any>;
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -99,16 +101,17 @@ export abstract class ThemedComponent<T extends object> implements AfterViewInit
   }
 
   initComponentInstance(changes?: SimpleChanges) {
-    this.themeSub = this.themeService?.getThemeName$().subscribe(() => {
-      this.renderComponentInstance(changes);
-    });
+    this.themeSub = this.themeService?.getThemeName$()
+      .pipe(hasValueOperator())
+      .subscribe(() => {
+        this.renderComponentInstance(changes);
+      });
   }
 
   protected renderComponentInstance(changes?: SimpleChanges): void {
     if (hasValue(this.lazyLoadSub)) {
       this.lazyLoadSub.unsubscribe();
     }
-
     if (hasNoValue(this.lazyLoadObs)) {
       this.lazyLoadObs = combineLatest([
         observableOf(changes),