From 7bf0984698e43b9aa2dd879f65951318ed410390 Mon Sep 17 00:00:00 2001
From: Maze <167211895+mazeincoding@users.noreply.github.com>
Date: Sat, 31 Jan 2026 00:20:04 +0100
Subject: codebase overhaul (#697)

---
 apps/web/src/components/theme-toggle.tsx | 41 ++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 15 deletions(-)

(limited to 'apps/web/src/components/theme-toggle.tsx')

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c..394d75b2 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,25 +1,36 @@
 "use client";
 
 import { Button } from "./ui/button";
-import { Sun, Moon } from "lucide-react";
 import { useTheme } from "next-themes";
+import { cn } from "@/utils/ui";
+import { Sun03Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
 
 interface ThemeToggleProps {
-  className?: string;
+	className?: string;
+	iconClassName?: string;
+	onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-export function ThemeToggle({ className }: ThemeToggleProps) {
-  const { theme, setTheme } = useTheme();
+export function ThemeToggle({
+	className,
+	iconClassName,
+	onToggle,
+}: 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>
-  );
+	return (
+		<Button
+			size="icon"
+			variant="text"
+			className={cn("h-7", className)}
+			onClick={(e) => {
+				setTheme(theme === "dark" ? "light" : "dark");
+				onToggle?.(e);
+			}}
+		>
+			<HugeiconsIcon icon={Sun03Icon} className={cn("!size-[1.1rem]", iconClassName)} />
+			<span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+		</Button>
+	);
 }
-- 
cgit v1.3.1