52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Sun, Moon } from "lucide-react";
|
|
|
|
type Theme = "light" | "dark";
|
|
|
|
export default function ThemeToggle() {
|
|
const [theme, setTheme] = useState<Theme>("dark");
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const stored = (localStorage.getItem("theme") as Theme | null) ?? "dark";
|
|
setTheme(stored);
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) return null; // prevents hydration mismatch
|
|
|
|
function toggle() {
|
|
const next: Theme = theme === "dark" ? "light" : "dark";
|
|
setTheme(next);
|
|
localStorage.setItem("theme", next);
|
|
document.documentElement.classList.toggle("dark", next === "dark");
|
|
}
|
|
|
|
/**
|
|
* @TODO, the toggle doesn't look right, need to either fix or remove the toggle.
|
|
*/
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
aria-label="Toggle theme" title={`Toggle to ${theme === 'dark' ? 'light' : 'dark'}`}
|
|
className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-1.5 text-xs font-semibold text-zinc-200 hover:bg-zinc-800 transition-colors
|
|
dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-200
|
|
border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800"
|
|
>
|
|
{theme === "dark" ? (
|
|
<>
|
|
<Sun className="h-4 w-4" />
|
|
Light
|
|
</>
|
|
) : (
|
|
<>
|
|
<Moon className="h-4 w-4" />
|
|
Dark
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
} |