mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-04 14:22:09 +03:00
699329944e
This project is inspired by and originally forked from 9router by decolua (https://github.com/decolua/9router). Full rebrand: 9router → OmniRoute across all source code, configuration, Docker, documentation, and assets.
47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
"use client";
|
|
|
|
import { useTheme } from "@/shared/hooks/useTheme";
|
|
import { cn } from "@/shared/utils/cn";
|
|
|
|
export default function ThemeToggle({ className, variant = "default" }) {
|
|
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>
|
|
);
|
|
}
|