Refactor config

src/app/layout/config/app.config.component.ts

@@ -1,23 +1,24 @@
 import { Component, Input } from '@angular/core';
-import { LayoutService } from "../service/app.layout.service";
+import { LayoutService } from '../service/app.layout.service';
-import { MenuService } from "../app.menu.service";
+import { MenuService } from '../app.menu.service';
 
 @Component({
     selector: 'app-config',
-    templateUrl: './app.config.component.html'
+    templateUrl: './app.config.component.html',
 })
 export class AppConfigComponent {
-
     @Input() minimal: boolean = false;
 
     scales: number[] = [12, 13, 14, 15, 16];
 
-    constructor(public layoutService: LayoutService, public menuService: MenuService) { }
+    constructor(
+        public layoutService: LayoutService,
+        public menuService: MenuService
+    ) {}
 
     get visible(): boolean {
         return this.layoutService.state.configSidebarVisible;
     }
-
     set visible(_val: boolean) {
         this.layoutService.state.configSidebarVisible = _val;
     }
@@ -25,7 +26,6 @@ export class AppConfigComponent {
     get scale(): number {
         return this.layoutService.config().scale;
     }
-
     set scale(_val: number) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -36,7 +36,6 @@ export class AppConfigComponent {
     get menuMode(): string {
         return this.layoutService.config().menuMode;
     }
-
     set menuMode(_val: string) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -47,7 +46,6 @@ export class AppConfigComponent {
     get inputStyle(): string {
         return this.layoutService.config().inputStyle;
     }
-
     set inputStyle(_val: string) {
         this.layoutService.config().inputStyle = _val;
     }
@@ -55,7 +53,6 @@ export class AppConfigComponent {
     get ripple(): boolean {
         return this.layoutService.config().ripple;
     }
-
     set ripple(_val: boolean) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -63,29 +60,40 @@ export class AppConfigComponent {
         }));
     }
 
+    set theme(val: string) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            theme: val,
+        }));
+    }
+    get theme(): string {
+        return this.layoutService.config().theme;
+    }
+
+    set colorScheme(val: string) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            colorScheme: val,
+        }));
+    }
+    get colorScheme(): string {
+        return this.layoutService.config().colorScheme;
+    }
+
     onConfigButtonClick() {
         this.layoutService.showConfigSidebar();
     }
 
     changeTheme(theme: string, colorScheme: string) {
-        this.layoutService.config.update((config) => ({ ...config, theme:theme,colorScheme:colorScheme }));
+        this.theme = theme;
+        this.colorScheme = colorScheme;
     }
 
-
     decrementScale() {
         this.scale--;
-        this.applyScale();
     }
 
     incrementScale() {
         this.scale++;
-        this.applyScale();
-    }
-
-    applyScale() {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            scale: this.scale,
-        }));
     }
 }

src/app/layout/service/app.layout.service.ts

@@ -23,7 +23,6 @@ interface LayoutState {
     providedIn: 'root',
 })
 export class LayoutService {
-
     _config: AppConfig = {
         ripple: false,
         inputStyle: 'outlined',
@@ -41,7 +40,7 @@ export class LayoutService {
         profileSidebarVisible: false,
         configSidebarVisible: false,
         staticMenuMobileActive: false,
-        menuHoverActive: false
+        menuHoverActive: false,
     };
 
     private configUpdate = new Subject<AppConfig>();
@@ -52,6 +51,24 @@ export class LayoutService {
 
     overlayOpen$ = this.overlayOpen.asObservable();
 
+    constructor() {
+        effect(() => {
+            const config = this.config();
+            if (this.updateStyle(config)) {
+                this.changeTheme();
+            }
+            this.changeScale(config.scale);
+            this.onConfigUpdate();
+        });
+    }
+
+    updateStyle(config: AppConfig) {
+        return (
+            config.theme !== this._config.theme ||
+            config.colorScheme !== this._config.colorScheme
+        );
+    }
+
     onMenuToggle() {
         if (this.isOverlay()) {
             this.state.overlayMenuActive = !this.state.overlayMenuActive;
@@ -61,10 +78,11 @@ export class LayoutService {
         }
 
         if (this.isDesktop()) {
-            this.state.staticMenuDesktopInactive = !this.state.staticMenuDesktopInactive;
+            this.state.staticMenuDesktopInactive =
-        }
+                !this.state.staticMenuDesktopInactive;
-        else {
+        } else {
-            this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
+            this.state.staticMenuMobileActive =
+                !this.state.staticMenuMobileActive;
 
             if (this.state.staticMenuMobileActive) {
                 this.overlayOpen.next(null);
@@ -100,20 +118,9 @@ export class LayoutService {
         this.configUpdate.next(this.config());
     }
 
-    constructor() {
-        effect(() => {
-            const config = this.config();
-            this.changeTheme();
-            this.changeScale(config.scale);
-            this.onConfigUpdate();
-        });
-    }
-
     changeTheme() {
         const config = this.config();
-        const themeLink = <HTMLLinkElement>(
+        const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
-            document.getElementById('theme-css')
-        );
         const themeLinkHref = themeLink.getAttribute('href')!;
         const newHref = themeLinkHref
             .split('/')
@@ -149,5 +156,4 @@ export class LayoutService {
     changeScale(value: number) {
         document.documentElement.style.fontSize = `${value}px`;
     }
-
 }