persist color scheme preference in session storage

alpancs · Oct 4, 2024 · 17681dd · 17681dd
1 parent f3defaa
commit 17681dd
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/web-app/public/scripts/quranize-header.js b/web-app/public/scripts/quranize-header.js
@@ -1,19 +1,20 @@
 import { createApp } from "./vue.esm-browser.js";
 
-const DarkModeQuery = matchMedia("(prefers-color-scheme: dark)");
-
 createApp({
     data: () => ({ darkMode: undefined }),
     methods: {
         toggleTheme() {
-            this.setTheme(this.darkMode ^ true);
+            this.setDataTheme(this.darkMode ? "light" : "dark");
         },
-        setTheme(darkMode) {
-            this.darkMode = darkMode;
-            document.documentElement.setAttribute("data-theme", darkMode ? "dark" : "light");
+        setDataTheme(dataTheme) {
+            document.documentElement.setAttribute("data-theme", dataTheme);
+            this.darkMode = dataTheme === "dark";
+            sessionStorage.dataTheme = dataTheme;
         },
     },
     mounted() {
-        this.setTheme(DarkModeQuery.matches);
+        const dataTheme = sessionStorage.dataTheme ||
+            (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        this.setDataTheme(dataTheme);
     },
 }).mount("#quranize-header");