feat(frontend): add persistent dark mode storage

Closes #52
ravenclaw900 · Nov 21, 2021 · 87b9366 · 87b9366
1 parent e13faf7
commit 87b9366
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/frontend/src/App.svelte b/src/frontend/src/App.svelte
@@ -85,14 +85,21 @@
     let shown = false;
     let menu = window.innerWidth > 768;
     let update = "";
-    let darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    let darkMode = false;
     let blur = false;
     let navPage = "";
     let token = "";
     let password = "";
     let login = false;
     let loginDialog = false;
 
+    // Get dark mode
+    if (localStorage.getItem("darkMode") != null) {
+        darkMode = JSON.parse(localStorage.getItem("darkMode"));
+    } else {
+        darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+
     const socketMessageListener = (e) => {
         if (typeof e.data === "string") {
             socketData = JSON.parse(e.data);
@@ -287,8 +294,10 @@
             {/if}
             <span
                 class="cursor-pointer justify-self-end mr-2"
-                on:click={() => (darkMode = !darkMode)}
-                ><Fa icon={darkMode ? faMoon : faSun} size="lg" /></span
+                on:click={() => (
+                    (darkMode = !darkMode),
+                    localStorage.setItem("darkMode", darkMode.toString())
+                )}><Fa icon={darkMode ? faMoon : faSun} size="lg" /></span
             >
         </header>
         <div