From da1a556eea7db004a033e49f98b58684afa05b4c Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Mon, 6 Mar 2023 15:43:22 +0800
Subject: [PATCH] add theme toggle functionality

---
 client/src/components/Navbar.tsx      |  7 +++--
 client/src/components/ThemeToggle.tsx | 39 +++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/ThemeToggle.tsx

diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 0375020..964b90a 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -1,5 +1,6 @@
-import { IconUser, IconSun, IconMoon } from "@tabler/icons-react";
+import { IconUser } from "@tabler/icons-react";
 import Link from "next/link";
+import ThemeToggle from "./ThemeToggle";
 
 export default function Navbar() {
   return (
@@ -37,9 +38,7 @@ export default function Navbar() {
         </div>
       </div>
       <div className="flex-none">
-        <div className="btn btn-ghost btn-circle">
-          <IconSun className="m-auto block h-full" />
-        </div>
+        <ThemeToggle />
         <label tabIndex={0} htmlFor="auth-modal" className="btn btn-ghost btn-circle avatar">
           <div className="w-10 rounded-full">
             <IconUser className="m-auto block h-full" />
diff --git a/client/src/components/ThemeToggle.tsx b/client/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..9b6700d
--- /dev/null
+++ b/client/src/components/ThemeToggle.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { IconSun, IconMoon } from "@tabler/icons-react";
+import { useState, useEffect } from "react";
+
+export default function ThemeToggle() {
+  const [darkTheme, setDarkTheme] = useState(false);
+
+  useEffect(() => {
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (e) => changeTheme(e.matches ? "dark" : "light"));
+
+    changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+  }, []);
+
+  function changeTheme(theme: "dark" | "light") {
+    if (theme === "dark") {
+      document.documentElement.setAttribute("data-theme", "chessuDark");
+      setDarkTheme(true);
+    } else {
+      document.documentElement.setAttribute("data-theme", "chessuLight");
+      setDarkTheme(false);
+    }
+  }
+  return (
+    <button
+      type="button"
+      onClick={() => changeTheme(darkTheme ? "light" : "dark")}
+      className="btn btn-ghost btn-circle"
+    >
+      {darkTheme ? (
+        <IconSun className="m-auto block h-full" />
+      ) : (
+        <IconMoon className="m-auto block h-full" />
+      )}
+    </button>
+  );
+}