38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Moon, Sun } from "lucide-react";
|
|
|
|
import { useTheme } from "@/components/providers/ThemeProvider";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
|
|
export function ThemeToggle() {
|
|
const { theme, toggleTheme } = useTheme();
|
|
const isDark = theme === "dark";
|
|
const label = isDark ? "Switch to light mode" : "Switch to dark mode";
|
|
const Icon = isDark ? Sun : Moon;
|
|
|
|
return (
|
|
<TooltipProvider delayDuration={200}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
aria-label={label}
|
|
aria-pressed={isDark}
|
|
className="inline-flex h-9 w-9 items-center justify-center rounded-[10px] border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text-muted)] shadow-sm transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface-muted)] hover:text-[color:var(--text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--surface)]"
|
|
onClick={toggleTheme}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{label}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|