43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* Light/dark toggle. The actual class lives on <html> (so `.app.dark` selectors
|
|
* and the dark CSS-var block apply); we mirror localStorage so the choice
|
|
* survives reloads. The inline boot script in the root layout applies the saved
|
|
* theme before paint to avoid a flash — this component only reflects/toggles it.
|
|
*/
|
|
export function ThemeSwitcher() {
|
|
const [dark, setDark] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setDark(document.documentElement.classList.contains("dark"));
|
|
}, []);
|
|
|
|
function toggle() {
|
|
const next = !dark;
|
|
setDark(next);
|
|
document.documentElement.classList.toggle("dark", next);
|
|
try {
|
|
localStorage.setItem("theme", next ? "dark" : "light");
|
|
} catch {
|
|
/* private mode / storage disabled — runtime toggle still works */
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggle}
|
|
className="nav-item cursor-pointer text-lg leading-none px-2"
|
|
aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
|
|
title={dark ? "Light mode" : "Dark mode"}
|
|
>
|
|
<span aria-hidden className="text-lg leading-none">
|
|
{dark ? "☀" : "☾"}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|