finish styling basket and list; add persistent theme via localStorage. -ak

1 files changed, 16 insertions, 1 deletions

diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 635061c..2fecc2d 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -38,6 +38,15 @@ export class AppComponent implements OnInit {
             this.authService.restoreLogin(dataParsed.username, dataParsed.key)
             console.log("Key found", dataParsed.key)
         }
+
+        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() {
@@ -50,8 +59,14 @@ export class AppComponent implements OnInit {
     }
 
     toggleColorScheme() {
-        let newTheme = this.document.body.parentElement!.getAttribute("theme") == "light" ? "dark" : "light";
+        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);
     }