MythEclipse/mcpedia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): support full dynamic Light Mode and Dark Mode with CSS variables and storage sync

Browse Source
This commit is contained in:
asepharyana
2026-08-21 11:13:05 +07:00
parent 62116be88d
commit aedfb022f3
16 changed files with 464 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/components/ThemeToggle.tsx
+36 -10
View File
@@ -4,33 +4,59 @@ import { useEffect, useState } from "react";
const STORAGE_KEY = "mcpedia-theme";
/** Dark mode toggle — persisted in localStorage, defaults to system preference. */
export default function ThemeToggle() {
const [dark, setDark] = useState(false);
const [mounted, setMounted] = useState(false);
const [isDark, setIsDark] = useState(true);
useEffect(() => {
setMounted(true);
const stored = localStorage.getItem(STORAGE_KEY);
const initial =
const darkActive =
stored === "dark" ||
(stored === null &&
window.matchMedia("(prefers-color-scheme: dark)").matches);
setDark(initial);
setIsDark(darkActive);
if (darkActive) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}, []);
function toggle() {
const next = !dark;
setDark(next);
const next = !isDark;
setIsDark(next);
localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
document.documentElement.classList.toggle("dark", next);
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}
aria-label="Toggle dark mode"
className="text-[#d0d6e0] hover:text-[#f7f8f8] p-1 rounded transition-colors"
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"
>
{dark ? "☀️" : "🌙"}
{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>
);
}