From aedfb022f39e7031d0bd40696507ee0e0e8ea9e3 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Fri, 21 Aug 2026 11:13:05 +0700
Subject: [PATCH] fix(theme): support full dynamic Light Mode and Dark Mode
 with CSS variables and storage sync

---
 apps/web/app/[section]/[...slug]/page.tsx    | 134 ++++++++--------
 apps/web/app/[section]/page.tsx              |  50 +++---
 apps/web/app/components/CommandMenu.tsx      |  48 +++---
 apps/web/app/components/DocActions.tsx       |  16 +-
 apps/web/app/components/DocForm.tsx          |  74 ++++-----
 apps/web/app/components/Header.tsx           |  32 ++--
 apps/web/app/components/McpConfigSnippet.tsx |  18 +--
 apps/web/app/components/Sidebar.tsx          |  32 ++--
 apps/web/app/components/TOC.tsx              |  12 +-
 apps/web/app/components/ThemeToggle.tsx      |  46 ++++--
 apps/web/app/create/page.tsx                 |  14 +-
 apps/web/app/globals.css                     | 155 ++++++++++++++-----
 apps/web/app/layout.tsx                      |  25 ++-
 apps/web/app/login/page.tsx                  |  20 +--
 apps/web/app/page.tsx                        |  78 +++++-----
 apps/web/app/search/page.tsx                 |  58 +++----
 16 files changed, 464 insertions(+), 348 deletions(-)

diff --git a/apps/web/app/[section]/[...slug]/page.tsx b/apps/web/app/[section]/[...slug]/page.tsx
index d51457f..e892321 100644
--- a/apps/web/app/[section]/[...slug]/page.tsx
+++ b/apps/web/app/[section]/[...slug]/page.tsx
@@ -54,47 +54,47 @@ function CustomFieldBadges({
   if (customEntries.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap items-center gap-2 mt-4 pt-3.5 border-t border-[#1f2022]">
+    <div className="flex flex-wrap items-center gap-2 mt-4 pt-3.5 border-t border-[var(--border-color)]">
       {customEntries.map(([key, value]) => {
         const label = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");
-        let colorClass = "bg-[#141517] border-[#23252a] text-[#d0d6e0]";
+        let colorClass = "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-secondary)]";
         let icon = "🏷️";
         let displayValue: string;
 
         if (typeof value === "number") {
-          colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
+          colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff]";
           icon = "🎯";
           displayValue = `${value} pts`;
         } else if (typeof value === "boolean") {
           colorClass = value
-            ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-400"
-            : "bg-rose-500/10 border-rose-500/30 text-rose-400";
+            ? "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400"
+            : "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400";
           icon = value ? "✓" : "✕";
           displayValue = value ? "Solved" : "Pending";
         } else if (Array.isArray(value)) {
-          colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
+          colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff]";
           icon = "🗂️";
           displayValue = value.join(", ");
         } else {
           const v = String(value).toLowerCase();
           if (/^(easy|simple|beginner)/i.test(v)) {
-            colorClass = "bg-emerald-500/10 border-emerald-500/30 text-emerald-400";
+            colorClass = "bg-emerald-500/10 border-emerald-500/30 text-emerald-600 dark:text-emerald-400";
             icon = "🟢";
             displayValue = "Easy";
           } else if (/^(medium|intermediate)/i.test(v)) {
-            colorClass = "bg-amber-500/10 border-amber-500/30 text-amber-400";
+            colorClass = "bg-amber-500/10 border-amber-500/30 text-amber-600 dark:text-amber-400";
             icon = "🟡";
             displayValue = "Medium";
           } else if (/^(hard|expert|advanced)/i.test(v)) {
-            colorClass = "bg-rose-500/10 border-rose-500/30 text-rose-400";
+            colorClass = "bg-rose-500/10 border-rose-500/30 text-rose-600 dark:text-rose-400";
             icon = "🔴";
             displayValue = "Hard";
           } else if (/^(pwn|web|crypto|misc|forensic|reverse|binary)/i.test(v)) {
-            colorClass = "bg-indigo-500/10 border-indigo-500/30 text-indigo-300";
+            colorClass = "bg-indigo-500/10 border-indigo-500/30 text-indigo-600 dark:text-indigo-300";
             icon = "⚡";
             displayValue = v.toUpperCase();
           } else if (/ctf|def.?con|event/i.test(v)) {
-            colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#7170ff]";
+            colorClass = "bg-[#5e6ad2]/10 border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff]";
             icon = "🏆";
             displayValue = String(value);
           } else {
@@ -108,7 +108,7 @@ function CustomFieldBadges({
             className={`inline-flex items-center gap-1.5 px-2.5 py-1 border rounded-md text-xs font-mono transition-colors ${colorClass}`}
           >
             <span className="text-[10px] opacity-70">{icon}</span>
-            <span className="text-[#8a8f98] font-sans">{label}:</span>
+            <span className="text-[var(--text-muted)] font-sans">{label}:</span>
             <span className="font-medium">{displayValue}</span>
           </span>
         );
@@ -157,12 +157,12 @@ function FolderIndexPage({
   return (
     <div>
       {/* Breadcrumb */}
-      <nav className="flex items-center gap-2 text-xs text-[#62666d] mb-6 flex-wrap">
-        <Link href="/" className="hover:text-[#d0d6e0] transition-colors">
+      <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] mb-6 flex-wrap">
+        <Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
           MCPedia
         </Link>
         <span>/</span>
-        <Link href={`/${section}`} className="hover:text-[#d0d6e0] transition-colors">
+        <Link href={`/${section}`} className="hover:text-[var(--text-primary)] transition-colors">
           {sectionInfo.label}
         </Link>
         {slug.split("/").map((part, i) => {
@@ -172,7 +172,7 @@ function FolderIndexPage({
           return (
             <span key={path} className="flex items-center gap-2">
               <span>/</span>
-              <span className={isLast ? "text-[#8a8f98] font-medium" : "hover:text-[#d0d6e0]"}>
+              <span className={isLast ? "text-[var(--text-primary)] font-semibold" : "hover:text-[var(--text-primary)]"}>
                 {label}
               </span>
             </span>
@@ -181,22 +181,22 @@ function FolderIndexPage({
       </nav>
 
       {/* Header card */}
-      <div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-6 mb-8">
+      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 mb-8 shadow-sm">
         <div className="flex items-center justify-between gap-4">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-lg bg-[#141517] border border-[#23252a] flex items-center justify-center text-xl">
+            <div className="w-10 h-10 rounded-lg bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-xl">
               📁
             </div>
             <div>
-              <h1 className="text-2xl sm:text-3xl font-semibold text-[#f7f8f8] tracking-tight">
+              <h1 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] tracking-tight">
                 {folderName}
               </h1>
-              <p className="text-xs text-[#8a8f98] mt-0.5">
-                Directory path: <code className="text-[#7170ff] font-mono">{section}/{slug}</code>
+              <p className="text-xs text-[var(--text-muted)] mt-0.5">
+                Directory path: <code className="text-[#5e6ad2] dark:text-[#7170ff] font-mono">{section}/{slug}</code>
               </p>
             </div>
           </div>
-          <span className="text-xs font-mono text-[#8a8f98] bg-[#141517] border border-[#23252a] px-2.5 py-1 rounded-md">
+          <span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-2.5 py-1 rounded-md">
             {immediateDocs.length + folders.length} item{folders.length + immediateDocs.length !== 1 ? "s" : ""}
           </span>
         </div>
@@ -205,23 +205,23 @@ function FolderIndexPage({
       {/* Subfolders */}
       {folders.length > 0 && (
         <div className="mb-8">
-          <h2 className="text-xs font-semibold text-[#8a8f98] uppercase mb-3 tracking-wider flex items-center gap-2">
+          <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase mb-3 tracking-wider flex items-center gap-2">
             <span>Subfolders</span>
-            <span className="text-[10px] text-[#62666d]">({folders.length})</span>
+            <span className="text-[10px] text-[var(--text-dim)]">({folders.length})</span>
           </h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
             {folders.map(([folder, info]) => (
               <Link
                 key={folder}
                 href={`/${section}/${slug}/${folder}`.replace(/\/+/g, "/")}
-                className="group flex items-center gap-3 p-3.5 bg-[#0f1011] hover:bg-[#141517] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-lg transition-all shadow-sm"
+                className="group flex items-center gap-3 p-3.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg transition-all shadow-sm"
               >
                 <span className="text-2xl group-hover:scale-110 transition-transform">📁</span>
                 <div className="flex-1 min-w-0">
-                  <div className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors truncate">
+                  <div className="text-sm font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors truncate">
                     {folder.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}
                   </div>
-                  <div className="text-xs text-[#62666d] mt-0.5 font-mono">
+                  <div className="text-xs text-[var(--text-muted)] mt-0.5 font-mono">
                     {info.docCount} document{info.docCount !== 1 ? "s" : ""}
                   </div>
                 </div>
@@ -234,21 +234,21 @@ function FolderIndexPage({
       {/* Documents */}
       {immediateDocs.length > 0 && (
         <div>
-          <h2 className="text-xs font-semibold text-[#8a8f98] uppercase mb-3 tracking-wider flex items-center gap-2">
+          <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase mb-3 tracking-wider flex items-center gap-2">
             <span>Documents</span>
-            <span className="text-[10px] text-[#62666d]">({immediateDocs.length})</span>
+            <span className="text-[10px] text-[var(--text-dim)]">({immediateDocs.length})</span>
           </h2>
           <div className="space-y-2">
             {immediateDocs.map((doc) => (
               <Link
                 key={doc.slug}
                 href={`/${doc.slug}`}
-                className="group flex items-center justify-between gap-4 p-4 bg-[#0f1011] hover:bg-[#141517] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-lg transition-all shadow-sm"
+                className="group flex items-center justify-between gap-4 p-4 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg transition-all shadow-sm"
               >
                 <div className="flex items-center gap-3 min-w-0">
                   <span className="text-xl opacity-70 group-hover:opacity-100">📄</span>
                   <div className="min-w-0">
-                    <div className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors truncate">
+                    <div className="text-sm font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors truncate">
                       {doc.title}
                     </div>
                     {doc.tags.length > 0 && (
@@ -256,7 +256,7 @@ function FolderIndexPage({
                         {doc.tags.slice(0, 4).map((t) => (
                           <span
                             key={t}
-                            className="text-[11px] px-1.5 py-0.25 bg-[#141517] border border-[#23252a] rounded text-[#8a8f98]"
+                            className="text-[11px] px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)]"
                           >
                             #{t}
                           </span>
@@ -265,7 +265,7 @@ function FolderIndexPage({
                     )}
                   </div>
                 </div>
-                <time className="text-xs text-[#62666d] shrink-0 font-mono">
+                <time className="text-xs text-[var(--text-dim)] shrink-0 font-mono">
                   {new Date(doc.updatedAt).toLocaleDateString(undefined, {
                     month: "short",
                     day: "numeric",
@@ -278,8 +278,8 @@ function FolderIndexPage({
       )}
 
       {folders.length === 0 && immediateDocs.length === 0 && (
-        <div className="text-center py-12 border border-[#1f2022] rounded-xl bg-[#0f1011]">
-          <p className="text-sm text-[#8a8f98]">No documents found in this directory.</p>
+        <div className="text-center py-12 border border-[var(--border-color)] rounded-xl bg-[var(--bg-surface)]">
+          <p className="text-sm text-[var(--text-muted)]">No documents found in this directory.</p>
         </div>
       )}
     </div>
@@ -317,11 +317,11 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
       <div>
         <Link
           href={`/${doc.slug}`}
-          className="inline-flex items-center gap-1 text-xs text-[#8a8f98] hover:text-[#d0d6e0] mb-4 transition-colors"
+          className="inline-flex items-center gap-1 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] mb-4 transition-colors"
         >
           <span>← Back to document</span>
         </Link>
-        <h1 className="text-2xl font-semibold text-[#f7f8f8] mb-6">
+        <h1 className="text-2xl font-bold text-[var(--text-primary)] mb-6">
           Edit: {doc.title}
         </h1>
         <DocForm
@@ -356,8 +356,8 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
       {/* Main Content Column */}
       <article className="flex-1 min-w-0">
         {/* Breadcrumb */}
-        <nav className="flex items-center gap-2 text-xs text-[#62666d] mb-4 flex-wrap">
-          <Link href="/" className="hover:text-[#d0d6e0] transition-colors">
+        <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)] mb-4 flex-wrap">
+          <Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
             MCPedia
           </Link>
           {doc.slug.split("/").map((part, i) => {
@@ -371,7 +371,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                 <span>/</span>
                 <Link
                   href={`/${crumbPath}`}
-                  className={isLast ? "text-[#8a8f98] font-medium" : "hover:text-[#d0d6e0] transition-colors"}
+                  className={isLast ? "text-[var(--text-primary)] font-semibold" : "hover:text-[var(--text-primary)] transition-colors"}
                 >
                   {label}
                 </Link>
@@ -381,24 +381,24 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
         </nav>
 
         {/* Hero Metadata Card */}
-        <div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-6 mb-8 shadow-sm">
+        <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 mb-8 shadow-sm">
           <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-4">
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2 mb-2 flex-wrap">
-                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-medium bg-[#5e6ad2]/15 text-[#7170ff] border border-[#5e6ad2]/30">
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-medium bg-[#5e6ad2]/15 text-[#5e6ad2] dark:text-[#7170ff] border border-[#5e6ad2]/30">
                   <span>{sectionInfo.icon}</span>
                   <span className="uppercase">{sectionInfo.label}</span>
                 </span>
-                <span className="text-xs text-[#62666d]">·</span>
-                <span className="text-xs text-[#8a8f98] capitalize">
+                <span className="text-xs text-[var(--text-dim)]">·</span>
+                <span className="text-xs text-[var(--text-muted)] capitalize">
                   {doc.type}
                 </span>
-                <span className="text-xs text-[#62666d]">·</span>
-                <span className="text-xs text-[#8a8f98] font-mono">
+                <span className="text-xs text-[var(--text-dim)]">·</span>
+                <span className="text-xs text-[var(--text-muted)] font-mono">
                   {readingTime}
                 </span>
               </div>
-              <h1 className="text-2xl sm:text-3xl font-semibold text-[#f7f8f8] tracking-tight leading-tight">
+              <h1 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] tracking-tight leading-tight">
                 {doc.title}
               </h1>
             </div>
@@ -408,14 +408,14 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
           </div>
 
           {/* Author + Date + Tags */}
-          <div className="flex flex-wrap items-center gap-3 text-xs text-[#8a8f98] pt-3 border-t border-[#1a1b1d]">
+          <div className="flex flex-wrap items-center gap-3 text-xs text-[var(--text-muted)] pt-3 border-t border-[var(--border-color)]">
             {doc.author && (
               <div className="flex items-center gap-1.5">
                 <div className="w-4 h-4 rounded-full bg-[#5e6ad2] text-white flex items-center justify-center text-[10px] font-bold">
                   {doc.author.charAt(0).toUpperCase()}
                 </div>
-                <span className="text-[#d0d6e0]">{doc.author}</span>
-                <span className="text-[#62666d]">·</span>
+                <span className="text-[var(--text-secondary)]">{doc.author}</span>
+                <span className="text-[var(--text-dim)]">·</span>
               </div>
             )}
             <span>
@@ -427,12 +427,12 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
             </span>
             {doc.tags.length > 0 && (
               <>
-                <span className="text-[#62666d]">·</span>
+                <span className="text-[var(--text-dim)]">·</span>
                 <div className="flex flex-wrap gap-1">
                   {doc.tags.map((t) => (
                     <span
                       key={t}
-                      className="px-2 py-0.5 bg-[#141517] border border-[#23252a] rounded text-[#8a8f98] text-[11px]"
+                      className="px-2 py-0.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)] text-[11px]"
                     >
                       #{t}
                     </span>
@@ -447,7 +447,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
         </div>
 
         {/* Mobile TOC (rendered inline on smaller screens) */}
-        <div className="xl:hidden mb-6 p-4 bg-[#0f1011] border border-[#1f2022] rounded-lg">
+        <div className="xl:hidden mb-6 p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg shadow-sm">
           <TOC source={doc.body} />
         </div>
 
@@ -458,8 +458,8 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
 
         {/* Related Documents */}
         {related.length > 0 && (
-          <aside className="mt-12 pt-8 border-t border-[#1f2022]">
-            <h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider mb-4 flex items-center gap-2">
+          <aside className="mt-12 pt-8 border-t border-[var(--border-color)]">
+            <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-4 flex items-center gap-2">
               <span>Related Knowledge</span>
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -469,20 +469,20 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                   <Link
                     key={r.slug}
                     href={`/${r.slug}`}
-                    className="group block bg-[#0f1011] hover:bg-[#141517] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-lg p-4 transition-all shadow-sm"
+                    className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg p-4 transition-all shadow-sm"
                   >
                     <div className="flex items-center justify-between gap-2 mb-2">
-                      <span className="text-xs text-[#7170ff] font-mono uppercase">
+                      <span className="text-xs text-[#5e6ad2] dark:text-[#7170ff] font-mono uppercase">
                         {rInfo.icon} {r.section}
                       </span>
-                      <time className="text-[11px] text-[#62666d] font-mono">
+                      <time className="text-[11px] text-[var(--text-dim)] font-mono">
                         {new Date(r.updatedAt).toLocaleDateString(undefined, {
                           month: "short",
                           day: "numeric",
                         })}
                       </time>
                     </div>
-                    <h3 className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-1">
+                    <h3 className="text-sm font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-1">
                       {r.title}
                     </h3>
                   </Link>
@@ -494,9 +494,9 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
 
         {/* Revision History */}
         {revisions.length > 0 && (
-          <aside className="mt-10 pt-8 border-t border-[#1f2022]">
+          <aside className="mt-10 pt-8 border-t border-[var(--border-color)]">
             <div className="flex items-center justify-between mb-4">
-              <h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider">
+              <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
                 Revision History ({revisions.length})
               </h2>
             </div>
@@ -504,16 +504,16 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
               {revisions.map((rev) => (
                 <div
                   key={rev.id}
-                  className="flex items-center justify-between gap-3 p-3 bg-[#0f1011] border border-[#1f2022] rounded-lg text-xs"
+                  className="flex items-center justify-between gap-3 p-3 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg text-xs shadow-sm"
                 >
                   <div className="flex items-center gap-2 min-w-0">
-                    <span className="font-mono text-[#7170ff] bg-[#5e6ad2]/10 px-1.5 py-0.5 rounded border border-[#5e6ad2]/30">
+                    <span className="font-mono text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/10 px-1.5 py-0.5 rounded border border-[#5e6ad2]/30 font-semibold">
                       v{rev.revisionNo}
                     </span>
-                    <span className="text-[#d0d6e0] truncate">
+                    <span className="text-[var(--text-primary)] truncate">
                       {rev.reason || "Updated document"}
                     </span>
-                    <span className="text-[#62666d] hidden sm:inline">
+                    <span className="text-[var(--text-dim)] hidden sm:inline">
                       · {new Date(rev.createdAt).toLocaleString()}
                     </span>
                   </div>
@@ -522,7 +522,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
                       <input type="hidden" name="id" value={rev.id} />
                       <button
                         type="submit"
-                        className="text-xs text-[#d0d6e0] hover:text-white bg-[#141517] hover:bg-[#23252a] px-2.5 py-1 rounded border border-[#23252a] hover:border-[#5e6ad2] transition-colors"
+                        className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] px-2.5 py-1 rounded border border-[var(--border-color)] hover:border-[var(--brand)] transition-colors font-medium shadow-sm"
                       >
                         Restore
                       </button>
@@ -536,7 +536,7 @@ export default async function DocPage({ params, searchParams }: DocPageProps) {
       </article>
 
       {/* Desktop Sticky Table of Contents Column */}
-      <aside className="hidden xl:block w-64 shrink-0 sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto pl-6 border-l border-[#1f2022]">
+      <aside className="hidden xl:block w-64 shrink-0 sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto pl-6 border-l border-[var(--border-color)]">
         <TOC source={doc.body} />
       </aside>
     </div>
diff --git a/apps/web/app/[section]/page.tsx b/apps/web/app/[section]/page.tsx
index 19faf49..7db3850 100644
--- a/apps/web/app/[section]/page.tsx
+++ b/apps/web/app/[section]/page.tsx
@@ -84,10 +84,10 @@ function renderTree(nodes: TreeNode[], pathname: string) {
               href={`/${node.slug}`}
               className={`flex items-center justify-between gap-2 text-xs py-1.5 px-2.5 rounded-lg transition-all ${
                 isActive
-                  ? "text-[#7170ff] bg-[#5e6ad2]/15 font-medium border border-[#5e6ad2]/30"
+                  ? "text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/15 font-semibold border border-[#5e6ad2]/30"
                   : hasActiveChild
-                    ? "text-[#d0d6e0] bg-[#141517]"
-                    : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
+                    ? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
               }`}
             >
               <span className="flex items-center gap-2 truncate">
@@ -95,13 +95,13 @@ function renderTree(nodes: TreeNode[], pathname: string) {
                 <span className="truncate">{node.doc?.title || node.name}</span>
               </span>
               {isFolder && (
-                <span className="text-[10px] text-[#62666d] bg-[#191a1b] px-1.5 py-0.5 rounded font-mono">
+                <span className="text-[10px] text-[var(--text-dim)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-1.5 py-0.5 rounded font-mono">
                   {node.docCount} docs
                 </span>
               )}
             </Link>
             {node.children.length > 0 && (
-              <div className="ml-4 border-l border-[#1f2022] pl-2 mt-1">
+              <div className="ml-4 border-l border-[var(--border-color)] pl-2 mt-1">
                 {renderTree(node.children, pathname)}
               </div>
             )}
@@ -123,8 +123,8 @@ export default async function SectionIndexPage({
   if (!sectionInfo) {
     return (
       <div className="py-12 text-center">
-        <h1 className="text-2xl font-semibold text-[#f7f8f8]">Unknown section</h1>
-        <p className="text-sm text-[#8a8f98] mt-2">Section &quot;{section}&quot; does not exist.</p>
+        <h1 className="text-2xl font-semibold text-[var(--text-primary)]">Unknown section</h1>
+        <p className="text-sm text-[var(--text-muted)] mt-2">Section &quot;{section}&quot; does not exist.</p>
       </div>
     );
   }
@@ -136,33 +136,33 @@ export default async function SectionIndexPage({
   return (
     <div className="space-y-10">
       {/* Breadcrumb */}
-      <nav className="flex items-center gap-2 text-xs text-[#62666d]">
-        <Link href="/" className="hover:text-[#d0d6e0] transition-colors">
+      <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)]">
+        <Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
           MCPedia
         </Link>
         <span>/</span>
-        <span className="text-[#8a8f98] font-medium">{sectionInfo.label}</span>
+        <span className="text-[var(--text-muted)] font-medium">{sectionInfo.label}</span>
       </nav>
 
       {/* Hero Card */}
-      <div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-6 shadow-sm">
+      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 shadow-sm">
         <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-3">
           <div className="flex items-center gap-3">
-            <div className="w-12 h-12 rounded-xl bg-[#141517] border border-[#23252a] flex items-center justify-center text-2xl shadow-inner">
+            <div className="w-12 h-12 rounded-xl bg-[var(--bg-elevated)] border border-[var(--border-color)] flex items-center justify-center text-2xl shadow-inner">
               {sectionInfo.icon}
             </div>
             <div>
-              <h1 className="text-2xl sm:text-3xl font-bold text-[#f7f8f8] tracking-tight">
+              <h1 className="text-2xl sm:text-3xl font-bold text-[var(--text-primary)] tracking-tight">
                 {sectionInfo.label}
               </h1>
-              <p className="text-xs text-[#8a8f98] mt-0.5 font-mono uppercase">
+              <p className="text-xs text-[var(--text-muted)] mt-0.5 font-mono uppercase">
                 Section: {section}
               </p>
             </div>
           </div>
 
           <div className="flex items-center gap-2">
-            <span className="text-xs font-mono text-[#7170ff] bg-[#5e6ad2]/10 border border-[#5e6ad2]/25 px-2.5 py-1 rounded-md">
+            <span className="text-xs font-mono text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/10 border border-[#5e6ad2]/25 px-2.5 py-1 rounded-md">
               {sectionDocs.length} document{sectionDocs.length !== 1 ? "s" : ""}
             </span>
             <Link
@@ -174,15 +174,15 @@ export default async function SectionIndexPage({
           </div>
         </div>
 
-        <p className="text-sm text-[#8a8f98] leading-relaxed max-w-2xl mt-2">
+        <p className="text-sm text-[var(--text-muted)] leading-relaxed max-w-2xl mt-2">
           {sectionInfo.desc}
         </p>
       </div>
 
       {/* Hierarchical Folder Directory */}
       {tree.length > 0 && (
-        <section className="bg-[#0c0d0e] border border-[#1f2022] rounded-xl p-6">
-          <h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider mb-4 flex items-center gap-2">
+        <section className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-6 shadow-sm">
+          <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-4 flex items-center gap-2">
             <span>Folder Structure</span>
           </h2>
           {renderTree(tree, section)}
@@ -192,7 +192,7 @@ export default async function SectionIndexPage({
       {/* Document List */}
       {sectionDocs.length > 0 ? (
         <section>
-          <h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider mb-4">
+          <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-4">
             All Documents in {sectionInfo.label}
           </h2>
           <div className="space-y-2">
@@ -205,12 +205,12 @@ export default async function SectionIndexPage({
                 <Link
                   key={d.slug}
                   href={`/${d.slug}`}
-                  className="group flex items-center justify-between gap-4 p-4 bg-[#0f1011] hover:bg-[#141517] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-xl transition-all shadow-sm"
+                  className="group flex items-center justify-between gap-4 p-4 bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl transition-all shadow-sm"
                 >
                   <div className="flex items-center gap-3 min-w-0">
                     <span className="text-lg opacity-70 group-hover:opacity-100">📄</span>
                     <div className="min-w-0">
-                      <h3 className="text-sm font-medium text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors truncate">
+                      <h3 className="text-sm font-medium text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors truncate">
                         {d.title}
                       </h3>
                       {d.tags.length > 0 && (
@@ -218,7 +218,7 @@ export default async function SectionIndexPage({
                           {d.tags.slice(0, 4).map((t) => (
                             <span
                               key={t}
-                              className="text-[10px] px-1.5 py-0.25 bg-[#141517] border border-[#23252a] rounded text-[#8a8f98]"
+                              className="text-[10px] px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)]"
                             >
                               #{t}
                             </span>
@@ -227,7 +227,7 @@ export default async function SectionIndexPage({
                       )}
                     </div>
                   </div>
-                  <time className="text-xs text-[#62666d] font-mono shrink-0">
+                  <time className="text-xs text-[var(--text-dim)] font-mono shrink-0">
                     {new Date(d.updatedAt).toLocaleDateString(undefined, {
                       month: "short",
                       day: "numeric",
@@ -239,8 +239,8 @@ export default async function SectionIndexPage({
           </div>
         </section>
       ) : (
-        <div className="text-center py-12 border border-[#1f2022] rounded-xl bg-[#0f1011]">
-          <p className="text-sm text-[#8a8f98]">No documents in this section yet.</p>
+        <div className="text-center py-12 border border-[var(--border-color)] rounded-xl bg-[var(--bg-surface)]">
+          <p className="text-sm text-[var(--text-muted)]">No documents in this section yet.</p>
         </div>
       )}
     </div>
diff --git a/apps/web/app/components/CommandMenu.tsx b/apps/web/app/components/CommandMenu.tsx
index 052106c..f375480 100644
--- a/apps/web/app/components/CommandMenu.tsx
+++ b/apps/web/app/components/CommandMenu.tsx
@@ -91,13 +91,13 @@ export default function CommandMenu() {
     return (
       <button
         onClick={() => setOpen(true)}
-        className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-xs text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg transition-all shadow-inner"
+        className="hidden md:flex items-center gap-2 px-3 py-1.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all shadow-sm"
       >
-        <svg className="w-3.5 h-3.5 text-[#62666d]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg className="w-3.5 h-3.5 text-[var(--text-dim)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
         </svg>
-        <span>Search documentation...</span>
-        <kbd className="ml-2 font-mono bg-[#08090a] px-1.5 py-0.5 rounded border border-[#1f2022] text-[10px] text-[#62666d]">
+        <span>Search docs...</span>
+        <kbd className="ml-2 font-mono bg-[var(--bg-elevated)] px-1.5 py-0.5 rounded border border-[var(--border-color)] text-[10px] text-[var(--text-dim)]">
           ⌘K
         </kbd>
       </button>
@@ -108,15 +108,15 @@ export default function CommandMenu() {
     <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4">
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
+        className="fixed inset-0 bg-black/60 dark:bg-black/80 backdrop-blur-sm transition-opacity"
         onClick={() => setOpen(false)}
       />
 
       {/* Modal */}
-      <div className="relative w-full max-w-2xl bg-[#0f1011] border border-[#27292d] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
+      <div className="relative w-full max-w-2xl bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-2xl overflow-hidden animate-fade-in">
         {/* Search input bar */}
-        <div className="flex items-center gap-3 px-4 py-3.5 border-b border-[#1f2022] bg-[#141517]">
-          <svg className="w-5 h-5 text-[#7170ff] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <div className="flex items-center gap-3 px-4 py-3.5 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]">
+          <svg className="w-5 h-5 text-[#5e6ad2] dark:text-[#7170ff] shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
           </svg>
           <input
@@ -126,14 +126,14 @@ export default function CommandMenu() {
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyNavigation}
             placeholder="Type to search (titles, keywords, concepts)..."
-            className="w-full bg-transparent text-[#f7f8f8] placeholder-[#62666d] text-sm focus:outline-none"
+            className="w-full bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] text-sm focus:outline-none"
           />
           {loading && (
             <div className="w-4 h-4 border-2 border-[#5e6ad2] border-t-transparent rounded-full animate-spin shrink-0" />
           )}
           <button
             onClick={() => setOpen(false)}
-            className="text-xs text-[#62666d] hover:text-[#d0d6e0] bg-[#1b1d20] px-1.5 py-0.5 rounded border border-[#27292d]"
+            className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] px-1.5 py-0.5 rounded border border-[var(--border-color)]"
           >
             ESC
           </button>
@@ -143,14 +143,14 @@ export default function CommandMenu() {
         <div className="max-h-96 overflow-y-auto p-2">
           {query.trim() === "" ? (
             <div className="px-3 py-6 text-center">
-              <p className="text-xs text-[#8a8f98]">Search full-text, semantic embeddings, and CTF writeups.</p>
-              <div className="flex justify-center gap-2 mt-3 text-[11px] text-[#62666d]">
-                <span>Navigation: <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↑</kbd> <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↓</kbd></span>
-                <span>Select: <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">↵</kbd></span>
+              <p className="text-xs text-[var(--text-muted)]">Search full-text, semantic embeddings, and CTF writeups.</p>
+              <div className="flex justify-center gap-2 mt-3 text-[11px] text-[var(--text-dim)]">
+                <span>Navigation: <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↑</kbd> <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↓</kbd></span>
+                <span>Select: <kbd className="bg-[var(--bg-elevated)] px-1 py-0.5 rounded border border-[var(--border-color)]">↵</kbd></span>
               </div>
             </div>
           ) : results.length === 0 && !loading ? (
-            <div className="px-4 py-8 text-center text-xs text-[#8a8f98]">
+            <div className="px-4 py-8 text-center text-xs text-[var(--text-muted)]">
               No documents matching &quot;{query}&quot;
             </div>
           ) : (
@@ -164,27 +164,27 @@ export default function CommandMenu() {
                     onMouseEnter={() => setSelectedIndex(index)}
                     className={`flex items-start justify-between gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition-all ${
                       isSelected
-                        ? "bg-[#5e6ad2]/15 border border-[#5e6ad2]/40 text-[#f7f8f8]"
-                        : "hover:bg-[#141517] text-[#d0d6e0] border border-transparent"
+                        ? "bg-[#5e6ad2]/15 border border-[#5e6ad2]/40 text-[var(--text-primary)]"
+                        : "hover:bg-[var(--bg-elevated)] text-[var(--text-secondary)] border border-transparent"
                     }`}
                   >
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
-                        <span className="text-xs px-1.5 py-0.25 bg-[#191a1b] border border-[#23252a] rounded text-[#7170ff] font-mono">
+                        <span className="text-xs px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[#5e6ad2] dark:text-[#7170ff] font-mono">
                           {hit.section}
                         </span>
-                        <span className={`text-sm font-medium ${isSelected ? "text-[#7170ff]" : "text-[#f7f8f8]"} truncate`}>
+                        <span className={`text-sm font-medium ${isSelected ? "text-[#5e6ad2] dark:text-[#7170ff]" : "text-[var(--text-primary)]"} truncate`}>
                           {hit.title}
                         </span>
                       </div>
                       {hit.snippet && (
                         <p
-                          className="text-xs text-[#8a8f98] mt-1 line-clamp-1 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[#f7f8f8] [&>mark]:rounded [&>mark]:px-0.5"
+                          className="text-xs text-[var(--text-muted)] mt-1 line-clamp-1 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[var(--text-primary)] [&>mark]:rounded [&>mark]:px-0.5"
                           dangerouslySetInnerHTML={{ __html: hit.snippet }}
                         />
                       )}
                     </div>
-                    <span className="text-[11px] text-[#62666d] shrink-0 self-center">
+                    <span className="text-[11px] text-[var(--text-dim)] shrink-0 self-center">
                       {hit.slug}
                     </span>
                   </li>
@@ -195,12 +195,12 @@ export default function CommandMenu() {
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between px-4 py-2.5 border-t border-[#1f2022] bg-[#0c0d0e] text-[11px] text-[#62666d]">
-          <span>Tip: Press <kbd className="bg-[#141517] px-1 py-0.5 rounded border border-[#1f2022]">Hybrid</kbd> search is enabled by default</span>
+        <div className="flex items-center justify-between px-4 py-2.5 border-t border-[var(--border-color)] bg-[var(--bg-elevated)] text-[11px] text-[var(--text-dim)]">
+          <span>Tip: Press <kbd className="bg-[var(--bg-surface)] px-1 py-0.5 rounded border border-[var(--border-color)]">Hybrid</kbd> search is enabled</span>
           <Link
             href={`/search?q=${encodeURIComponent(query)}`}
             onClick={() => setOpen(false)}
-            className="hover:text-[#7170ff] transition-colors"
+            className="hover:text-[#5e6ad2] dark:hover:text-[#7170ff] transition-colors"
           >
             Open full search page →
           </Link>
diff --git a/apps/web/app/components/DocActions.tsx b/apps/web/app/components/DocActions.tsx
index a02589d..8bc1f4f 100644
--- a/apps/web/app/components/DocActions.tsx
+++ b/apps/web/app/components/DocActions.tsx
@@ -32,14 +32,14 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
         onClick={handleCopyMarkdown}
         type="button"
         title="Copy raw markdown content"
-        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#f7f8f8] rounded-md transition-all"
+        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-all shadow-sm"
       >
         {copiedMd ? (
           <>
-            <svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
             </svg>
-            <span className="text-emerald-400">Copied MD</span>
+            <span className="text-emerald-500 font-medium">Copied MD</span>
           </>
         ) : (
           <>
@@ -56,14 +56,14 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
         onClick={handleCopyLink}
         type="button"
         title="Copy link to document"
-        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#f7f8f8] rounded-md transition-all"
+        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md transition-all shadow-sm"
       >
         {copiedLink ? (
           <>
-            <svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
             </svg>
-            <span className="text-emerald-400">Copied</span>
+            <span className="text-emerald-500 font-medium">Copied Link</span>
           </>
         ) : (
           <>
@@ -78,12 +78,12 @@ export default function DocActions({ slug, body, canEdit }: DocActionsProps) {
       {/* Edit Link */}
       <Link
         href={canEdit ? `/${slug}?edit=1` : `/login?redirect=/${slug}`}
-        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#5e6ad2]/15 hover:bg-[#5e6ad2]/25 border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 text-[#7170ff] hover:text-white rounded-md transition-all"
+        className="inline-flex items-center gap-1 px-2.5 py-1 text-xs bg-[#5e6ad2]/10 hover:bg-[#5e6ad2]/20 border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 text-[#5e6ad2] dark:text-[#7170ff] rounded-md transition-all font-medium"
       >
         <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
         </svg>
-        <span>{canEdit ? "Edit" : "Edit"}</span>
+        <span>Edit</span>
       </Link>
     </div>
   );
diff --git a/apps/web/app/components/DocForm.tsx b/apps/web/app/components/DocForm.tsx
index d7f83da..2481409 100644
--- a/apps/web/app/components/DocForm.tsx
+++ b/apps/web/app/components/DocForm.tsx
@@ -82,7 +82,7 @@ export default function DocForm({
   const availableFolders = existingFolders?.[section] ?? [];
 
   const baseInputCls =
-    "w-full px-3.5 py-2 bg-[#0f1011] border border-[#23252a] hover:border-[#383b42] rounded-lg text-sm text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] transition-colors";
+    "w-full px-3.5 py-2 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-1 focus:ring-[#5e6ad2] transition-colors";
 
   function addCustomField(key = "", value = "") {
     setCustomFields([...customFields, { key, value }]);
@@ -184,14 +184,14 @@ export default function DocForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-6 max-w-4xl">
       {error && (
-        <div className="p-3.5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-400 text-sm">
+        <div className="p-3.5 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-sm">
           {error}
         </div>
       )}
 
       {/* Title */}
       <div>
-        <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+        <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
           Document Title *
         </label>
         <input
@@ -207,7 +207,7 @@ export default function DocForm({
       {/* Section + Type + Status */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <div>
-          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
             Section
           </label>
           <select
@@ -224,7 +224,7 @@ export default function DocForm({
           </select>
         </div>
         <div>
-          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
             Type
           </label>
           <select
@@ -240,7 +240,7 @@ export default function DocForm({
           </select>
         </div>
         <div>
-          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
             Status
           </label>
           <select
@@ -257,7 +257,7 @@ export default function DocForm({
       {/* Folder + Slug */}
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
             Parent Folder
           </label>
           <select
@@ -275,7 +275,7 @@ export default function DocForm({
           </select>
         </div>
         <div>
-          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
             {isEdit ? "Full Slug" : "Slug (File name) *"}
           </label>
           {isEdit ? (
@@ -283,7 +283,7 @@ export default function DocForm({
               type="text"
               value={slug ?? ""}
               readOnly
-              className="w-full px-3.5 py-2 bg-[#141517] border border-[#23252a] rounded-lg text-sm text-[#8a8f98] font-mono"
+              className="w-full px-3.5 py-2 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg text-sm text-[var(--text-muted)] font-mono"
             />
           ) : (
             <input
@@ -295,8 +295,8 @@ export default function DocForm({
               required
             />
           )}
-          <p className="text-[11px] text-[#62666d] mt-1 font-mono">
-            Path: <span className="text-[#7170ff]">{effectiveSlug || section}</span>
+          <p className="text-[11px] text-[var(--text-dim)] mt-1 font-mono">
+            Path: <span className="text-[#5e6ad2] dark:text-[#7170ff]">{effectiveSlug || section}</span>
           </p>
         </div>
       </div>
@@ -304,7 +304,7 @@ export default function DocForm({
       {/* Tags + Author */}
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
             Tags (comma separated)
           </label>
           <input
@@ -316,7 +316,7 @@ export default function DocForm({
           />
         </div>
         <div>
-          <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+          <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
             Author
           </label>
           <input
@@ -330,25 +330,25 @@ export default function DocForm({
       </div>
 
       {/* Custom Metadata Fields */}
-      <div className="p-4 bg-[#0c0d0e] border border-[#1f2022] rounded-xl space-y-3">
+      <div className="p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl space-y-3 shadow-sm">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-[#8a8f98]">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]">
               Dynamic Custom Metadata
             </h3>
-            <p className="text-[11px] text-[#62666d] mt-0.5">
+            <p className="text-[11px] text-[var(--text-dim)] mt-0.5">
               Add custom key-values (event, difficulty, points, etc.) rendered as styled badges.
             </p>
           </div>
 
           <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="text-[11px] text-[#62666d]">Presets:</span>
+            <span className="text-[11px] text-[var(--text-dim)]">Presets:</span>
             {PRESET_FIELDS.map((preset) => (
               <button
                 key={preset.key}
                 type="button"
                 onClick={() => addCustomField(preset.key, preset.value)}
-                className="px-2 py-0.5 text-[11px] bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0] rounded transition-colors"
+                className="px-2 py-0.5 text-[11px] bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded transition-colors"
               >
                 +{preset.key}
               </button>
@@ -375,7 +375,7 @@ export default function DocForm({
             <button
               type="button"
               onClick={() => removeCustomField(i)}
-              className="p-2 text-[#fca5a5] hover:text-rose-400 rounded hover:bg-[#191a1b] transition-colors"
+              className="p-2 text-rose-500 hover:text-rose-600 rounded hover:bg-[var(--bg-elevated)] transition-colors"
               title="Remove field"
             >
               ✕
@@ -386,16 +386,16 @@ export default function DocForm({
         <button
           type="button"
           onClick={() => addCustomField()}
-          className="text-xs text-[#7170ff] hover:text-[#828fff] px-3 py-1.5 rounded-lg border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 bg-[#5e6ad2]/5 transition-colors"
+          className="text-xs text-[#5e6ad2] dark:text-[#7170ff] hover:underline px-3 py-1.5 rounded-lg border border-[#5e6ad2]/30 hover:border-[#5e6ad2]/60 bg-[#5e6ad2]/5 transition-colors font-medium"
         >
           + Add Custom Field
         </button>
       </div>
 
       {/* Body with Write / Preview Tabs */}
-      <div className="border border-[#1f2022] rounded-xl overflow-hidden bg-[#0c0d0e]">
+      <div className="border border-[var(--border-color)] rounded-xl overflow-hidden bg-[var(--bg-surface)] shadow-sm">
         {/* Editor Toolbar */}
-        <div className="flex items-center justify-between px-3 py-2 bg-[#141517] border-b border-[#1f2022] flex-wrap gap-2">
+        <div className="flex items-center justify-between px-3 py-2 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
           {/* Tabs */}
           <div className="flex items-center gap-1">
             <button
@@ -403,8 +403,8 @@ export default function DocForm({
               onClick={() => setActiveTab("write")}
               className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
                 activeTab === "write"
-                  ? "bg-[#5e6ad2] text-white"
-                  : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                  ? "bg-[#5e6ad2] text-white shadow-sm"
+                  : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
               }`}
             >
               Write
@@ -414,8 +414,8 @@ export default function DocForm({
               onClick={() => setActiveTab("preview")}
               className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
                 activeTab === "preview"
-                  ? "bg-[#5e6ad2] text-white"
-                  : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                  ? "bg-[#5e6ad2] text-white shadow-sm"
+                  : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
               }`}
             >
               Live Preview
@@ -424,11 +424,11 @@ export default function DocForm({
 
           {/* Markdown Action Shortcuts */}
           {activeTab === "write" && (
-            <div className="flex items-center gap-1 text-xs text-[#8a8f98]">
+            <div className="flex items-center gap-1 text-xs text-[var(--text-muted)]">
               <button
                 type="button"
                 onClick={() => insertMarkdown("**", "**")}
-                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                 title="Bold"
               >
                 <b>B</b>
@@ -436,7 +436,7 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("*", "*")}
-                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                 title="Italic"
               >
                 <i>I</i>
@@ -444,7 +444,7 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("## ")}
-                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                 title="Heading 2"
               >
                 H2
@@ -452,7 +452,7 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("```\n", "\n```")}
-                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0] font-mono"
+                className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] font-mono"
                 title="Code Block"
               >
                 {"</>"}
@@ -460,7 +460,7 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("[", "](https://)")}
-                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                 title="Link"
               >
                 Link
@@ -468,7 +468,7 @@ export default function DocForm({
               <button
                 type="button"
                 onClick={() => insertMarkdown("> [!NOTE]\n> ")}
-                className="px-2 py-0.5 hover:bg-[#23252a] rounded text-[#d0d6e0]"
+                className="px-2 py-0.5 hover:bg-[var(--bg-surface)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                 title="Note Callout"
               >
                 Note
@@ -483,16 +483,16 @@ export default function DocForm({
             ref={textareaRef}
             value={body}
             onChange={(e) => setBody(e.target.value)}
-            className="w-full h-96 p-4 bg-transparent text-[#f7f8f8] placeholder-[#62666d] font-mono text-sm focus:outline-none resize-y leading-relaxed"
+            className="w-full h-96 p-4 bg-transparent text-[var(--text-primary)] placeholder-[var(--text-dim)] font-mono text-sm focus:outline-none resize-y leading-relaxed"
             placeholder="# Write your markdown document here..."
             required
           />
         ) : (
-          <div className="p-6 h-96 overflow-y-auto bg-[#08090a]">
+          <div className="p-6 h-96 overflow-y-auto bg-[var(--bg-app)]">
             {body.trim() ? (
               <Markdown source={body} />
             ) : (
-              <p className="text-xs text-[#62666d] italic">Nothing to preview yet.</p>
+              <p className="text-xs text-[var(--text-dim)] italic">Nothing to preview yet.</p>
             )}
           </div>
         )}
@@ -513,7 +513,7 @@ export default function DocForm({
         <button
           type="button"
           onClick={() => router.back()}
-          className="px-4 py-2.5 border border-[#23252a] hover:border-[#383b42] text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg text-sm transition-colors"
+          className="px-4 py-2.5 border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] rounded-lg text-sm transition-colors shadow-sm"
         >
           Cancel
         </button>
diff --git a/apps/web/app/components/Header.tsx b/apps/web/app/components/Header.tsx
index 960e711..365eda7 100644
--- a/apps/web/app/components/Header.tsx
+++ b/apps/web/app/components/Header.tsx
@@ -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>
diff --git a/apps/web/app/components/McpConfigSnippet.tsx b/apps/web/app/components/McpConfigSnippet.tsx
index 839dd5a..dc5aca7 100644
--- a/apps/web/app/components/McpConfigSnippet.tsx
+++ b/apps/web/app/components/McpConfigSnippet.tsx
@@ -60,9 +60,9 @@ export default function McpConfigSnippet() {
   }
 
   return (
-    <div className="bg-[#0c0d0e] border border-[#1f2022] rounded-xl overflow-hidden shadow-lg">
+    <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl overflow-hidden shadow-md">
       {/* Header bar with tabs */}
-      <div className="flex items-center justify-between px-4 py-2.5 bg-[#141517] border-b border-[#1f2022] flex-wrap gap-2">
+      <div className="flex items-center justify-between px-4 py-2.5 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
         <div className="flex items-center gap-1.5">
           {CONFIGS.map((c) => (
             <button
@@ -71,7 +71,7 @@ export default function McpConfigSnippet() {
               className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
                 activeTab === c.id
                   ? "bg-[#5e6ad2] text-white shadow-sm"
-                  : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#1b1d20]"
+                  : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface)]"
               }`}
             >
               {c.label}
@@ -82,14 +82,14 @@ export default function McpConfigSnippet() {
         <button
           onClick={handleCopy}
           type="button"
-          className="flex items-center gap-1.5 text-xs text-[#8a8f98] hover:text-white bg-[#1a1b1d] hover:bg-[#23252a] px-2.5 py-1 rounded border border-[#27292d] transition-all"
+          className="flex items-center gap-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated-hover)] px-2.5 py-1 rounded border border-[var(--border-color)] transition-all shadow-sm"
         >
           {copied ? (
             <>
-              <svg className="w-3.5 h-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
               </svg>
-              <span className="text-emerald-400 font-medium">Copied!</span>
+              <span className="text-emerald-500 font-medium">Copied!</span>
             </>
           ) : (
             <>
@@ -103,12 +103,12 @@ export default function McpConfigSnippet() {
       </div>
 
       {/* Code preview */}
-      <pre className="p-4 text-xs font-mono text-[#d0d6e0] overflow-x-auto leading-relaxed">
+      <pre className="p-4 text-xs font-mono text-[var(--pre-text)] bg-[var(--code-block-bg)] overflow-x-auto leading-relaxed">
         <code>{current.content}</code>
       </pre>
 
-      <div className="px-4 py-2 bg-[#090a0b] border-t border-[#1a1b1d] text-[11px] text-[#62666d]">
-        Config location: <span className="font-mono text-[#8a8f98]">{current.filename}</span>
+      <div className="px-4 py-2 bg-[var(--bg-elevated)] border-t border-[var(--border-color)] text-[11px] text-[var(--text-dim)]">
+        Config location: <span className="font-mono text-[var(--text-muted)]">{current.filename}</span>
       </div>
     </div>
   );
diff --git a/apps/web/app/components/Sidebar.tsx b/apps/web/app/components/Sidebar.tsx
index 97d9e11..ac88265 100644
--- a/apps/web/app/components/Sidebar.tsx
+++ b/apps/web/app/components/Sidebar.tsx
@@ -102,14 +102,14 @@ function TreeNodeItem({
   const isCollapsed = collapsedMap[node.slug] ?? false;
 
   return (
-    <li className={`select-none ${depth > 0 ? "ml-3 pl-2 border-l border-[#1f2022]" : ""}`}>
+    <li className={`select-none ${depth > 0 ? "ml-3 pl-2 border-l border-[var(--border-color)]" : ""}`}>
       <div
         className={`group flex items-center justify-between gap-1.5 text-xs py-1.5 px-2 rounded-md transition-all ${
           isActive
-            ? "text-[#7170ff] bg-[#5e6ad2]/15 font-medium border border-[#5e6ad2]/30 shadow-sm"
+            ? "text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/15 font-semibold border border-[#5e6ad2]/30 shadow-sm"
             : isParentOfActive
-              ? "text-[#d0d6e0] bg-[#141517]/80"
-              : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
+              ? "text-[var(--text-primary)] bg-[var(--bg-elevated)]"
+              : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
         }`}
       >
         <Link
@@ -125,7 +125,7 @@ function TreeNodeItem({
 
         {isFolder && (
           <div className="flex items-center gap-1 shrink-0">
-            <span className="text-[10px] text-[#62666d] bg-[#191a1b] px-1 py-0.2 rounded font-mono">
+            <span className="text-[10px] text-[var(--text-muted)] bg-[var(--bg-surface)] border border-[var(--border-color)] px-1 py-0.2 rounded font-mono">
               {node.docCount}
             </span>
             <button
@@ -135,7 +135,7 @@ function TreeNodeItem({
                 e.stopPropagation();
                 toggleCollapse(node.slug);
               }}
-              className="p-0.5 text-[#62666d] hover:text-[#d0d6e0] rounded hover:bg-[#23252a] transition-transform"
+              className="p-0.5 text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded hover:bg-[var(--bg-elevated-hover)] transition-transform"
               aria-label={isCollapsed ? "Expand folder" : "Collapse folder"}
             >
               <svg
@@ -210,10 +210,10 @@ export default function Sidebar() {
             value={filterText}
             onChange={(e) => setFilterText(e.target.value)}
             placeholder="Filter docs..."
-            className="w-full pl-7 pr-3 py-1.5 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-md text-xs text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] transition-colors"
+            className="w-full pl-7 pr-3 py-1.5 bg-[var(--bg-surface)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-md text-xs text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] transition-colors"
           />
           <svg
-            className="w-3.5 h-3.5 text-[#62666d] absolute left-2 top-2.5"
+            className="w-3.5 h-3.5 text-[var(--text-muted)] absolute left-2 top-2.5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -223,7 +223,7 @@ export default function Sidebar() {
           {filterText && (
             <button
               onClick={() => setFilterText("")}
-              className="absolute right-2 top-2 text-xs text-[#62666d] hover:text-[#d0d6e0]"
+              className="absolute right-2 top-2 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
             >
               ✕
             </button>
@@ -232,7 +232,7 @@ export default function Sidebar() {
       </div>
 
       {/* Summary count */}
-      <div className="flex items-center justify-between px-1 mb-3 text-[11px] text-[#62666d]">
+      <div className="flex items-center justify-between px-1 mb-3 text-[11px] text-[var(--text-dim)]">
         <span className="uppercase tracking-wider font-mono">Documentation</span>
         <span>{filteredDocs.length} items</span>
       </div>
@@ -247,20 +247,20 @@ export default function Sidebar() {
           const isSectionActive = pathname === `/${id}` || pathname.startsWith(`/${id}/`);
 
           return (
-            <div key={id} className="border-b border-[#141516] pb-3 last:border-0">
+            <div key={id} className="border-b border-[var(--border-color)] pb-3 last:border-0">
               <Link
                 href={`/${id}`}
                 className={`flex items-center justify-between gap-1.5 px-1 py-1 mb-1 rounded text-xs font-semibold uppercase tracking-wider transition-colors ${
                   isSectionActive
-                    ? "text-[#7170ff]"
-                    : "text-[#8a8f98] hover:text-[#d0d6e0]"
+                    ? "text-[#5e6ad2] dark:text-[#7170ff]"
+                    : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"
                 }`}
               >
                 <div className="flex items-center gap-1.5">
                   <span>{icon}</span>
                   <span>{label}</span>
                 </div>
-                <span className="text-[10px] text-[#62666d] font-normal font-mono">
+                <span className="text-[10px] text-[var(--text-dim)] font-normal font-mono">
                   {sectionDocs.length}
                 </span>
               </Link>
@@ -283,10 +283,10 @@ export default function Sidebar() {
       </div>
 
       {/* Bottom quick links */}
-      <div className="pt-3 border-t border-[#1f2022] mt-auto">
+      <div className="pt-3 border-t border-[var(--border-color)] mt-auto">
         <Link
           href="/create"
-          className="flex items-center justify-center gap-1.5 w-full py-1.5 text-xs bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#d0d6e0] hover:text-white rounded-md transition-colors font-medium"
+          className="flex items-center justify-center gap-1.5 w-full py-1.5 text-xs bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md transition-colors font-medium"
         >
           <span>+ Create New Document</span>
         </Link>
diff --git a/apps/web/app/components/TOC.tsx b/apps/web/app/components/TOC.tsx
index f69648e..7ab19b8 100644
--- a/apps/web/app/components/TOC.tsx
+++ b/apps/web/app/components/TOC.tsx
@@ -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}
               >
diff --git a/apps/web/app/components/ThemeToggle.tsx b/apps/web/app/components/ThemeToggle.tsx
index ce70017..4ab3628 100644
--- a/apps/web/app/components/ThemeToggle.tsx
+++ b/apps/web/app/components/ThemeToggle.tsx
@@ -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>
   );
 }
diff --git a/apps/web/app/create/page.tsx b/apps/web/app/create/page.tsx
index 7a801ea..d3d1f01 100644
--- a/apps/web/app/create/page.tsx
+++ b/apps/web/app/create/page.tsx
@@ -19,23 +19,23 @@ export default async function CreatePage() {
   return (
     <div className="space-y-6">
       {/* Breadcrumb */}
-      <nav className="flex items-center gap-2 text-xs text-[#62666d]">
-        <Link href="/" className="hover:text-[#d0d6e0] transition-colors">
+      <nav className="flex items-center gap-2 text-xs text-[var(--text-dim)]">
+        <Link href="/" className="hover:text-[var(--text-primary)] transition-colors">
           MCPedia
         </Link>
         <span>/</span>
-        <span className="text-[#8a8f98] font-medium">Create Document</span>
+        <span className="text-[var(--text-muted)] font-medium">Create Document</span>
       </nav>
 
       {/* Header */}
-      <div className="flex items-center justify-between pb-4 border-b border-[#1f2022]">
+      <div className="flex items-center justify-between pb-4 border-b border-[var(--border-color)]">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-lg bg-[#5e6ad2]/15 border border-[#5e6ad2]/30 flex items-center justify-center text-xl text-[#7170ff]">
+          <div className="w-10 h-10 rounded-lg bg-[#5e6ad2]/15 border border-[#5e6ad2]/30 flex items-center justify-center text-xl text-[#5e6ad2] dark:text-[#7170ff]">
             ✏️
           </div>
           <div>
-            <h1 className="text-2xl font-bold text-[#f7f8f8] tracking-tight">Create Document</h1>
-            <p className="text-xs text-[#8a8f98] mt-0.5">
+            <h1 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight">Create Document</h1>
+            <p className="text-xs text-[var(--text-muted)] mt-0.5">
               Writes markdown file to disk, records revision, and computes 2048-dim vector embeddings.
             </p>
           </div>
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index bffb38e..8f09582 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,43 +1,102 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
-/* Modern Linear / Vercel style dark-mode-first tokens */
-@custom-variant dark (&:where(.dark, .dark *));
+/* Light mode defaults (:root) */
+:root {
+  color-scheme: light;
+  --bg-app: #f8fafc;
+  --bg-surface: #ffffff;
+  --bg-surface-hover: #f1f5f9;
+  --bg-elevated: #f1f5f9;
+  --bg-elevated-hover: #e2e8f0;
+  --border-color: #e2e8f0;
+  --border-subtle: #edf2f7;
+  --border-card: #e2e8f0;
+
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+  --text-dim: #94a3b8;
+
+  --brand: #5e6ad2;
+  --accent: #4f46e5;
+  --accent-hover: #4338ca;
+
+  --nav-bg: rgba(255, 255, 255, 0.88);
+  --code-bg: #f1f5f9;
+  --code-block-bg: #0f172a;
+  --pre-text: #f8fafc;
+  --table-zebra: rgba(241, 245, 249, 0.6);
+  --scrollbar-thumb: #cbd5e1;
+  --scrollbar-thumb-hover: #94a3b8;
+  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
+}
+
+/* Dark mode overrides (html.dark) */
+html.dark {
+  color-scheme: dark;
+  --bg-app: #08090a;
+  --bg-surface: #0f1011;
+  --bg-surface-hover: #131415;
+  --bg-elevated: #141517;
+  --bg-elevated-hover: #1b1d20;
+  --border-color: #1f2022;
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-card: #1f2022;
+
+  --text-primary: #f7f8f8;
+  --text-secondary: #d0d6e0;
+  --text-muted: #8a8f98;
+  --text-dim: #62666d;
+
+  --brand: #5e6ad2;
+  --accent: #7170ff;
+  --accent-hover: #828fff;
+
+  --nav-bg: rgba(8, 9, 10, 0.85);
+  --code-bg: #141517;
+  --code-block-bg: #0c0d0e;
+  --pre-text: #e2e4e7;
+  --table-zebra: rgba(255, 255, 255, 0.02);
+  --scrollbar-thumb: #23252a;
+  --scrollbar-thumb-hover: #383b42;
+  --shadow-card: none;
+}
 
 @theme inline {
   --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
 
-  --color-background: #08090a;
-  --color-surface: #0f1011;
-  --color-elevated: #141517;
-  --color-elevated-hover: #1b1d20;
-  --color-border: #1f2022;
-  --color-border-subtle: rgba(255, 255, 255, 0.06);
-  --color-border-standard: rgba(255, 255, 255, 0.1);
+  --color-background: var(--bg-app);
+  --color-surface: var(--bg-surface);
+  --color-surface-hover: var(--bg-surface-hover);
+  --color-elevated: var(--bg-elevated);
+  --color-elevated-hover: var(--bg-elevated-hover);
+  --color-border: var(--border-color);
+  --color-border-subtle: var(--border-subtle);
 
-  --color-text-primary: #f7f8f8;
-  --color-text-secondary: #d0d6e0;
-  --color-text-tertiary: #8a8f98;
-  --color-text-quaternary: #62666d;
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-muted);
+  --color-text-quaternary: var(--text-dim);
 
-  --color-brand: #5e6ad2;
-  --color-accent: #7170ff;
-  --color-accent-hover: #828fff;
+  --color-brand: var(--brand);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
 }
 
 html {
   scroll-behavior: smooth;
-  color-scheme: dark;
 }
 
 body {
-  background: var(--color-background);
-  color: var(--color-text-secondary);
+  background-color: var(--bg-app);
+  color: var(--text-secondary);
   font-family: var(--font-sans);
   font-feature-settings: "cv01", "ss03";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
 /* Custom scrollbar */
@@ -51,29 +110,41 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #23252a;
+  background: var(--scrollbar-thumb);
   border-radius: 9999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #383b42;
+  background: var(--scrollbar-thumb-hover);
 }
 
 /* Glassmorphism helpers */
 .glass-panel {
-  background: rgba(15, 16, 17, 0.75);
+  background: var(--bg-surface);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-color);
 }
 
 .glass-nav {
-  background: rgba(8, 9, 10, 0.85);
+  background: var(--nav-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
 }
 
-/* Prose markdown typography */
+/* Prose markdown typography for both Light and Dark modes */
+.prose {
+  color: var(--text-secondary) !important;
+}
+
+.prose h1, .prose h2, .prose h3, .prose h4, .prose strong {
+  color: var(--text-primary) !important;
+}
+
+.prose a {
+  color: var(--accent) !important;
+}
+
 .prose table {
   width: 100%;
   border-collapse: separate;
@@ -82,19 +153,19 @@ body {
   font-size: 0.875rem;
   border-radius: 0.5rem;
   overflow: hidden;
-  border: 1px solid #1f2022;
+  border: 1px solid var(--border-color);
 }
 
 .prose th,
 .prose td {
   padding: 0.75rem 1rem;
   text-align: left;
-  border-bottom: 1px solid #1f2022;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .prose th {
-  background: #141517;
-  color: #f7f8f8;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
   font-weight: 600;
   font-size: 0.8125rem;
   text-transform: uppercase;
@@ -102,20 +173,20 @@ body {
 }
 
 .prose td {
-  color: #d0d6e0;
+  color: var(--text-secondary);
 }
 
 .prose tbody tr:last-child td {
   border-bottom: none;
 }
 
-.prose tbody tr:hover {
-  background: rgba(255, 255, 255, 0.02);
+.prose tbody tr:nth-child(even) {
+  background: var(--table-zebra);
 }
 
 .prose pre {
-  background: #0d0e0f !important;
-  border: 1px solid #1f2022;
+  background: var(--code-block-bg) !important;
+  border: 1px solid var(--border-color);
   border-radius: 0.625rem;
   padding: 1rem 1.25rem;
   overflow-x: auto;
@@ -125,15 +196,15 @@ body {
 .prose code {
   font-family: var(--font-mono);
   font-size: 0.85em;
-  color: #e2e4e7;
 }
 
 .prose :not(pre) > code {
-  background: #141517;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--code-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
   padding: 0.15rem 0.35rem;
   border-radius: 0.25rem;
-  font-weight: 400;
+  font-weight: 500;
 }
 
 .prose :not(pre) > code::before,
@@ -142,17 +213,17 @@ body {
 }
 
 .prose blockquote {
-  border-left: 3px solid #5e6ad2;
-  background: rgba(94, 106, 210, 0.05);
+  border-left: 3px solid var(--brand);
+  background: rgba(94, 106, 210, 0.08);
   border-radius: 0 0.375rem 0.375rem 0;
   margin: 1.5em 0;
   padding: 0.75em 1.25em;
   font-style: normal;
-  color: #a0a4a8;
+  color: var(--text-muted);
 }
 
 .prose hr {
-  border-color: #1f2022;
+  border-color: var(--border-color);
   margin: 2.5rem 0;
 }
 
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 9645b3c..9562e96 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -15,8 +15,27 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="h-full scroll-smooth">
-      <body className="min-h-screen bg-[#08090a] text-[#e2e4e7] font-sans antialiased selection:bg-[#5e6ad2]/30 selection:text-white flex flex-col">
+    <html lang="en" className="h-full scroll-smooth" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var stored = localStorage.getItem('mcpedia-theme');
+                  var isDark = stored === 'dark' || (stored === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
+                  if (isDark) {
+                    document.documentElement.classList.add('dark');
+                  } else {
+                    document.documentElement.classList.remove('dark');
+                  }
+                } catch(e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body className="min-h-screen bg-[var(--bg-app)] text-[var(--text-secondary)] font-sans antialiased selection:bg-[#5e6ad2]/30 selection:text-white flex flex-col transition-colors duration-150">
         <div hidden>
           <div id="a11y-live-region" aria-live="polite" aria-atomic="true" />
         </div>
@@ -25,7 +44,7 @@ export default function RootLayout({
 
         <div className="mx-auto max-w-7xl w-full flex-1 flex flex-col">
           <div className="flex flex-1">
-            <aside className="hidden lg:block w-72 shrink-0 border-r border-[#1f2022] sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto">
+            <aside className="hidden lg:block w-72 shrink-0 border-r border-[var(--border-color)] sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto bg-[var(--bg-app)]">
               <Sidebar />
             </aside>
             <main className="flex-1 min-w-0">
diff --git a/apps/web/app/login/page.tsx b/apps/web/app/login/page.tsx
index f40e58a..cc1845f 100644
--- a/apps/web/app/login/page.tsx
+++ b/apps/web/app/login/page.tsx
@@ -38,7 +38,7 @@ export default function LoginPage() {
 
   return (
     <div className="flex min-h-[65vh] items-center justify-center px-4">
-      <div className="w-full max-w-md bg-[#0f1011] border border-[#1f2022] rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
+      <div className="w-full max-w-md bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
         {/* Top decorative glow */}
         <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-48 h-24 bg-[#5e6ad2]/20 blur-2xl pointer-events-none rounded-full" />
 
@@ -46,21 +46,21 @@ export default function LoginPage() {
           <div className="w-12 h-12 rounded-xl bg-[#5e6ad2] text-white font-bold text-xl flex items-center justify-center mx-auto mb-3 shadow-lg shadow-[#5e6ad2]/25">
             M
           </div>
-          <h1 className="text-2xl font-bold text-[#f7f8f8] tracking-tight">Admin Authentication</h1>
-          <p className="text-xs text-[#8a8f98] mt-1.5">
+          <h1 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight">Admin Authentication</h1>
+          <p className="text-xs text-[var(--text-muted)] mt-1.5">
             Enter your admin password to create, edit, or delete documents.
           </p>
         </div>
 
         {error && (
-          <div className="p-3.5 mb-6 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-400 text-xs">
+          <div className="p-3.5 mb-6 rounded-lg border border-rose-500/30 bg-rose-500/10 text-rose-500 dark:text-rose-400 text-xs">
             {error}
           </div>
         )}
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-xs font-semibold uppercase tracking-wider text-[#8a8f98] mb-1.5">
+            <label className="block text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
               Admin Password
             </label>
             <div className="relative">
@@ -69,14 +69,14 @@ export default function LoginPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Enter password..."
-                className="w-full px-3.5 py-2.5 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-lg text-sm text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] transition-colors"
+                className="w-full px-3.5 py-2.5 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-sm text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-1 focus:ring-[#5e6ad2] transition-colors"
                 required
                 autoFocus
               />
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-2.5 text-xs text-[#62666d] hover:text-[#d0d6e0]"
+                className="absolute right-3 top-2.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
               >
                 {showPassword ? "Hide" : "Show"}
               </button>
@@ -95,14 +95,14 @@ export default function LoginPage() {
           </button>
         </form>
 
-        <div className="mt-8 pt-6 border-t border-[#1a1b1d] flex items-center justify-between text-xs text-[#8a8f98]">
+        <div className="mt-8 pt-6 border-t border-[var(--border-color)] flex items-center justify-between text-xs text-[var(--text-muted)]">
           <Link
             href="/"
-            className="hover:text-[#d0d6e0] transition-colors"
+            className="hover:text-[var(--text-primary)] transition-colors"
           >
             ← Back to Home
           </Link>
-          <span className="text-[11px] text-[#62666d]">HTTP-only Secure Cookie</span>
+          <span className="text-[11px] text-[var(--text-dim)]">HTTP-only Secure Cookie</span>
         </div>
       </div>
     </div>
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 5ebdd0f..8db0b66 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -62,7 +62,7 @@ function buildFolderTree(docs: { slug: string; title: string }[], section: strin
       const aFolder = a.children.length > 0 ? 0 : 1;
       const bFolder = b.children.length > 0 ? 0 : 1;
       if (aFolder !== bFolder) return aFolder - bFolder;
-      return a.title.localeCompare(b.title);
+      return (a.title || a.name).localeCompare(b.title || b.name);
     });
   }
 
@@ -86,16 +86,16 @@ function renderTree(nodes: TreeNode[], pathname: string) {
             href={`/${node.slug}`}
             className={`flex items-center gap-1.5 text-xs py-1 px-1.5 rounded transition-all ${
               pathname === `/${node.slug}`
-                ? "text-[#7170ff] bg-[#5e6ad2]/15 font-medium"
-                : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[#141517]"
+                ? "text-[#5e6ad2] dark:text-[#7170ff] bg-[#5e6ad2]/15 font-medium"
+                : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
             }`}
             title={node.title}
           >
-            <span className="opacity-70">{node.isLeaf && node.children.length === 0 ? "📄" : "📁"}</span>
+            <span className="opacity-80">{node.isLeaf && node.children.length === 0 ? "📄" : "📁"}</span>
             <span className="truncate">{node.title || node.name}</span>
           </Link>
           {node.children.length > 0 && (
-            <div className="ml-3.5 border-l border-[#1f2022] pl-2 mt-0.5">
+            <div className="ml-3.5 border-l border-[var(--border-color)] pl-2 mt-0.5">
               {renderTree(node.children, pathname)}
             </div>
           )}
@@ -124,7 +124,7 @@ function SectionTree({ section, docs, pathname }: SectionTreeProps) {
       {tree.length > 0 ? (
         renderTree(tree, pathname)
       ) : (
-        <p className="text-xs text-[#62666d] pl-1">No documents</p>
+        <p className="text-xs text-[var(--text-dim)] pl-1">No documents</p>
       )}
     </div>
   );
@@ -144,19 +144,19 @@ export default async function HomePage() {
     <div className="space-y-16">
       {/* Hero Section */}
       <section className="relative pt-4 pb-2">
-        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#5e6ad2]/10 border border-[#5e6ad2]/25 text-[#7170ff] text-xs font-medium mb-6">
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#5e6ad2]/10 border border-[#5e6ad2]/25 text-[#5e6ad2] dark:text-[#7170ff] text-xs font-medium mb-6">
           <span className="w-2 h-2 rounded-full bg-[#5e6ad2] animate-pulse" />
           <span>Model Context Protocol + Unified Knowledge Base</span>
         </div>
 
-        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[#f7f8f8] tracking-tight mb-5 leading-tight">
+        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[var(--text-primary)] tracking-tight mb-5 leading-tight">
           Knowledge Base for <br />
-          <span className="bg-gradient-to-r from-[#7170ff] via-[#828fff] to-white bg-clip-text text-transparent">
+          <span className="bg-gradient-to-r from-[#5e6ad2] via-[#7170ff] to-[#4338ca] dark:to-white bg-clip-text text-transparent">
             Humans and AI Agents
           </span>
         </h1>
 
-        <p className="text-base sm:text-lg text-[#8a8f98] max-w-2xl leading-relaxed mb-8">
+        <p className="text-base sm:text-lg text-[var(--text-muted)] max-w-2xl leading-relaxed mb-8">
           A high-performance, content-first documentation system. Browse hierarchical notes and CTF writeups in your browser, or connect AI coding assistants directly via native MCP tools.
         </p>
 
@@ -171,38 +171,38 @@ export default async function HomePage() {
           </Link>
           <Link
             href="/search"
-            className="inline-flex items-center gap-2 px-5 py-2.5 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#383b42] text-[#d0d6e0] hover:text-white rounded-lg font-medium text-sm transition-all"
+            className="inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-lg font-medium text-sm transition-all shadow-sm"
           >
-            <svg className="w-4 h-4 text-[#8a8f98]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg className="w-4 h-4 text-[var(--text-muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
             <span>Hybrid Search</span>
           </Link>
           <Link
             href="/create"
-            className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0] rounded-lg text-sm transition-colors"
+            className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg text-sm transition-colors shadow-sm"
           >
             <span>+ Create Document</span>
           </Link>
         </div>
 
         {/* Stats bar */}
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4 bg-[#0c0d0e] border border-[#1f2022] rounded-xl max-w-3xl">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 p-4 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl max-w-3xl shadow-sm">
           <div>
-            <div className="text-xl font-semibold text-[#f7f8f8]">{all.length}</div>
-            <div className="text-xs text-[#62666d]">Documents indexed</div>
+            <div className="text-xl font-bold text-[var(--text-primary)]">{all.length}</div>
+            <div className="text-xs text-[var(--text-muted)]">Documents indexed</div>
           </div>
           <div>
-            <div className="text-xl font-semibold text-[#f7f8f8]">{SECTIONS.length}</div>
-            <div className="text-xs text-[#62666d]">Core sections</div>
+            <div className="text-xl font-bold text-[var(--text-primary)]">{SECTIONS.length}</div>
+            <div className="text-xs text-[var(--text-muted)]">Core sections</div>
           </div>
           <div>
-            <div className="text-xl font-semibold text-[#7170ff]">RRF Hybrid</div>
-            <div className="text-xs text-[#62666d]">FTS + 2048-dim vectors</div>
+            <div className="text-xl font-bold text-[#5e6ad2] dark:text-[#7170ff]">RRF Hybrid</div>
+            <div className="text-xs text-[var(--text-muted)]">FTS + 2048-dim vectors</div>
           </div>
           <div>
-            <div className="text-xl font-semibold text-emerald-400">10 MCP Tools</div>
-            <div className="text-xs text-[#62666d]">Streamable HTTP :4021</div>
+            <div className="text-xl font-bold text-emerald-600 dark:text-emerald-400">10 MCP Tools</div>
+            <div className="text-xs text-[var(--text-muted)]">Streamable HTTP :4021</div>
           </div>
         </div>
       </section>
@@ -210,7 +210,7 @@ export default async function HomePage() {
       {/* Browse by Section */}
       <section>
         <div className="flex items-center justify-between mb-6">
-          <h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider">
+          <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
             Browse by Section
           </h2>
         </div>
@@ -221,28 +221,28 @@ export default async function HomePage() {
             return (
               <div
                 key={s.id}
-                className="group flex flex-col justify-between bg-[#0f1011] hover:bg-[#131415] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-xl p-5 transition-all shadow-sm"
+                className="group flex flex-col justify-between bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl p-5 transition-all shadow-sm"
               >
                 <div>
                   <div className="flex items-center justify-between gap-2 mb-3">
                     <span className="text-2xl">{s.icon}</span>
                     <Link
                       href={`/${s.id}`}
-                      className="text-xs font-mono text-[#7170ff] hover:underline"
+                      className="text-xs font-mono text-[#5e6ad2] dark:text-[#7170ff] hover:underline"
                     >
                       {sectionDocs.length} docs →
                     </Link>
                   </div>
-                  <h3 className="font-semibold text-base text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors mb-1.5">
+                  <h3 className="font-semibold text-base text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors mb-1.5">
                     {s.label}
                   </h3>
-                  <p className="text-xs text-[#8a8f98] mb-4 line-clamp-2 leading-relaxed">
+                  <p className="text-xs text-[var(--text-muted)] mb-4 line-clamp-2 leading-relaxed">
                     {s.desc}
                   </p>
                 </div>
 
                 {/* Inline folder tree */}
-                <div className="pt-3 border-t border-[#1a1b1d]">
+                <div className="pt-3 border-t border-[var(--border-color)]">
                   <SectionTree
                     section={s.id}
                     docs={all.map((d) => ({ slug: d.slug, title: d.title }))}
@@ -259,12 +259,12 @@ export default async function HomePage() {
       {recent.length > 0 && (
         <section>
           <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xs font-semibold text-[#8a8f98] uppercase tracking-wider">
+            <h2 className="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider">
               Recently Updated Knowledge
             </h2>
             <Link
               href="/docs"
-              className="text-xs text-[#7170ff] hover:underline"
+              className="text-xs text-[#5e6ad2] dark:text-[#7170ff] hover:underline font-medium"
             >
               View all ({all.length}) →
             </Link>
@@ -277,20 +277,20 @@ export default async function HomePage() {
                 <Link
                   key={d.slug}
                   href={`/${d.slug}`}
-                  className="group block bg-[#0f1011] hover:bg-[#131415] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-xl p-4 transition-all shadow-sm"
+                  className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl p-4 transition-all shadow-sm"
                 >
                   <div className="flex items-center justify-between gap-2 mb-2">
-                    <span className="text-xs font-mono text-[#7170ff] uppercase">
+                    <span className="text-xs font-mono text-[#5e6ad2] dark:text-[#7170ff] uppercase">
                       {sInfo?.icon} {d.section}
                     </span>
-                    <time className="text-[11px] text-[#62666d] font-mono">
+                    <time className="text-[11px] text-[var(--text-dim)] font-mono">
                       {new Date(d.updatedAt).toLocaleDateString(undefined, {
                         month: "short",
                         day: "numeric",
                       })}
                     </time>
                   </div>
-                  <h3 className="font-medium text-sm text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-2">
+                  <h3 className="font-medium text-sm text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors line-clamp-1 mb-2">
                     {d.title}
                   </h3>
                   {d.tags.length > 0 && (
@@ -298,7 +298,7 @@ export default async function HomePage() {
                       {d.tags.slice(0, 3).map((t) => (
                         <span
                           key={t}
-                          className="text-[10px] px-1.5 py-0.25 bg-[#141517] border border-[#23252a] rounded text-[#8a8f98]"
+                          className="text-[10px] px-1.5 py-0.25 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded text-[var(--text-muted)]"
                         >
                           #{t}
                         </span>
@@ -313,15 +313,15 @@ export default async function HomePage() {
       )}
 
       {/* MCP Agent Integration Showcase */}
-      <section className="border-t border-[#1f2022] pt-12 pb-6">
+      <section className="border-t border-[var(--border-color)] pt-12 pb-6">
         <div className="mb-6">
-          <div className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-[#141517] border border-[#23252a] text-[#8a8f98] text-xs font-mono mb-2">
+          <div className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded bg-[var(--bg-elevated)] border border-[var(--border-color)] text-[var(--text-muted)] text-xs font-mono mb-2">
             <span>⚡ Native Model Context Protocol (MCP)</span>
           </div>
-          <h2 className="text-2xl font-bold text-[#f7f8f8] tracking-tight mb-2">
+          <h2 className="text-2xl font-bold text-[var(--text-primary)] tracking-tight mb-2">
             Connect AI Coding Assistants
           </h2>
-          <p className="text-sm text-[#8a8f98] max-w-xl">
+          <p className="text-sm text-[var(--text-muted)] max-w-xl">
             Give Claude Desktop, Cursor, Antigravity, or Zed direct access to your knowledge base via semantic search, read resources, and document tools.
           </p>
         </div>
diff --git a/apps/web/app/search/page.tsx b/apps/web/app/search/page.tsx
index cafa11c..6b74bff 100644
--- a/apps/web/app/search/page.tsx
+++ b/apps/web/app/search/page.tsx
@@ -74,16 +74,16 @@ function SearchContent() {
     <div className="max-w-4xl space-y-8">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-bold text-[#f7f8f8] tracking-tight mb-2">
+        <h1 className="text-3xl font-bold text-[var(--text-primary)] tracking-tight mb-2">
           Search Knowledge Base
         </h1>
-        <p className="text-sm text-[#8a8f98]">
+        <p className="text-sm text-[var(--text-muted)]">
           Find answers across all documentation, CTF writeups, research notes, and semantic vector chunks.
         </p>
       </div>
 
       {/* Search Box & Controls */}
-      <div className="bg-[#0f1011] border border-[#1f2022] rounded-xl p-4 sm:p-5 shadow-sm space-y-4">
+      <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-4 sm:p-5 shadow-sm space-y-4">
         {/* Search Input */}
         <div className="relative">
           <input
@@ -91,11 +91,11 @@ function SearchContent() {
             value={query}
             onChange={handleChange}
             placeholder="Search by keywords, challenge names, tools, concepts..."
-            className="w-full pl-11 pr-10 py-3 bg-[#141517] border border-[#23252a] hover:border-[#383b42] rounded-lg text-[#f7f8f8] placeholder-[#62666d] focus:outline-none focus:border-[#5e6ad2] focus:ring-2 focus:ring-[#5e6ad2]/20 text-base transition-all"
+            className="w-full pl-11 pr-10 py-3 bg-[var(--bg-elevated)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-dim)] focus:outline-none focus:border-[var(--brand)] focus:ring-2 focus:ring-[#5e6ad2]/20 text-base transition-all"
             autoFocus
           />
           <svg
-            className="w-5 h-5 text-[#7170ff] absolute left-3.5 top-3.5"
+            className="w-5 h-5 text-[#5e6ad2] dark:text-[#7170ff] absolute left-3.5 top-3.5"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -108,7 +108,7 @@ function SearchContent() {
                 setQuery("");
                 setResults([]);
               }}
-              className="absolute right-3.5 top-3.5 text-xs text-[#62666d] hover:text-[#d0d6e0] p-0.5"
+              className="absolute right-3.5 top-3.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] p-0.5"
             >
               ✕
             </button>
@@ -116,10 +116,10 @@ function SearchContent() {
         </div>
 
         {/* Search Mode & Section Filters */}
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-[#1a1b1d] text-xs">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-2 border-t border-[var(--border-color)] text-xs">
           {/* Mode Selector */}
           <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="text-[#62666d] mr-1">Algorithm:</span>
+            <span className="text-[var(--text-muted)] mr-1">Algorithm:</span>
             {[
               { id: "hybrid", label: "⚡ Hybrid (RRF)", desc: "FTS + Vector Fusion" },
               { id: "keyword", label: "🔍 Keyword", desc: "PostgreSQL FTS" },
@@ -133,7 +133,7 @@ function SearchContent() {
                 className={`px-3 py-1 rounded-md border font-medium transition-all ${
                   mode === m.id
                     ? "bg-[#5e6ad2] border-[#5e6ad2] text-white shadow-sm"
-                    : "bg-[#141517] border-[#23252a] text-[#8a8f98] hover:text-[#d0d6e0]"
+                    : "bg-[var(--bg-elevated)] border-[var(--border-color)] text-[var(--text-muted)] hover:text-[var(--text-primary)]"
                 }`}
               >
                 {m.label}
@@ -148,8 +148,8 @@ function SearchContent() {
               onClick={() => setSelectedSection("all")}
               className={`px-2.5 py-1 rounded-md text-xs transition-colors ${
                 selectedSection === "all"
-                  ? "bg-[#23252a] text-white"
-                  : "text-[#62666d] hover:text-[#8a8f98]"
+                  ? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-medium"
+                  : "text-[var(--text-dim)] hover:text-[var(--text-muted)]"
               }`}
             >
               All Sections
@@ -161,8 +161,8 @@ function SearchContent() {
                 onClick={() => setSelectedSection(s.id)}
                 className={`px-2.5 py-1 rounded-md text-xs transition-colors ${
                   selectedSection === s.id
-                    ? "bg-[#23252a] text-white"
-                    : "text-[#62666d] hover:text-[#8a8f98]"
+                    ? "bg-[var(--bg-elevated-hover)] text-[var(--text-primary)] font-medium"
+                    : "text-[var(--text-dim)] hover:text-[var(--text-muted)]"
                 }`}
               >
                 {s.label}
@@ -174,7 +174,7 @@ function SearchContent() {
 
       {/* Loading State */}
       {loading && (
-        <div className="flex items-center gap-3 py-8 text-[#8a8f98] text-sm">
+        <div className="flex items-center gap-3 py-8 text-[var(--text-muted)] text-sm">
           <div className="w-5 h-5 border-2 border-[#5e6ad2] border-t-transparent rounded-full animate-spin" />
           <span>Searching knowledge base...</span>
         </div>
@@ -182,10 +182,10 @@ function SearchContent() {
 
       {/* Empty State */}
       {!loading && query && filteredResults.length === 0 && (
-        <div className="text-center py-16 bg-[#0f1011] border border-[#1f2022] rounded-xl">
+        <div className="text-center py-16 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl shadow-sm">
           <div className="text-3xl mb-3">🔍</div>
-          <h3 className="text-base font-medium text-[#f7f8f8] mb-1">No matching documents</h3>
-          <p className="text-xs text-[#8a8f98] max-w-sm mx-auto">
+          <h3 className="text-base font-semibold text-[var(--text-primary)] mb-1">No matching documents</h3>
+          <p className="text-xs text-[var(--text-muted)] max-w-sm mx-auto">
             Try switching algorithm mode to <strong>Hybrid</strong> or <strong>Semantic</strong>, or search with different keywords.
           </p>
         </div>
@@ -193,8 +193,8 @@ function SearchContent() {
 
       {/* Initial Hint */}
       {!loading && !query && (
-        <div className="p-8 text-center bg-[#0c0d0e] border border-[#1f2022] rounded-xl space-y-4">
-          <p className="text-xs text-[#8a8f98]">Popular search queries:</p>
+        <div className="p-8 text-center bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl space-y-4 shadow-sm">
+          <p className="text-xs text-[var(--text-muted)]">Popular search queries:</p>
           <div className="flex justify-center flex-wrap gap-2 text-xs">
             {["stack alignment", "ret2win", "bullmq worker", "streamable http", "full-text search", "caddy reverse proxy"].map((term) => (
               <button
@@ -203,7 +203,7 @@ function SearchContent() {
                   setQuery(term);
                   handleSearch(term, mode);
                 }}
-                className="px-3 py-1 bg-[#141517] hover:bg-[#1b1d20] border border-[#23252a] hover:border-[#5e6ad2]/40 rounded-md text-[#d0d6e0] transition-colors"
+                className="px-3 py-1 bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-md text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
               >
                 {term}
               </button>
@@ -215,7 +215,7 @@ function SearchContent() {
       {/* Results List */}
       {!loading && filteredResults.length > 0 && (
         <div className="space-y-4">
-          <div className="flex items-center justify-between text-xs text-[#62666d]">
+          <div className="flex items-center justify-between text-xs text-[var(--text-dim)]">
             <span>Found {filteredResults.length} result{filteredResults.length !== 1 ? "s" : ""}</span>
             <span className="font-mono">Ranked by {mode} score</span>
           </div>
@@ -225,29 +225,29 @@ function SearchContent() {
               <Link
                 key={r.slug}
                 href={`/${r.slug}`}
-                className="group block bg-[#0f1011] hover:bg-[#131415] border border-[#1f2022] hover:border-[#5e6ad2]/40 rounded-xl p-4 sm:p-5 transition-all shadow-sm"
+                className="group block bg-[var(--bg-surface)] hover:bg-[var(--bg-surface-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl p-4 sm:p-5 transition-all shadow-sm"
               >
                 <div className="flex items-center justify-between gap-3 mb-2">
                   <div className="flex items-center gap-2">
-                    <span className="text-xs font-mono px-2 py-0.5 rounded bg-[#5e6ad2]/10 border border-[#5e6ad2]/30 text-[#7170ff] uppercase">
+                    <span className="text-xs font-mono px-2 py-0.5 rounded bg-[#5e6ad2]/10 border border-[#5e6ad2]/30 text-[#5e6ad2] dark:text-[#7170ff] uppercase">
                       {r.section}
                     </span>
-                    <span className="text-xs text-[#62666d] font-mono truncate">
+                    <span className="text-xs text-[var(--text-dim)] font-mono truncate">
                       /{r.slug}
                     </span>
                   </div>
-                  <span className="text-xs font-mono text-[#8a8f98] bg-[#141517] px-2 py-0.5 rounded">
+                  <span className="text-xs font-mono text-[var(--text-muted)] bg-[var(--bg-elevated)] border border-[var(--border-color)] px-2 py-0.5 rounded">
                     Score: {r.score.toFixed(3)}
                   </span>
                 </div>
 
-                <h2 className="text-base font-semibold text-[#f7f8f8] group-hover:text-[#7170ff] transition-colors mb-2">
+                <h2 className="text-base font-semibold text-[var(--text-primary)] group-hover:text-[#5e6ad2] dark:group-hover:text-[#7170ff] transition-colors mb-2">
                   {r.title}
                 </h2>
 
                 {r.snippet && (
                   <p
-                    className="text-xs text-[#8a8f98] leading-relaxed line-clamp-2 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-white [&>mark]:px-1 [&>mark]:rounded [&>mark]:font-medium"
+                    className="text-xs text-[var(--text-muted)] leading-relaxed line-clamp-2 [&>mark]:bg-[#5e6ad2]/30 [&>mark]:text-[var(--text-primary)] [&>mark]:px-1 [&>mark]:rounded [&>mark]:font-medium"
                     dangerouslySetInnerHTML={{ __html: r.snippet }}
                   />
                 )}
@@ -265,8 +265,8 @@ export default function SearchPage() {
     <Suspense
       fallback={
         <div className="max-w-4xl py-12">
-          <h1 className="text-2xl font-bold text-[#f7f8f8] mb-4">Search</h1>
-          <p className="text-sm text-[#8a8f98]">Loading search module...</p>
+          <h1 className="text-2xl font-bold text-[var(--text-primary)] mb-4">Search</h1>
+          <p className="text-sm text-[var(--text-muted)]">Loading search module...</p>
         </div>
       }
     >