theme toggle

src/Index.tsx

@@ -1,8 +1,11 @@
+import ThemeToggle from "./components/theme-toggle";
+
 function Index() {
     return (
         <div className="flex flex-col h-[100vh] items-center">
-            <header className="w-full flex items-center justify-center border-b h-12">
+            <header className="w-full flex items-center justify-between border-b h-12 p-2">
                 <h1 className="text-3xl font-bold">The Shape of Sound</h1>
+                <ThemeToggle />
             </header>
             <main className="w-full flex-1 p-4 flex items-center justify-center">
                 <div className="w-64 h-64 bg-orange-600 rounded-full" />

src/components/theme-toggle.tsx

@@ -0,0 +1,35 @@
+import { Moon, Sun } from "lucide-react";
+import { useEffect, useState } from "react";
+
+function ThemeToggle() {
+    const [theme, setTheme] = useState<string | null>();
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem("theme");
+        if (savedTheme) {
+            setTheme(savedTheme);
+        }
+    }, []);
+
+    function updateTheme(newTheme: string) {
+        setTheme(newTheme);
+        localStorage.setItem("theme", newTheme);
+
+        document.documentElement.classList.toggle("dark");
+    }
+
+    return (
+        <button
+            type="button"
+            className="rounded cursor-pointer"
+            onClick={() => {
+                if (!theme || theme === "light") updateTheme("dark");
+                else updateTheme("light");
+            }}
+        >
+            {theme === "dark" ? <Sun /> : <Moon />}
+        </button>
+    );
+}
+
+export default ThemeToggle;