98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
type Theme = "light" | "dark";
|
|
|
|
function getPreferredTheme(): Theme {
|
|
if (typeof window === "undefined") return "light";
|
|
const stored = localStorage.getItem("theme");
|
|
if (stored === "light" || stored === "dark") return stored;
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
}
|
|
|
|
function applyTheme(theme: Theme) {
|
|
document.documentElement.classList.toggle("dark", theme === "dark");
|
|
localStorage.setItem("theme", theme);
|
|
}
|
|
|
|
export function ThemeToggle() {
|
|
const [theme, setTheme] = useState<Theme>("light");
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setTheme(getPreferredTheme());
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
function toggle() {
|
|
const next: Theme = theme === "dark" ? "light" : "dark";
|
|
setTheme(next);
|
|
applyTheme(next);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
|
|
className="theme-toggle group relative flex h-10 w-10 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface)]/80 text-[var(--foreground)] shadow-sm backdrop-blur-md transition-all hover:border-[var(--accent)]/40 hover:shadow-[var(--glow-sm)]"
|
|
>
|
|
<span className="sr-only">
|
|
{mounted
|
|
? theme === "dark"
|
|
? "Light mode"
|
|
: "Dark mode"
|
|
: "Toggle theme"}
|
|
</span>
|
|
<SunIcon
|
|
className={`absolute h-[18px] w-[18px] transition-all duration-300 ${
|
|
mounted && theme === "dark"
|
|
? "rotate-0 scale-100 opacity-100"
|
|
: "rotate-90 scale-0 opacity-0"
|
|
}`}
|
|
/>
|
|
<MoonIcon
|
|
className={`absolute h-[18px] w-[18px] transition-all duration-300 ${
|
|
mounted && theme !== "dark"
|
|
? "rotate-0 scale-100 opacity-100"
|
|
: "-rotate-90 scale-0 opacity-0"
|
|
}`}
|
|
/>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function SunIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.75"
|
|
aria-hidden
|
|
>
|
|
<circle cx="12" cy="12" r="4" />
|
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function MoonIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
className={className}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.75"
|
|
aria-hidden
|
|
>
|
|
<path d="M21 14.5A8.5 8.5 0 0 1 9.5 3 7 7 0 1 0 21 14.5z" />
|
|
</svg>
|
|
);
|
|
}
|