Изменить Angular Тема через RouterOutlet

Question

Здравствуйте, у меня проблема в том, что у меня есть отдельный компонент настройки, который должен иметь возможность менять тему. Но поскольку он вызывается в роутере-розетке, это не имеет никакого эффекта. Если я сделаю это через заголовок, который является чистым дочерним компонентом приложения, он будет работать.

app-component. html

 <div [ngClass]="{'dark-theme': isDarkTheme | async}">
   <div class="mat-app-background">
     <app-header></app-header>
     <router-outlet></router-outlet>
   </div>
 </div>

app-component.ts

 @Component({ selector: "app-root", templateUrl: "app.component.html" })
 export class AppComponent implements OnInit {
   isDarkTheme: Observable<boolean>;

   ngOnInit(): void {
     this.isDarkTheme = this.themeService.isDarkTheme;
   }

   constructor(
     private themeService: ThemeService
   ) {}
 }

theme.service.ts

 @Injectable({
   providedIn: "root"
 })
 export class ThemeService {
   private _darkTheme = new Subject<boolean>();
   isDarkTheme = this._darkTheme.asObservable();

   setDarkTheme(isDarkTheme: boolean): void {
     this._darkTheme.next(isDarkTheme);
   }
 }

settings-component.ts

 export class SettingsComponent implements OnInit {
   isDarkTheme: Observable<boolean>;

   toggleDarkTheme(checked: boolean) {
     this.themeService.setDarkTheme(checked);
   }

   ngOnInit() {
     this.isDarkTheme = this.themeService.isDarkTheme;
   }
 }

settings-component. html

 <mat-slide-toggle [checked]="isDarkTheme | async" (change)="toggleDarkTheme($event.checked)">Dark theme
 </mat-slide-toggle>

Настройки называются <router-outlet>. Если я переключаю ползунок, ничего не происходит. Это не сработает. Если я реализую те же самые вещи в <app-header>, это сработает, потому что это ребенок. Как это исправить? Нужен ли сервис для узлов <router-outlet>