diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.ts b/frontend/src/app/components/theme-selector/theme-selector.component.ts
index e6e67dbca..57cbee865 100644
--- a/frontend/src/app/components/theme-selector/theme-selector.component.ts
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts
@@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { ThemeService } from '../../services/theme.service';
+import { Subscription } from 'rxjs';
@Component({
selector: 'app-theme-selector',
@@ -11,6 +12,7 @@ import { ThemeService } from '../../services/theme.service';
export class ThemeSelectorComponent implements OnInit {
themeForm: UntypedFormGroup;
themes = ['default', 'contrast', 'wiz'];
+ themeSubscription: Subscription;
constructor(
private formBuilder: UntypedFormBuilder,
@@ -22,10 +24,20 @@ export class ThemeSelectorComponent implements OnInit {
theme: ['default']
});
this.themeForm.get('theme')?.setValue(this.themeService.theme);
+ // Subscribe to theme changes because two instances of this component exist
+ this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
+ if (this.themeForm.get('theme')?.value !== this.themeService.theme){
+ this.themeForm.get('theme')?.setValue(this.themeService.theme);
+ }
+ });
}
changeTheme() {
const newTheme = this.themeForm.get('theme')?.value;
this.themeService.apply(newTheme);
}
+
+ ngOnDestroy() {
+ this.themeSubscription.unsubscribe();
+ }
}
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index 1a93729d7..74b5b1c6f 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -25,16 +25,16 @@