fix: persist dark mode theme after page reload (#2730)

src/app/settings/settings.service.ts

@@ -255,11 +255,11 @@ export class SettingsService {
     });
   }
 
-  setThemeDarkEnabled(enabled: string) {
+  setThemeDarkEnabled(enabled: boolean) {
-    localStorage.setItem('mifosXThemeDarkEnabled', enabled);
+    localStorage.setItem('mifosXThemeDarkEnabled', JSON.stringify(enabled));
   }
 
-  get themeDarkEnabled() {
+  get themeDarkEnabled(): boolean {
     return JSON.parse(localStorage.getItem('mifosXThemeDarkEnabled'));
   }
 }

src/app/shared/theme-toggle/theme-toggle.component.ts

@@ -24,16 +24,16 @@ export class ThemeToggleComponent implements OnInit, OnChanges {
   ) {}
 
   ngOnInit(): void {
-    this.darkModeOn = this.settingsService.themeDarkEnabled === 'true';
+    this.darkModeOn = !!this.settingsService.themeDarkEnabled;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.darkModeOn = this.settingsService.themeDarkEnabled === 'true';
+    this.darkModeOn = !!this.settingsService.themeDarkEnabled;
   }
 
   toggleTheme() {
     this.darkModeOn = !this.darkModeOn;
-    this.settingsService.setThemeDarkEnabled(this.darkModeOn ? 'true' : 'false');
+    this.settingsService.setThemeDarkEnabled(this.darkModeOn);
     this.themingService.setDarkMode(this.darkModeOn);
   }
 }

src/app/web-app.component.ts

@@ -148,7 +148,7 @@ export class WebAppComponent implements OnInit, OnDestroy {
       this.cssClass = value;
     });
     this.themingService.setInitialDarkMode();
-    this.themingService.setDarkMode(this.settingsService.themeDarkEnabled === 'true');
+    this.themingService.setDarkMode(!!this.settingsService.themeDarkEnabled);
 
     // Setup logger
     if (environment.production) {