1 files changed, 25 insertions, 0 deletions
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
new file mode 100644
index 00000000..8302a19c
--- /dev/null
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Button } from "./ui/button";
+import { Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      size="icon"
+      variant="text"
+      className="h-7"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+    >
+      <Sun className="!size-[1.1rem]" />
+      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+    </Button>
+  );
+}