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/Header.tsx
+16 -16
View File
@@ -12,7 +12,7 @@ export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="sticky top-0 z-30 border-b border-[#1f2022] glass-nav">
<header className="sticky top-0 z-30 border-b border-[var(--border-color)] glass-nav">
<div className="mx-auto max-w-7xl px-4 sm:px-6 h-14 flex items-center justify-between gap-4">
{/* Brand */}
<div className="flex items-center gap-3">
@@ -20,11 +20,11 @@ export default function Header() {
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-[#5e6ad2] to-[#7170ff] flex items-center justify-center text-white font-bold text-xs shadow-md shadow-[#5e6ad2]/20 group-hover:scale-105 transition-transform">
M
</div>
<span className="font-semibold text-[#f7f8f8] text-base tracking-tight group-hover:text-white transition-colors">
<span className="font-semibold text-[var(--text-primary)] text-base tracking-tight transition-colors">
MCPedia
</span>
</Link>
<span className="hidden sm:inline-block text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-[#141517] border border-[#23252a] text-[#8a8f98]">
<span className="hidden sm:inline-block text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)]">
v0.1.0
</span>
</div>
@@ -39,11 +39,11 @@ export default function Header() {
href={`/${s.id}`}
className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
isActive
? "text-[#f7f8f8] bg-[#141517] border border-[#23252a]"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]/50"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)] border border-[var(--border-color)]"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface-hover)]"
}`}
>
<span className="mr-1.5 opacity-70">{s.icon}</span>
<span className="mr-1.5 opacity-80">{s.icon}</span>
{s.label}
</Link>
);
@@ -56,7 +56,7 @@ export default function Header() {
<Link
href="/search"
className="md:hidden p-1.5 text-[#8a8f98] hover:text-[#f7f8f8] rounded-lg hover:bg-[#141517] transition-colors"
className="md:hidden p-1.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-elevated)] transition-colors"
title="Search"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -66,7 +66,7 @@ export default function Header() {
<Link
href="/create"
className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 bg-[#5e6ad2] hover:bg-[#7170ff] text-white text-xs font-medium rounded-lg transition-all shadow-sm hover:shadow-[#5e6ad2]/20"
className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 bg-[#5e6ad2] hover:bg-[#7170ff] text-white text-xs font-medium rounded-lg transition-all shadow-sm"
>
<span>+</span>
<span>New Doc</span>
@@ -76,21 +76,21 @@ export default function Header() {
href="/login"
className={`px-2.5 py-1 text-xs rounded-lg transition-colors ${
pathname === "/login"
? "text-[#f7f8f8] bg-[#141517]"
: "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
? "text-[var(--text-primary)] bg-[var(--bg-elevated)] font-medium"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
}`}
>
Login
</Link>
<div className="border-l border-[#1f2022] pl-2.5 flex items-center">
<div className="border-l border-[var(--border-color)] pl-2.5 flex items-center">
<ThemeToggle />
</div>
{/* Mobile menu toggle */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-1 text-[#8a8f98] hover:text-[#f7f8f8]"
className="md:hidden p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)]"
aria-label="Toggle navigation"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -106,23 +106,23 @@ export default function Header() {
{/* Mobile Drawer */}
{mobileMenuOpen && (
<div className="md:hidden border-t border-[#1f2022] bg-[#0c0d0e] px-4 py-3 space-y-1 animate-fade-in">
<div className="md:hidden border-t border-[var(--border-color)] bg-[var(--bg-surface)] px-4 py-3 space-y-1 animate-fade-in shadow-lg">
{SECTIONS.map((s) => (
<Link
key={s.id}
href={`/${s.id}`}
onClick={() => setMobileMenuOpen(false)}
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[#d0d6e0] hover:bg-[#141517] hover:text-[#f7f8f8]"
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:text-[var(--text-primary)]"
>
<span>{s.icon}</span>
<span>{s.label}</span>
</Link>
))}
<div className="pt-2 border-t border-[#1f2022] flex gap-2">
<div className="pt-2 border-t border-[var(--border-color)] flex gap-2">
<Link
href="/search"
onClick={() => setMobileMenuOpen(false)}
className="flex-1 text-center py-2 text-xs bg-[#141517] text-[#d0d6e0] rounded-lg"
className="flex-1 text-center py-2 text-xs bg-[var(--bg-elevated)] text-[var(--text-secondary)] rounded-lg font-medium border border-[var(--border-color)]"
>
Search
</Link>