Pass around setDarkColorMode as a bool and store in local storage

Author: salmacodecomputerlove

apps/fretonator-web/src/app/app.component.html

@@ -1,6 +1,6 @@
 <div class="app__wrapper"
      [attr.color-mode]="colorMode">
-  <app-header (toggleColorMode)="toggleColorMode()"></app-header>
+  <app-header (setDarkColorMode)="setDarkColorMode($event)"></app-header>
   <main #globalScrollTarget role="main">
     <router-outlet></router-outlet>
   </main>

apps/fretonator-web/src/app/app.component.ts

@@ -22,11 +22,11 @@ export class AppComponent implements AfterViewInit {
     this.globalService.setGlobalScrollTarget(this.globalScrollTarget.nativeElement);
   }
 
-  toggleColorMode() {
-    if (this.colorMode === ColorModes.dark) {
-      this.colorMode = ColorModes.light;
-    } else {
+  setDarkColorMode(dark: Boolean) {
+    if (dark) {
       this.colorMode = ColorModes.dark;
+    } else {
+      this.colorMode = ColorModes.light;
     }
   }
 }

apps/fretonator-web/src/app/common/header/header.component.ts

@@ -1,20 +1,38 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { ColorModes } from '../../app.component';
+import { AbstractDataService } from '../abstract-data/abstract-data.service';
+
+const StorageKeys = {
+  darkColorMode: 'fretonator_darkColorMode',
+}
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent implements OnInit {
-  @Output() toggleColorMode = new EventEmitter<any>();
+  @Output() setDarkColorMode = new EventEmitter<any>();
   isMenuVisible = false;
   darkColorMode = true;
 
-  constructor() {
+  constructor(private localStorage: AbstractDataService) {
   }
 
   ngOnInit(): void {
+    const _darkColorMode = this.localStorage.getItem(StorageKeys.darkColorMode);
+    switch (_darkColorMode) {
+      case false:
+        this.darkColorMode = false;
+        break;
+      case true:
+        this.darkColorMode = true;
+        break;
+      default:
+        this.darkColorMode = true;
+    }
+
+    this.setDarkColorMode.emit(this.darkColorMode);
   }
 
   toggleMenu() {
@@ -23,6 +41,7 @@ export class HeaderComponent implements OnInit {
 
   toggleTheme() {
     this.darkColorMode = !this.darkColorMode;
-    this.toggleColorMode.emit();
+    this.setDarkColorMode.emit(this.darkColorMode);
+    this.localStorage.setItem(StorageKeys.darkColorMode, this.darkColorMode);
   }
 }