Implement dark mode styles and toggle functionality

docs/index.html

@@ -4,78 +4,58 @@
   <meta charset="UTF-8" />
   <title>Vibe Coding 101</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css" />
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css" />
   <style>
-    .github-corner:hover .octo-arm {
+    /* --- 样式保持不变 --- */
-      animation: octocat-wave 560ms ease-in-out;
+    .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; }
-    }
+    @keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } }
-    @keyframes octocat-wave {
+    @media (max-width: 500px) { .github-corner:hover .octo-arm { animation: none; } .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out; } }
-      0%,
-      100% {
-        transform: rotate(0);
-      }
-      20%,
-      60% {
-        transform: rotate(-25deg);
-      }
-      40%,
-      80% {
-        transform: rotate(10deg);
-      }
-    }
-    @media (max-width: 500px) {
-      .github-corner:hover .octo-arm {
-        animation: none;
-      }
-      .github-corner .octo-arm {
-        animation: octocat-wave 560ms ease-in-out;
-      }
-    }
 
+    :root { --sidebar-width: 230px; --sidebar-padding: 12px 24px; --theme-color: #42b983; }
+    .markdown-section { padding: 24px 40px 40px 24px; }
+    .sidebar-nav ul { list-style-type: none; }
+    .app-sub-sidebar li { list-style-type: none !important; }
+    .app-sub-sidebar li::before { content: none !important; }
+
+    /* --- 暗黑模式样式 --- */
     :root {
-      --sidebar-width: 230px;
+        --dark-bg: #1a1a1a;
-      --sidebar-padding: 12px 24px;
+        --dark-sidebar: #141414;
+        --dark-border: #333;
+        --dark-text: #e6e6e6;
+        --dark-code-text: #f8f8f2;
+        --dark-code-bg: #2b2b2b;
     }
+    body.dark-mode { background-color: var(--dark-bg); color: var(--dark-text); }
+    body.dark-mode .sidebar { background-color: var(--dark-sidebar); border-right: 1px solid var(--dark-border); color: var(--dark-text); }
+    body.dark-mode .sidebar-nav li a { color: #999; }
+    body.dark-mode .sidebar-nav li.active > a { color: var(--theme-color); border-right: 2px solid var(--theme-color); }
+    body.dark-mode .search { border-bottom: 1px solid var(--dark-border); }
+    body.dark-mode .search input { background-color: transparent; color: var(--dark-text); }
+    body.dark-mode .results-panel { background-color: var(--dark-bg); color: var(--dark-text); }
+    body.dark-mode .matching-post { border-bottom: 1px solid var(--dark-border); }
+    body.dark-mode .matching-post h2, body.dark-mode .matching-post p { color: var(--dark-text); }
+    body.dark-mode pre { background-color: var(--dark-code-bg) !important; }
+    body.dark-mode code { background-color: var(--dark-code-bg) !important; color: var(--dark-code-text) !important; }
+    body.dark-mode .markdown-section code { color: #f08d49; background-color: rgba(255,255,255,0.1); }
+    body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #ffffff; }
+    body.dark-mode blockquote { color: #b0b0b0; background: rgba(255,255,255,0.05); border-left-color: var(--theme-color); }
+    body.dark-mode strong { color: #fff; }
+    body.dark-mode .markdown-section tr:nth-child(2n) { background-color: rgba(255,255,255,0.03); }
+    body.dark-mode .markdown-section td, body.dark-mode .markdown-section th { border-color: var(--dark-border); }
 
-    .markdown-section {
+    .sidebar-toggle-btn { cursor: pointer; display: block; text-align: center; padding: 10px 0; margin: 0 15px 10px 15px; font-weight: bold; font-size: 14px; border-radius: 4px; background-color: rgba(0,0,0,0.05); color: #505d6b; border: 1px solid rgba(0,0,0,0.05); transition: all 0.3s; }
-      padding: 24px 40px 40px 24px;
+    body.dark-mode .sidebar-toggle-btn { background-color: rgba(255,255,255,0.1); color: #ccc; border: 1px solid #444; }
-    }
+    .sidebar-toggle-btn:hover { background-color: var(--theme-color); color: white; }
-
-    .sidebar-nav ul {
-      list-style-type: none;
-    }
-
-    .app-sub-sidebar li {
-      list-style-type: none !important;
-    }
-
-    .app-sub-sidebar li::before {
-      content: none !important;
-    }
   </style>
 </head>
 <body>
   <div id="app"></div>
   <a href="https://github.com/datawhalechina/vibe-coding" class="github-corner" aria-label="View source on GitHub">
-    <svg
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill: #64ceaa; color: #fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
-      width="80"
-      height="80"
-      viewBox="0 0 250 250"
-      style="fill: #64ceaa; color: #fff; position: absolute; top: 0; border: 0; right: 0;"
-      aria-hidden="true"
-    >
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-      <path
+      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.9,120.9 152.7,125.1 L141.0,136.9 C139.8,138.0 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
-        fill="currentColor"
-        style="transform-origin: 130px 106px;"
-        class="octo-arm"
-      ></path>
-      <path
-        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.9,120.9 152.7,125.1 L141.0,136.9 C139.8,138.0 141.6,141.9 141.8,141.8 Z"
-        fill="currentColor"
-        class="octo-body"
-      ></path>
     </svg>
   </a>
   <script>
@@ -83,11 +63,27 @@
       name: 'Vibe Coding 101',
       repo: '',
       loadSidebar: true,
+      
+      // --- 核心修复：禁用了 relativePath ---
+      // 开启这个通常会导致搜索插件在解析 _sidebar.md 里的路径时出错
+      // relativePath: true, 
+
       alias: {
         '/.*/_sidebar.md': '/_sidebar.md'
       },
       subMaxLevel: 2,
       homepage: 'README.md',
+      
+      // --- 搜索配置 ---
+      search: {
+        maxAge: 0,        // 调试期间建议设为 0，防止缓存干扰
+        paths: 'auto',    
+        placeholder: '🔍 搜索',
+        noData: '😞 找不到结果',
+        depth: 6,
+        namespace: 'vibe-coding-search'
+      },
+
       pagination: {
         previousText: '上一页',
         nextText: '下一页',
@@ -105,6 +101,28 @@
         isExpected: true
       },
       plugins: [
+        function(hook, vm) {
+          hook.doneEach(function() {
+            const sidebar = document.querySelector('.sidebar-nav');
+            if (!sidebar || document.querySelector('.sidebar-toggle-btn')) return;
+            const btn = document.createElement('div');
+            btn.className = 'sidebar-toggle-btn';
+            const savedTheme = localStorage.getItem('theme-mode');
+            if (savedTheme === 'dark') {
+              document.body.classList.add('dark-mode');
+              btn.textContent = '🌙 Switch to Light';
+            } else {
+              btn.textContent = '☀️ Switch to Dark';
+            }
+            btn.onclick = function() {
+              document.body.classList.toggle('dark-mode');
+              const isDark = document.body.classList.contains('dark-mode');
+              localStorage.setItem('theme-mode', isDark ? 'dark' : 'light');
+              btn.textContent = isDark ? '🌙 Switch to Light' : '☀️ Switch to Dark';
+            };
+            sidebar.insertBefore(btn, sidebar.firstChild);
+          });
+        },
         function (hook, vm) {
           hook.doneEach(function () {
             setTimeout(function () {
@@ -124,7 +142,10 @@
       ]
     };
   </script>
-  <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
+  
+  <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+
   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
   <script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-bash.min.js"></script>