From 5d2ee6cc13364d1b9a8e10db3997cc0f389ec6b1 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Wed, 7 Jan 2026 12:32:16 +0000
Subject: [PATCH] theme toggle

---
 bun.lock                        |  4 ++--
 package.json                    |  2 +-
 src/Index.tsx                   |  5 ++++-
 src/components/theme-toggle.tsx | 35 +++++++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 src/components/theme-toggle.tsx

diff --git a/bun.lock b/bun.lock
index 84f898d..538d356 100644
--- a/bun.lock
+++ b/bun.lock
@@ -9,7 +9,7 @@
         "@tailwindcss/vite": "^4.1.18",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "lucide-react": "^0.561.0",
+        "lucide-react": "^0.562.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.10.1",
@@ -321,7 +321,7 @@
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
-    "lucide-react": ["lucide-react@0.561.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Y59gMY38tl4/i0qewcqohPdEbieBy7SovpBL9IFebhc2mDd8x4PZSOsiFRkpPcOq6bj1r/mjH/Rk73gSlIJP2A=="],
+    "lucide-react": ["lucide-react@0.562.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw=="],
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
diff --git a/package.json b/package.json
index 1a8e99a..3ce98b3 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
         "@tailwindcss/vite": "^4.1.18",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "lucide-react": "^0.561.0",
+        "lucide-react": "^0.562.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.10.1",
diff --git a/src/Index.tsx b/src/Index.tsx
index 429f013..8dd2bf7 100644
--- a/src/Index.tsx
+++ b/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" />
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..42f513e
--- /dev/null
+++ b/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;