From 17681dd9545e48cdd576e901a8b42574556bf020 Mon Sep 17 00:00:00 2001
From: Alfan Nur Fauzan <alpancs@gmail.com>
Date: Fri, 4 Oct 2024 23:28:14 +0700
Subject: [PATCH] persist color scheme preference in session storage

---
 web-app/public/scripts/quranize-header.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/web-app/public/scripts/quranize-header.js b/web-app/public/scripts/quranize-header.js
index bb2aa54..3602a02 100644
--- 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");