Merge pull request #107 from Moros1138/fix-light-mode-persistence

Fix light mode persistence
Moros1138 · Jun 25, 2024 · 4feaf35 · 4feaf35
2 parents 799ba4b + dd9bbc3
commit 4feaf35
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,12 @@ All notable changes to this project will be documented in this file. Each batch
 
 It is a summary of changes that would be pertinent to the end user of the PGEtinker website. For a comprehensive history of changes made to the project, please refer to the repository's commit history.
 
+## 2024-06-25
+
+- Fixed light theme persistence
+
 ## 2024-06-19
+
 - Fixed [Issue #105](https://github.com/Moros1138/PGEtinker/issues/105)
 - Fixed other dialog styles for the portrait layout
 

diff --git a/resources/js/app.ts b/resources/js/app.ts
@@ -76,10 +76,6 @@ class PGEtinker
             }
         }
 
-        this.theme = window.localStorage.getItem("pgetinkerTheme");
-        if(this.theme !== "dark" && this.theme !== "light")
-            this.theme = "dark";
-
         document.querySelector("#settings-menu")?.addEventListener("click", (event) =>
         {
             event.preventDefault();
@@ -460,10 +456,8 @@ class PGEtinker
 
     async UpdateTheme()
     {
-        // save theme into localStorage
-        setStorageValue("theme", this.theme);
-
-        let light = (this.theme === "light");
+        const theme = getStorageValue("theme");
+        let light = (theme === "light");
 
         // update editor theme
         await this.editorPanel.updateConfiguration();
@@ -481,7 +475,7 @@ class PGEtinker
             goldenLayoutLightThemeStyle.disabled = !light;
 
             // update player theme
-            this.playerPanel.setTheme(this.theme);
+            this.playerPanel.setTheme(theme);
         }, 200);
 
     }

diff --git a/resources/js/lib/settingsDialog.js b/resources/js/lib/settingsDialog.js
@@ -154,10 +154,12 @@ export default function settingsDialog(state)
                     state.theme = "light";
 
                 createToast(`Changing theme: ${state.theme}`, ToastType.Info);
+                setStorageValue("theme", state.theme);
+
                 state.UpdateTheme();
             },
             ["dark", "light"],
-            state.theme
+            getStorageValue("theme")
         ));
 
 

diff --git a/resources/js/lib/storage.ts b/resources/js/lib/storage.ts
@@ -17,11 +17,18 @@ export function conformStorage(): void
         setStorageValue("code", JSON.parse(code));
     }
 
-    let theme = store.getItem("pgetinkerTheme");
-    store.removeItem("pgetinkerTheme");
-    if(theme)
+    if(getStorageValue("theme") == null)
     {
-        setStorageValue("theme", theme);
+        let theme = store.getItem("pgetinkerTheme");
+        store.removeItem("pgetinkerTheme");
+        if(theme)
+        {
+            setStorageValue("theme", theme);
+        }
+        else
+        {
+            setStorageValue("theme", "dark");
+        }
     }
 
     if(getStorageValue("diagnostics.javidMode") == null)