diff --git a/src/app/shared/theme-support/theme.effects.spec.ts b/src/app/shared/theme-support/theme.effects.spec.ts
index 43727df8d65..cadbae6dd44 100644
--- a/src/app/shared/theme-support/theme.effects.spec.ts
+++ b/src/app/shared/theme-support/theme.effects.spec.ts
@@ -1,11 +1,9 @@
 import { ThemeEffects } from './theme.effects';
 import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
-import { cold, hot } from 'jasmine-marbles';
+import { hot } from 'jasmine-marbles';
 import { ROOT_EFFECTS_INIT } from '@ngrx/effects';
-import { SetThemeAction } from './theme.actions';
 import { provideMockStore } from '@ngrx/store/testing';
-import { BASE_THEME_NAME } from './theme.constants';
 
 describe('ThemeEffects', () => {
   let themeEffects: ThemeEffects;
@@ -42,13 +40,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 df74818fa83..8b21f529a08 100644
--- a/src/app/shared/theme-support/theme.effects.ts
+++ b/src/app/shared/theme-support/theme.effects.ts
@@ -1,29 +1,12 @@
 import { Injectable } from '@angular/core';
-import { createEffect, Actions, ofType, ROOT_EFFECTS_INIT } from '@ngrx/effects';
-import { map } from 'rxjs/operators';
-import { SetThemeAction } from './theme.actions';
-import { hasValue } from '../empty.util';
-import { BASE_THEME_NAME } from './theme.constants';
-import { getDefaultThemeConfig } from '../../../config/config.util';
+import { Actions } from '@ngrx/effects';
 
 @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 40aa559b23d..ee96ad3d614 100644
--- a/src/app/shared/theme-support/theme.service.ts
+++ b/src/app/shared/theme-support/theme.service.ts
@@ -334,6 +334,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 0d2833b33fc..7c260f1b446 100644
--- a/src/app/shared/theme-support/themed.component.ts
+++ b/src/app/shared/theme-support/themed.component.ts
@@ -11,11 +11,16 @@ import {
   HostBinding,
   ElementRef,
 } from '@angular/core';
-import { hasNoValue, hasValue, isNotEmpty } from '../empty.util';
 import { combineLatest, from as fromPromise, Observable, of as observableOf, Subscription, BehaviorSubject } from 'rxjs';
 import { ThemeService } from './theme.service';
 import { catchError, switchMap, map, tap } from 'rxjs/operators';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import {
+  hasNoValue,
+  hasValue,
+  hasValueOperator,
+  isNotEmpty,
+} from '../empty.util';
 import { BASE_THEME_NAME } from './theme.constants';
 
 @Component({
@@ -54,6 +59,7 @@ export abstract class ThemedComponent<T> implements AfterViewInit, OnDestroy, On
   protected abstract getComponentName(): string;
 
   protected abstract importThemedComponent(themeName: string): Promise<any>;
+
   protected abstract importUnthemedComponent(): Promise<any>;
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -82,16 +88,17 @@ export abstract class ThemedComponent<T> implements AfterViewInit, OnDestroy, On
   }
 
   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),