移动端适配优化 + 深色模式支持

index.html

@@ -28,8 +28,28 @@
   --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.04);
   --header-h: 56px;
   --sidebar-w: 260px;
-  --content-max: 960px;
+  --drawer-bg: #FFFFFF;
 }
+
+/* ===== Dark Mode ===== */
+[data-theme="dark"] {
+  --color-primary: #177DDC;
+  --color-primary-hover: #4096FF;
+  --color-primary-active: #0958D9;
+  --color-primary-bg: rgba(23,125,220,0.15);
+  --bg: #0A0A0A;
+  --bg-container: #141414;
+  --bg-elevated: #1A1A1A;
+  --border: #303030;
+  --border-light: #222222;
+  --text-primary: #E8E8E8;
+  --text-secondary: #A6A6A6;
+  --text-tertiary: #6E6E6E;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 6px -1px rgba(0,0,0,0.15);
+  --shadow-md: 0 2px 4px rgba(0,0,0,0.25), 0 4px 12px -2px rgba(0,0,0,0.2);
+  --drawer-bg: #141414;
+}
+
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -38,31 +58,81 @@ body {
   line-height: 1.57;
   font-size: 14px;
   min-height: 100vh;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.2s ease, color 0.2s ease;
 }
+
+/* ===== Header ===== */
 .header-bar {
   position: sticky; top: 0; height: var(--header-h);
-  background: rgba(255,255,255,0.92);
+  background: rgba(255,255,255,0.95);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border-light);
-  display: flex; align-items: center; padding: 0 24px; z-index: 100; gap: 16px;
+  display: flex; align-items: center; padding: 0 16px; z-index: 100; gap: 12px;
 }
-.header-bar .brand { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
+[data-theme="dark"] .header-bar { background: rgba(20,20,20,0.95); }
+.header-bar .menu-btn, .header-bar .theme-btn {
+  display: none; width: 36px; height: 36px; border: none; background: none;
+  cursor: pointer; border-radius: var(--radius-sm); align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.header-bar .menu-btn:hover, .header-bar .theme-btn:hover { background: var(--bg-elevated); }
+.header-bar .menu-btn svg { width: 20px; height: 20px; color: var(--text-secondary); }
+.header-bar .theme-btn { font-size: 16px; }
+.header-bar .brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
 .header-bar h1 {
-  font-size: 16px; font-weight: 700;
+  font-size: 15px; font-weight: 700;
   background: linear-gradient(135deg, var(--color-primary) 0%, #722ED1 100%);
   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
 }
-.header-bar .tagline { font-size: 12px; color: var(--text-tertiary); }
+.header-bar .tagline { font-size: 11px; color: var(--text-tertiary); display: inline; }
-.search-box { flex: 1; max-width: 400px; position: relative; }
+.search-box { flex: 1; position: relative; }
 .search-box input {
-  width: 100%; padding: 6px 12px 6px 32px;
+  width: 100%; padding: 8px 12px 8px 34px;
   border: 1px solid var(--border); border-radius: var(--radius-sm);
-  font-size: 13px; outline: none; background: var(--bg-elevated);
+  font-size: 14px; outline: none; background: var(--bg-elevated);
+  color: var(--text-primary);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  min-width: 0;
 }
+.search-box input::placeholder { color: var(--text-tertiary); }
 .search-box input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg); background: var(--bg-container); }
-.search-box .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: 14px; pointer-events: none; }
+.search-box .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: 15px; pointer-events: none; line-height: 1; }
+
+/* ===== Filter Chips (mobile) ===== */
+.chip-bar {
+  display: none;
+  padding: 10px 16px 0;
+  background: var(--bg-container);
+  border-bottom: 1px solid var(--border-light);
+  position: sticky; top: var(--header-h); z-index: 90;
+}
+.chip-bar-inner {
+  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
+  padding-bottom: 10px; scrollbar-width: none;
+}
+.chip-bar-inner::-webkit-scrollbar { display: none; }
+.chip {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 7px 14px; border-radius: 20px;
+  font-size: 13px; font-weight: 500; white-space: nowrap;
+  border: 1px solid var(--border); background: var(--bg-container);
+  color: var(--text-secondary); cursor: pointer;
+  transition: all 0.15s ease; user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  min-height: 36px;
+}
+.chip:active { transform: scale(0.96); }
+.chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
+.chip .chip-count {
+  font-size: 11px; background: rgba(0,0,0,0.08); border-radius: 10px; padding: 0 5px; line-height: 1.5;
+}
+.chip.active .chip-count { background: rgba(255,255,255,0.25); }
+
+/* ===== Layout ===== */
 .layout { display: flex; max-width: 1200px; margin: 0 auto; min-height: calc(100vh - var(--header-h)); }
+
+/* ===== Sidebar ===== */
 .sidebar {
   width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-container);
   border-right: 1px solid var(--border-light); padding: 16px 0;
@@ -75,13 +145,14 @@ body {
 }
 .sidebar .nav-item {
   display: flex; align-items: center; gap: 8px;
-  padding: 6px 12px; border-radius: var(--radius-sm);
+  padding: 8px 12px; border-radius: var(--radius-sm);
   font-size: 13px; color: var(--text-secondary);
   cursor: pointer; transition: all 0.12s ease; text-decoration: none;
+  min-height: 40px;
 }
 .sidebar .nav-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
 .sidebar .nav-item.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 500; }
-.sidebar .nav-item .nav-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
+.sidebar .nav-item .nav-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
 .sidebar .nav-item .nav-count {
   margin-left: auto; font-size: 11px; color: var(--text-tertiary);
   background: var(--bg-elevated); border-radius: 10px; padding: 0 6px; line-height: 1.6;
@@ -89,45 +160,73 @@ body {
 .sidebar .nav-item.active .nav-count { background: rgba(22,119,255,0.12); color: var(--color-primary); }
 .sidebar .sub-nav { padding-left: 24px; overflow: hidden; max-height: 0; transition: max-height 0.25s ease; }
 .sidebar .sub-nav.open { max-height: 500px; }
-.sidebar .sub-nav .nav-item { font-size: 12px; padding: 4px 12px; }
+.sidebar .sub-nav .nav-item { font-size: 12px; padding: 5px 12px; }
+
+/* ===== Drawer Overlay ===== */
+.drawer-overlay {
+  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
+  z-index: 200; opacity: 0; transition: opacity 0.2s ease;
+}
+.drawer-overlay.show { display: block; opacity: 1; }
+.drawer {
+  position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw;
+  background: var(--drawer-bg); z-index: 201;
+  transform: translateX(-100%); transition: transform 0.25s ease;
+  overflow-y: auto;
+}
+.drawer-overlay.show .drawer { transform: translateX(0); }
+.drawer-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
+}
+.drawer-header .close-btn {
+  width: 32px; height: 32px; border: none; background: var(--bg-elevated);
+  border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center;
+  justify-content: center; font-size: 18px; color: var(--text-secondary);
+}
+
+/* ===== Main ===== */
 .main { flex: 1; padding: 24px 32px 64px; min-width: 0; }
 .breadcrumb { font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
 .breadcrumb a { color: var(--text-tertiary); text-decoration: none; }
 .breadcrumb a:hover { color: var(--color-primary); }
 .breadcrumb .sep { margin: 0 4px; }
-.stats-bar { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
+.stats-bar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
 .stat-item {
   display: flex; align-items: baseline; gap: 4px;
-  padding: 8px 16px; background: var(--bg-container);
+  padding: 8px 14px; background: var(--bg-container);
   border: 1px solid var(--border-light); border-radius: var(--radius-sm);
 }
-.stat-num { font-size: 20px; font-weight: 700; color: var(--color-primary); }
+.stat-num { font-size: 18px; font-weight: 700; color: var(--color-primary); }
 .stat-label { font-size: 12px; color: var(--text-tertiary); }
-.wiki-section-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
+.wiki-section { margin-bottom: 28px; }
-.wiki-section-desc { font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px; }
+.wiki-section-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
-.all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+.wiki-section-desc { font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px; }
+.all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
 .all-card {
   background: var(--bg-container); border: 1px solid var(--border-light);
-  border-radius: var(--radius-md); padding: 16px 20px;
+  border-radius: var(--radius-md); padding: 16px 18px;
   transition: all 0.15s ease; text-decoration: none; color: var(--text-primary); display: block;
 }
 .all-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
+.all-card:active { transform: scale(0.99); }
 .all-card .card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
 .all-card .card-desc {
   font-size: 12px; color: var(--text-tertiary); line-height: 1.5;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
 }
 .all-card .card-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
-.all-card .card-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; font-weight: 500; }
+.all-card .card-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
 .all-card .card-date { font-size: 11px; color: var(--text-tertiary); }
 .wiki-toc {
   background: var(--bg-container); border: 1px solid var(--border-light);
   border-radius: var(--radius-md); overflow: hidden; margin-top: 8px;
 }
 .wiki-toc-header {
-  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
+  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
   background: var(--bg-elevated); border-bottom: 1px solid var(--border-light);
   cursor: pointer; user-select: none; transition: background 0.12s ease;
+  min-height: 44px;
 }
 .wiki-toc-header:hover { background: var(--color-primary-bg); }
 .wiki-toc-header .toc-icon { font-size: 16px; transition: transform 0.2s ease; }
@@ -138,33 +237,74 @@ body {
 .wiki-toc-body.open { max-height: 2000px; }
 .wiki-toc-item {
   display: flex; align-items: center; gap: 10px;
-  padding: 10px 20px 10px 46px; border-bottom: 1px solid var(--border-light);
+  padding: 12px 18px 12px 42px; border-bottom: 1px solid var(--border-light);
   transition: background 0.1s ease; text-decoration: none; color: var(--text-primary);
+  min-height: 48px;
 }
 .wiki-toc-item:last-child { border-bottom: none; }
-.wiki-toc-item:hover { background: var(--color-primary-bg); }
+.wiki-toc-item:active { background: var(--color-primary-bg); }
 .wiki-toc-item .item-icon { font-size: 14px; color: var(--text-tertiary); flex-shrink: 0; }
 .wiki-toc-item .item-title { flex: 1; font-size: 13px; }
 .wiki-toc-item .item-tag {
-  font-size: 11px; padding: 1px 8px; border-radius: 10px;
+  font-size: 11px; padding: 2px 8px; border-radius: 10px;
   background: var(--bg-elevated); color: var(--text-tertiary); flex-shrink: 0;
 }
-.footer {
+
-  padding: 16px 0; border-top: 1px solid var(--border-light);
+/* ===== Dark mode toggle button (desktop) ===== */
-  font-size: 12px; color: var(--text-tertiary); text-align: center;
+.theme-toggle {
+  display: none;
+  margin-left: auto;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
 }
+.theme-toggle button {
+  width: 36px; height: 36px; border: none; background: none;
+  cursor: pointer; border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 16px; color: var(--text-secondary);
+}
+.theme-toggle button:hover { background: var(--bg-elevated); }
+
+/* ===== Desktop ===== */
+@media (min-width: 769px) {
+  .chip-bar { display: none !important; }
+  .theme-toggle { display: flex; }
+}
+
+/* ===== Mobile ===== */
 @media (max-width: 768px) {
+  .header-bar { padding: 0 10px; gap: 8px; }
+  .menu-btn { display: flex !important; }
+  .header-bar .tagline { display: none; }
+  .search-box input { padding: 7px 10px 7px 30px; font-size: 14px; }
+  .search-box .search-icon { left: 8px; font-size: 14px; }
+  .chip-bar { display: block; }
   .sidebar { display: none; }
-  .main { padding: 16px; }
+  .main { padding: 16px 12px 48px; }
-  .header-bar { padding: 0 12px; }
+  .all-grid { grid-template-columns: 1fr; gap: 10px; }
-  .search-box { max-width: 200px; }
+  .all-card { padding: 14px 16px; }
-  .all-grid { grid-template-columns: 1fr; }
+  .stats-bar { gap: 8px; }
+  .stat-item { padding: 6px 10px; }
+  .stat-num { font-size: 16px; }
+  .wiki-section-title { font-size: 16px; }
+  .wiki-toc-item { padding: 10px 14px 10px 36px; }
+  .wiki-toc-header { padding: 12px 14px; }
+
+  /* Theme toggle in mobile header */
+  .theme-toggle { display: flex !important; margin-left: 0; }
+  .theme-toggle button {
+    width: 32px; height: 32px; font-size: 15px;
+  }
 }
 </style>
 </head>
 <body>
 
 <header class="header-bar">
+  <button class="menu-btn" id="menuBtn" aria-label="菜单">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+  </button>
   <div class="brand">
     <h1>Wiki 知识库</h1>
     <span class="tagline">一人公司开发团队</span>
@@ -173,18 +313,60 @@ body {
     <span class="search-icon">&#x1F50D;</span>
     <input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
   </div>
+  <div class="theme-toggle">
+    <button class="theme-btn" id="themeBtn" title="切换深色/浅色主题"></button>
+  </div>
 </header>
 
+<!-- Mobile chip filter bar -->
+<div class="chip-bar">
+  <div class="chip-bar-inner" id="chipBar"></div>
+</div>
+
+<!-- Mobile drawer -->
+<div class="drawer-overlay" id="drawerOverlay">
+  <div class="drawer">
+    <div class="drawer-header">
+      <span style="font-weight:600;font-size:15px;">导航</span>
+      <button class="close-btn" id="drawerClose">&#x2715;</button>
+    </div>
+    <div id="drawerNav"></div>
+  </div>
+</div>
+
 <div class="layout">
   <nav class="sidebar" id="sidebar"></nav>
   <div class="main" id="main"></div>
 </div>
 
 <script>
+/* ===== Theme ===== */
+var htmlEl = document.documentElement;
+var themeBtn = document.getElementById('themeBtn');
+
+function setTheme(t) {
+  htmlEl.setAttribute('data-theme', t);
+  localStorage.setItem('wiki-theme', t);
+  themeBtn.textContent = t === 'dark' ? '☀️' : '🌙';
+}
+
+var saved = localStorage.getItem('wiki-theme');
+if (saved) {
+  setTheme(saved);
+} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  setTheme('dark');
+} else {
+  setTheme('light');
+}
+
+themeBtn.addEventListener('click', function() {
+  setTheme(htmlEl.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
+});
+
+/* ===== Wiki Data ===== */
 const wikiData = [
   {
-    dir: "身份认证与安全",
+    dir: "身份认证与安全", icon: "🔐",
-    icon: "&#x1F510;",
     desc: "统一身份认证、IAM 选型、零信任安全",
     color: "pink",
     items: [
@@ -194,8 +376,7 @@ const wikiData = [
     ]
   },
   {
-    dir: "IoT 与数据平台",
+    dir: "IoT 与数据平台", icon: "🏭",
-    icon: "&#x1F3ED;",
     desc: "物联网数据平台、IoT 架构、数据库迁移",
     color: "blue",
     items: [
@@ -207,8 +388,7 @@ const wikiData = [
     ]
   },
   {
-    dir: "电商与商业",
+    dir: "电商与商业", icon: "🛒",
-    icon: "&#x1F6D2;",
     desc: "电商系统、分销推广、商业模式",
     color: "mint",
     items: [
@@ -219,8 +399,7 @@ const wikiData = [
     ]
   },
   {
-    dir: "AI 开发工具",
+    dir: "AI 开发工具", icon: "🤖",
-    icon: "&#x1F916;",
     desc: "AI 辅助开发、代码分析、MCP 服务",
     color: "lavender",
     items: [
@@ -232,8 +411,7 @@ const wikiData = [
     ]
   },
   {
-    dir: "政务与行业",
+    dir: "政务与行业", icon: "🏛",
-    icon: "&#x1F3DB;",
     desc: "政府招投标、智慧监管、政策解读",
     color: "pink",
     items: [
@@ -242,8 +420,7 @@ const wikiData = [
     ]
   },
   {
-    dir: "配送与到家",
+    dir: "配送与到家", icon: "🚚",
-    icon: "&#x1F69A;",
     desc: "在线下单、配送调度、到家服务",
     color: "mint",
     items: [
@@ -256,7 +433,7 @@ const wikiData = [
 const allItems = [];
 for (const s of wikiData) {
   for (const item of s.items) {
-    allItems.push({ ...item, section: s.dir, icon: s.icon, desc: s.desc });
+    allItems.push(Object.assign({}, item, { section: s.dir, icon: s.icon, sectionDesc: s.desc }));
   }
 }
 
@@ -270,9 +447,27 @@ const badgeStyle = {
   lavender: 'background:#F9F0FF;color:#722ED1;border:1px solid #D3ADF7'
 };
 
-function buildSidebar() {
+/* Dark mode badge overrides */
-  const sidebar = document.getElementById('sidebar');
+function getBadgeColorVar(color) {
-  let html = '<div class="nav-section"><div class="nav-section-title">导航</div>';
+  const isDark = htmlEl.getAttribute('data-theme') === 'dark';
+  if (!isDark) return badgeStyle[color];
+  const darkMap = {
+    pink: 'background:rgba(235,47,150,0.15);color:#FF85C8;border:1px solid rgba(255,173,210,0.3)',
+    blue: 'background:rgba(22,119,255,0.15);color:#5CABFF;border:1px solid rgba(145,202,255,0.3)',
+    mint: 'background:rgba(82,196,26,0.15);color:#7BD950;border:1px solid rgba(183,235,143,0.3)',
+    lavender: 'background:rgba(114,46,209,0.15);color:#B47CFF;border:1px solid rgba(211,173,247,0.3)'
+  };
+  return darkMap[color] || darkMap.blue;
+}
+
+/* ===== Drawer ===== */
+var drawerEl = document.getElementById('drawerOverlay');
+document.getElementById('menuBtn').addEventListener('click', function() { drawerEl.classList.add('show'); });
+document.getElementById('drawerClose').addEventListener('click', function() { drawerEl.classList.remove('show'); });
+drawerEl.addEventListener('click', function(e) { if (e.target === drawerEl) drawerEl.classList.remove('show'); });
+
+function buildNav(targetEl) {
+  var html = '<div class="nav-section"><div class="nav-section-title">导航</div>';
   html += '<a class="nav-item' + (currentView === 'all' ? ' active' : '') + '" href="#" data-view="all"><span class="nav-icon">&#x1F3E0;</span><span>全部文档</span><span class="nav-count">' + allItems.length + '</span></a>';
   html += '</div>';
   for (const section of wikiData) {
@@ -284,18 +479,38 @@ function buildSidebar() {
     }
     html += '</div></div>';
   }
-  sidebar.innerHTML = html;
+  targetEl.innerHTML = html;
-  sidebar.querySelectorAll('.nav-item[data-view]').forEach(function(el) {
+  targetEl.querySelectorAll('.nav-item[data-view]').forEach(function(el) {
     el.addEventListener('click', function(e) {
       e.preventDefault();
+      currentView = el.dataset.view;
+      drawerEl.classList.remove('show');
+      render();
+    });
+  });
+}
+
+/* ===== Mobile Chips ===== */
+function buildChips() {
+  var bar = document.getElementById('chipBar');
+  var html = '<span class="chip' + (currentView === 'all' ? ' active' : '') + '" data-view="all">全部<span class="chip-count">' + allItems.length + '</span></span>';
+  for (const section of wikiData) {
+    html += '<span class="chip' + (currentView === section.dir ? ' active' : '') + '" data-view="' + section.dir + '">' + section.icon + ' ' + section.dir + '<span class="chip-count">' + section.items.length + '</span></span>';
+  }
+  bar.innerHTML = html;
+  bar.querySelectorAll('.chip').forEach(function(el) {
+    el.addEventListener('click', function() {
       currentView = el.dataset.view;
       render();
     });
   });
 }
 
+/* ===== Render ===== */
 function render() {
-  buildSidebar();
+  buildNav(document.getElementById('sidebar'));
+  buildNav(document.getElementById('drawerNav'));
+  buildChips();
   var main = document.getElementById('main');
   if (currentView === 'all') renderAllView(main);
   else renderSectionView(main);
@@ -313,7 +528,6 @@ function renderAllView(main) {
   html += '<div class="stat-item"><span class="stat-num">' + filtered.length + '</span><span class="stat-label">' + (searchQuery ? '搜索结果' : '当前展示') + '</span></div>';
   html += '</div>';
 
-  // Group cards by section
   for (const section of wikiData) {
     const items = searchQuery ? filtered.filter(function(i){ return i.section === section.dir; }) : section.items;
     if (!items.length) continue;
@@ -324,7 +538,7 @@ function renderAllView(main) {
       html += '<a class="all-card" href="' + item.path + '">';
       html += '<div class="card-title">' + item.title + '</div>';
       html += '<div class="card-desc">' + item.desc + '</div>';
-      html += '<div class="card-meta"><span class="card-badge" style="' + badgeStyle[section.color] + '">' + section.dir + '</span><span class="card-date">' + item.date + '</span></div>';
+      html += '<div class="card-meta"><span class="card-badge" style="' + getBadgeColorVar(section.color) + '">' + section.dir + '</span><span class="card-date">' + item.date + '</span></div>';
       html += '</a>';
     }
     html += '</div></div>';
@@ -367,6 +581,10 @@ document.getElementById('searchInput').addEventListener('input', function() {
   render();
 });
 
+/* Re-render on theme switch to update badge colors */
+var observer = new MutationObserver(function() { render(); });
+observer.observe(htmlEl, { attributes: true, attributeFilter: ['data-theme'] });
+
 render();
 </script>