From ddc1c036b6e782a66a4830294cf4dcf34c8836b8 Mon Sep 17 00:00:00 2001
From: grimsi <9295182+grimsi@users.noreply.github.com>
Date: Fri, 5 Aug 2022 23:00:48 +0200
Subject: [PATCH] Implemented dark mode

---
 .../components/header/header.component.html   | 12 ++--
 .../app/components/header/header.component.ts | 64 ++++++++++++++++++-
 2 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html
index a8c333f..b10827e 100644
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@@ -1,19 +1,23 @@
 <mat-toolbar style="position: sticky; top: 0; z-index: 99999">
-  <button mat-icon-button (click)="goToLibraryScreen()" *ngIf="!onLibraryScreen()">
+  <button mat-icon-button matTooltip="Home" (click)="goToLibraryScreen()" *ngIf="!onLibraryScreen()">
     <mat-icon>home</mat-icon>
   </button>
 
   <span class="spacer"></span>
 
-  <button mat-icon-button (click)="reloadLibrary()" *ngIf="onLibraryScreen()">
+  <button mat-icon-button matTooltip="Toggle dark mode" (click)="toggleTheme()">
+    <mat-icon>brightness_medium</mat-icon>
+  </button>
+
+  <button mat-icon-button matTooltip="Reload library" (click)="reloadLibrary()" *ngIf="onLibraryScreen()">
     <mat-icon>refresh</mat-icon>
   </button>
 
-  <button mat-icon-button (click)="scanLibrary()" *ngIf="onLibraryManagementScreen()">
+  <button mat-icon-button matTooltip="Scan library" (click)="scanLibrary()" *ngIf="onLibraryManagementScreen()">
     <mat-icon>youtube_searched_for</mat-icon>
   </button>
 
-  <button mat-icon-button (click)="goToLibraryManagementScreen()" *ngIf="!onLibraryManagementScreen()">
+  <button mat-icon-button matTooltip="Library management" (click)="goToLibraryManagementScreen()" *ngIf="!onLibraryManagementScreen()">
     <mat-icon>settings</mat-icon>
   </button>
 </mat-toolbar>
diff --git a/frontend/src/app/components/header/header.component.ts b/frontend/src/app/components/header/header.component.ts
index 1616fcb..d084105 100644
--- a/frontend/src/app/components/header/header.component.ts
+++ b/frontend/src/app/components/header/header.component.ts
@@ -2,10 +2,8 @@ import {Component} from '@angular/core';
 import {LibraryService} from "../../services/library.service";
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {timeInterval} from "rxjs";
-import {ActivatedRoute, Router} from "@angular/router";
+import {Router} from "@angular/router";
 import {GamesService} from "../../services/games.service";
-import {LibraryManagementComponent} from "../library-management/library-management.component";
-import {LibraryOverviewComponent} from "../library-overview/library-overview.component";
 
 @Component({
   selector: 'app-header',
@@ -14,10 +12,43 @@ import {LibraryOverviewComponent} from "../library-overview/library-overview.com
 })
 export class HeaderComponent {
 
+  darkmodeEnabled: boolean;
+
   constructor(private libraryService: LibraryService,
               private gameService: GamesService,
               private snackBar: MatSnackBar,
               private router: Router) {
+
+    if(this.getCookie("darkmode") !== null) {
+      this.darkmodeEnabled = this.getCookie("darkmode") === "true";
+    } else
+      if (window.matchMedia) {
+      this.darkmodeEnabled = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } else {
+      this.darkmodeEnabled = false;
+    }
+
+    this.setTheme();
+  }
+
+  toggleTheme(): void {
+    this.darkmodeEnabled = !this.darkmodeEnabled;
+    this.setTheme();
+  }
+
+  private setTheme(): void {
+    this.darkmodeEnabled ? this.setDarkmode() : this.setLightmode();
+    this.setCookie("darkmode", this.darkmodeEnabled);
+  }
+
+  private setDarkmode(): void {
+    document.body.style.background = "#303030";
+    document.body.style.color = "white";
+  }
+
+  private setLightmode(): void {
+    document.body.style.background = "white";
+    document.body.style.color = "black";
   }
 
   scanLibrary(): void {
@@ -48,4 +79,31 @@ export class HeaderComponent {
     return this.router.url === "/library-management";
   }
 
+  private setCookie(name: string, value: any): void {
+    let d:Date = new Date();
+    document.cookie = `${name}=${value.toString()};`;
+  }
+
+  private getCookie(name: string): string | null {
+    var dc = document.cookie;
+    var prefix = name + "=";
+    var begin = dc.indexOf("; " + prefix);
+    if (begin == -1) {
+      begin = dc.indexOf(prefix);
+      if (begin != 0) return null;
+    }
+    else
+    {
+      begin += 2;
+      var end = document.cookie.indexOf(";", begin);
+      if (end == -1) {
+        end = dc.length;
+      }
+    }
+    // because unescape has been deprecated, replaced with decodeURI
+    //return unescape(dc.substring(begin + prefix.length, end));
+    // @ts-ignore
+    return decodeURI(dc.substring(begin + prefix.length, end));
+  }
+
 }