Spaces:
Paused
Paused
File size: 1,337 Bytes
35743bd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | "use client";
import { useTheme } from "@/shared/hooks/useTheme";
import { cn } from "@/shared/utils/cn";
export default function ThemeToggle({
className,
variant = "default",
}: {
className?: any;
variant?: string;
}) {
const { theme, toggleTheme, isDark } = useTheme();
const variants = {
default: cn(
"flex items-center justify-center size-10 rounded-full",
"text-text-muted",
"hover:bg-black/5",
"hover:text-text-main",
"transition-colors"
),
card: cn(
"flex items-center justify-center size-11 rounded-full",
"bg-surface/60",
"hover:bg-surface",
"border border-border",
"backdrop-blur-md shadow-sm hover:shadow-md",
"text-text-muted-light hover:text-primary",
"hover:text-primary",
"transition-all group"
),
};
return (
<button
onClick={toggleTheme}
className={cn(variants[variant], className)}
aria-label={`Switch to ${isDark ? "light" : "dark"} mode`}
title={`Switch to ${isDark ? "light" : "dark"} mode`}
>
<span
className={cn(
"material-symbols-outlined text-[22px]",
variant === "card" && "transition-transform duration-300 group-hover:rotate-12"
)}
>
{isDark ? "light_mode" : "dark_mode"}
</span>
</button>
);
}
|