28 lines
1.2 KiB
TypeScript
28 lines
1.2 KiB
TypeScript
/** Theme click handled by /public/theme.js — works without React hydration */
|
|
export function ThemeToggle() {
|
|
return (
|
|
<button
|
|
type="button"
|
|
data-theme-toggle
|
|
aria-pressed="false"
|
|
aria-label="Switch to dark mode"
|
|
title="Dark mode"
|
|
className="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-full border-2 border-[var(--border-strong)] bg-[var(--surface)] px-3 text-[var(--foreground)] shadow-sm transition-[background-color,border-color,color] duration-200 hover:border-[var(--accent)]"
|
|
>
|
|
<span data-theme-icon="sun" hidden aria-hidden>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm0-16v2m0 16v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M2 12h2m16 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
|
|
</svg>
|
|
</span>
|
|
<span data-theme-icon="moon" aria-hidden>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M21 14.5A8.5 8.5 0 0 1 9.5 3 7 7 0 1 0 21 14.5z" />
|
|
</svg>
|
|
</span>
|
|
<span data-theme-label className="text-xs font-bold tracking-wide">
|
|
Dark
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|