Merge pull request #31 from RIT-SWEN-261-02/light-mode

Light mode

1 files changed, 30 insertions, 3 deletions

diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 615397f..fafffef 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,10 +1,10 @@
 import {Component, OnInit, Inject, ViewContainerRef} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
-import { DOCUMENT } from '@angular/common';
+import {DOCUMENT, Location} from '@angular/common';
 import {AuthService} from './services/auth.service';
 import {ToastsService} from './services/toasts.service';
 import {User, userType} from './models/User';
-import {ActivatedRoute, Router} from '@angular/router';
+import {Router} from '@angular/router';
 import {ModalService} from './services/modal.service';
 
 @Component({
@@ -20,10 +20,10 @@ export class AppComponent implements OnInit {
     constructor(
         private authService: AuthService,
         private router: Router,
-        private route: ActivatedRoute,
         protected toastService: ToastsService,
         private viewContainerRef: ViewContainerRef,
         protected modalService: ModalService,
+        protected location: Location,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
@@ -40,6 +40,21 @@ export class AppComponent implements OnInit {
             this.authService.restoreLogin(dataParsed.username, dataParsed.key)
             console.log("Key found", dataParsed.key)
         }
+
+        if (this.location.path() == '/cupboard') {
+            console.log("work")
+        } else {
+            console.log(this.location.path())
+        }
+
+        let theme = localStorage.getItem("theme")
+        if(!theme) {
+            // if no color scheme is set, get the system settings
+            let preferredTheme = this.document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";
+            localStorage.setItem("theme",preferredTheme);
+            theme = preferredTheme;
+        }
+        this.document.body.parentElement!.setAttribute("theme",theme);
     }
 
     login() {
@@ -51,5 +66,17 @@ export class AppComponent implements OnInit {
         location.reload()
     }
 
+    toggleColorScheme() {
+        let theme = localStorage.getItem("theme");
+        // fallback
+        if (!theme) {
+            theme = "light";
+        }
+        let newTheme = theme == "light" ? "dark" : "light";
+        this.document.body.parentElement!.setAttribute("theme",newTheme);
+        localStorage.setItem("theme", newTheme);
+        console.log(newTheme, this.document.body.parentElement);
+    }
+
     protected readonly userType = userType;
 }