feat: switching theme across entire site

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>

+  );

+}