41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
const STORAGE_KEY = "mcpedia-theme";
|
||
|
|
|
||
|
|
/** Dark mode toggle. Defaults to system preference, persisted in localStorage. */
|
||
|
|
export default function ThemeToggle() {
|
||
|
|
const [dark, setDark] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const stored = localStorage.getItem(STORAGE_KEY);
|
||
|
|
const initial =
|
||
|
|
stored === "dark" ||
|
||
|
|
(stored === null &&
|
||
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches);
|
||
|
|
setDark(initial);
|
||
|
|
apply(initial);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
function apply(isDark: boolean) {
|
||
|
|
document.documentElement.classList.toggle("dark", isDark);
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggle() {
|
||
|
|
const next = !dark;
|
||
|
|
setDark(next);
|
||
|
|
localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
|
||
|
|
apply(next);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={toggle}
|
||
|
|
aria-label="Toggle dark mode"
|
||
|
|
className="text-sm border border-zinc-300 dark:border-zinc-700 rounded px-2 py-1 hover:bg-zinc-100 dark:hover:bg-zinc-800"
|
||
|
|
>
|
||
|
|
{dark ? "🌙" : "☀️"}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|