From 6d2263432ae3bfacee5a2ba526d7e85880e3ceed Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Sun, 9 Apr 2023 14:03:04 +0800
Subject: [PATCH] save theme preference to localStorage

---
 client/src/app/layout.tsx             | 13 +++++++++++
 client/src/components/ThemeToggle.tsx | 33 ++++++++++++++-------------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 419dd85..adfb9bf 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -48,6 +48,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </ContextProvider>
 
         <Footer />
+
+        {/* not using <Script> from next/script since it executes too late */}
+        <script
+          defer
+          id="load-theme"
+          dangerouslySetInnerHTML={{
+            __html: `if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+              document.documentElement.setAttribute("data-theme", "chessuDark");
+          } else {
+              document.documentElement.setAttribute("data-theme", "chessuLight");
+          }`
+          }}
+        ></script>
       </body>
     </html>
   );
diff --git a/client/src/components/ThemeToggle.tsx b/client/src/components/ThemeToggle.tsx
index 4bfea62..497b97a 100644
--- a/client/src/components/ThemeToggle.tsx
+++ b/client/src/components/ThemeToggle.tsx
@@ -7,31 +7,32 @@ export default function ThemeToggle() {
   const [darkTheme, setDarkTheme] = useState(false);
 
   useEffect(() => {
-    const onChange = (e: MediaQueryListEvent) => changeTheme(e.matches ? "dark" : "light");
-
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", onChange);
-
-    changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-
-    return () => {
-      window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", onChange);
-    };
-  }, []);
-
-  function changeTheme(theme: "dark" | "light") {
-    if (theme === "dark") {
-      document.documentElement.setAttribute("data-theme", "chessuDark");
+    if (document.documentElement.getAttribute("data-theme") === "chessuDark") {
       setDarkTheme(true);
     } else {
-      document.documentElement.setAttribute("data-theme", "chessuLight");
       setDarkTheme(false);
     }
+  }, []);
+
+  function toggleTheme() {
+    if (
+      document.documentElement.getAttribute("data-theme") === "chessuDark" ||
+      (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.setAttribute("data-theme", "chessuLight");
+      localStorage.theme = "light";
+      setDarkTheme(false);
+    } else {
+      document.documentElement.setAttribute("data-theme", "chessuDark");
+      localStorage.theme = "dark";
+      setDarkTheme(true);
+    }
   }
   return (
     <button
       type="button"
       aria-label="Toggle theme"
-      onClick={() => changeTheme(darkTheme ? "light" : "dark")}
+      onClick={toggleTheme}
       className={"btn btn-ghost btn-circle swap swap-rotate" + (darkTheme ? " swap-active" : "")}
     >
       <IconSun className="swap-on m-auto block h-full" />