add theme toggle functionality

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" />

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>
+  );
+}