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/TOC.tsx
+6 -6
View File
@@ -60,16 +60,16 @@ export default function TOC({ source }: { source: string }) {
return (
<nav className="text-xs">
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-[#1f2022]">
<svg className="w-3.5 h-3.5 text-[#7170ff]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--border-color)]">
<svg className="w-3.5 h-3.5 text-[#5e6ad2] dark:text-[#7170ff]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span className="font-semibold uppercase tracking-wider text-[#8a8f98] text-[11px]">
<span className="font-semibold uppercase tracking-wider text-[var(--text-muted)] text-[11px]">
On this page
</span>
</div>
<ul className="space-y-1.5 border-l border-[#1f2022] pl-2.5">
<ul className="space-y-1.5 border-l border-[var(--border-color)] pl-2.5">
{toc.map((entry) => {
const isActive = activeId === entry.id;
return (
@@ -92,8 +92,8 @@ export default function TOC({ source }: { source: string }) {
}}
className={`block py-0.5 transition-colors line-clamp-1 ${
isActive
? "text-[#7170ff] font-medium translate-x-0.5"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "text-[#5e6ad2] dark:text-[#7170ff] font-semibold translate-x-0.5"
: "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
}`}
title={entry.text}
>