63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
const STORAGE_KEY = "mcpedia-theme";
|
|
|
|
export default function ThemeToggle() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [isDark, setIsDark] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const stored = localStorage.getItem(STORAGE_KEY);
|
|
const darkActive =
|
|
stored === "dark" ||
|
|
(stored === null &&
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
setIsDark(darkActive);
|
|
if (darkActive) {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}, []);
|
|
|
|
function toggle() {
|
|
const next = !isDark;
|
|
setIsDark(next);
|
|
localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
|
|
if (next) {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<div className="w-8 h-8 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-color)] opacity-50" />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={toggle}
|
|
type="button"
|
|
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
|
title={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
|
className="p-1.5 rounded-lg text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)] border border-transparent hover:border-[var(--border-color)] transition-all flex items-center justify-center"
|
|
>
|
|
{isDark ? (
|
|
<svg className="w-4 h-4 text-amber-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|