32 lines
955 B
TypeScript
32 lines
955 B
TypeScript
"use client";
|
|
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
|
|
|
export default function ThemeToggle() {
|
|
const { theme, toggleTheme } = useTheme();
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="px-3 py-1 border rounded text-xs uppercase tracking-widest transition"
|
|
style={{
|
|
borderColor: "var(--border)",
|
|
backgroundColor: "var(--card)",
|
|
color: "var(--foreground)",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = "var(--accent-color)";
|
|
e.currentTarget.style.backgroundColor =
|
|
"color-mix(in srgb, var(--accent-color) 10%, transparent)";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = "var(--border)";
|
|
e.currentTarget.style.backgroundColor = "var(--card)";
|
|
}}
|
|
aria-label="Toggle theme"
|
|
>
|
|
{theme === "dark" ? "🌙" : "💎"} {theme === "dark" ? "Gold" : "Cyan"}
|
|
</button>
|
|
);
|
|
}
|