added switching themes

Author: shoudaos

src/app/layout/helper/helper.component.ts

@@ -1,15 +1,24 @@
 import {Component, HostBinding} from '@angular/core';
+import {HelperService} from './helper.service';
+import {DashboardThemes} from './helper.interface';
 
 @Component({
   selector: 'theme-helper',
   templateUrl: './helper.template.html',
   styleUrls: ['./helper.style.scss']
 })
 export class HelperComponent {
+  dashboardThemes = DashboardThemes;
   @HostBinding('class.theme-helper') themeHelperClass = true;
   @HostBinding('class.theme-helper-opened') isOpened = false;
 
+  constructor(private helperService: HelperService) {}
+
   toggle() {
     this.isOpened = !this.isOpened;
   }
+
+  changeTheme(theme: DashboardThemes) {
+    this.helperService.onThemeChange.emit(theme);
+  }
 }

src/app/layout/helper/helper.interface.ts

@@ -0,0 +1,4 @@
+export enum DashboardThemes {
+  LIGHT,
+  DARK
+}

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

@@ -0,0 +1,23 @@
+import {EventEmitter} from '@angular/core';
+import {DashboardThemes} from './helper.interface';
+
+export class HelperService {
+  dashboardThemes = DashboardThemes;
+  _dashboardTheme: DashboardThemes = this.dashboardThemes.DARK;
+  onThemeChange: EventEmitter<any> = new EventEmitter();
+
+  constructor() {
+    this.onThemeChange.subscribe((theme: DashboardThemes) => {
+      this.dashboardTheme = theme;
+    });
+  }
+
+  set dashboardTheme(theme: DashboardThemes) {
+    this._dashboardTheme = theme;
+  }
+
+  get dashboardTheme() {
+    return this._dashboardTheme;
+  }
+}
+

src/app/layout/helper/helper.template.html

@@ -10,14 +10,14 @@ <h6 class="mb-3">Theme</h6>
   </header>
   <div class="theme-switcher">
     <div class="theme mb-3">
-      <input [checked]="true" type="radio" id="css-light" value="option2" name="theme-variant" aria-label="Sing Light" readOnly/>
-      <label for="css-light">
+      <input [checked]="helperService.dashboardTheme === dashboardThemes.LIGHT" type="radio" id="css-light" value="option2" name="theme-variant" aria-label="Sing Light" readOnly/>
+      <label for="css-light" (click)="changeTheme(dashboardThemes.LIGHT)">
         <img class="theme-image" src="assets/img/theme-light.png" alt="light theme"/>
       </label>
     </div>
     <div class="theme">
-      <input [checked]="false" type="radio" id="css-dark" value="option1" name="theme-variant" aria-label="Single Dark" readOnly/>
-      <label for="css-dark">
+      <input [checked]="helperService.dashboardTheme === dashboardThemes.DARK" type="radio" id="css-dark" value="option1" name="theme-variant" aria-label="Single Dark" readOnly/>
+      <label for="css-dark" (click)="changeTheme(dashboardThemes.DARK)">
         <img class="theme-image" src="assets/img/theme-dark.png" alt="dark theme"/>
       </label>
     </div>

src/app/layout/layout.component.ts

@@ -1,19 +1,8 @@
-import {
-  Component,
-  ViewEncapsulation,
-  ElementRef, Renderer2,
-  NgZone,
-  ViewChild, HostBinding, OnInit
-} from '@angular/core';
-import {
-  Router,
-  Event as RouterEvent,
-  NavigationStart,
-  NavigationEnd,
-  NavigationCancel,
-  NavigationError
-} from '@angular/router';
-import { AppConfig } from '../app.config';
+import {Component, ElementRef, HostBinding, NgZone, OnInit, Renderer2, ViewChild, ViewEncapsulation} from '@angular/core';
+import {Event as RouterEvent, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';
+import {AppConfig} from '../app.config';
+import {DashboardThemes} from './helper/helper.interface';
+import {HelperService} from './helper/helper.service';
 
 declare let jQuery: any;
 declare let Hammer: any;
@@ -28,6 +17,14 @@ export class LayoutComponent implements OnInit {
   @HostBinding('class.nav-static') navStatic: boolean;
   @HostBinding('class.chat-sidebar-opened') chatOpened: boolean = false;
   @HostBinding('class.app') appClass: boolean = true;
+  @HostBinding('class.sing-dashboard') singDashboardClass: boolean = true;
+  @HostBinding('class.dashboard-light') get dashboardLight() {
+    return this.helperService.dashboardTheme === DashboardThemes.LIGHT;
+  }
+  @HostBinding('class.dashboard-dark') get dashboardDark() {
+    return this.helperService.dashboardTheme === DashboardThemes.DARK;
+  }
+
   config: any;
   configFn: any;
   $sidebar: any;
@@ -40,7 +37,9 @@ export class LayoutComponent implements OnInit {
               el: ElementRef,
               router: Router,
               private renderer: Renderer2,
-              private ngZone: NgZone) {
+              private ngZone: NgZone,
+              private helperService: HelperService
+  ) {
     Raphael.prototype.safari = function(): any { return; };
     this.el = el;
     this.config = config.getConfig();

src/app/layout/layout.module.ts

@@ -19,6 +19,7 @@ import { NotificationsComponent } from './notifications/notifications.component'
 import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
 import {HelperComponent} from './helper/helper.component';
 import {NewWidgetModule} from './new-widget/widget.module';
+import {HelperService} from './helper/helper.service';
 
 @NgModule({
   imports: [
@@ -40,6 +41,9 @@ import {NewWidgetModule} from './new-widget/widget.module';
     NotificationsLoadDirective,
     ChatMessageComponent,
     HelperComponent
+  ],
+  providers: [
+    HelperService
   ]
 })
 export class LayoutModule {