From 75804f4c2eddf84d86da244b9ad538f8b0859678 Mon Sep 17 00:00:00 2001
From: litongtongxue <litongtongxue@gmail.com>
Date: Fri, 10 Oct 2025 02:06:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E4=BF=AE=E5=A4=8D=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E6=95=99=E7=A8=8B=E9=A1=B5=E9=9D=A2=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化按钮激活态在暗色模式下的视觉效果
- 修复所有提示框（info/success/warning）的暗色样式
- 增强文本对比度，提升可读性（标题/正文/辅助文本）
- 改进代码块在暗色模式下的边框和背景
- 修复 FAQ 折叠面板的暗色主题适配
- 保持玻璃态效果和响应式设计

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/admin-spa/src/views/TutorialView.vue | 850 ++++++++++++++++-------
 1 file changed, 607 insertions(+), 243 deletions(-)

diff --git a/web/admin-spa/src/views/TutorialView.vue b/web/admin-spa/src/views/TutorialView.vue
index c04959f7..f09bb163 100644
--- a/web/admin-spa/src/views/TutorialView.vue
+++ b/web/admin-spa/src/views/TutorialView.vue
@@ -14,15 +14,15 @@
 
     <!-- 系统选择标签 -->
     <div class="mb-4 sm:mb-8">
-      <div class="flex flex-wrap gap-1 rounded-xl bg-gray-100 p-1 dark:bg-gray-700 sm:gap-2 sm:p-2">
+      <div class="flex flex-wrap gap-1 rounded-xl bg-gray-100 p-1 dark:bg-gray-800 sm:gap-2 sm:p-2">
         <button
           v-for="system in tutorialSystems"
           :key="system.key"
           :class="[
             'flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-semibold transition-all duration-300 sm:gap-2 sm:px-6 sm:py-3 sm:text-sm',
             activeTutorialSystem === system.key
-              ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-800'
-              : 'text-gray-600 hover:bg-white/50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'
+              ? 'bg-white text-blue-600 shadow-sm dark:bg-blue-600 dark:text-white dark:shadow-blue-500/40'
+              : 'text-gray-600 hover:bg-white/50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white'
           ]"
           @click="activeTutorialSystem = system.key"
         >
@@ -50,25 +50,25 @@
         </p>
 
         <div
-          class="mb-4 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 sm:mb-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 dark:border-blue-500/40 dark:from-blue-950/30 dark:to-indigo-950/30 sm:mb-4 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fab fa-windows mr-2 text-blue-600" />
             Windows 安装方法
           </h5>
           <div class="mb-3 sm:mb-4">
-            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
+            <p class="mb-2 text-sm text-gray-700 dark:text-gray-300 sm:mb-3 sm:text-base">
               方法一：官网下载（推荐）
             </p>
             <ol
-              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-600 sm:ml-4 sm:space-y-2 sm:text-sm"
+              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-400 sm:ml-4 sm:space-y-2 sm:text-sm"
             >
               <li>
                 打开浏览器访问
                 <code
-                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-800 dark:text-yellow-400 sm:px-2 sm:text-sm"
                   >https://nodejs.org/</code
                 >
               </li>
@@ -76,7 +76,7 @@
               <li>
                 下载完成后双击
                 <code
-                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-800 dark:text-yellow-400 sm:px-2 sm:text-sm"
                   >.msi</code
                 >
                 文件
@@ -85,14 +85,14 @@
             </ol>
           </div>
           <div class="mb-3 sm:mb-4">
-            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
+            <p class="mb-2 text-sm text-gray-700 dark:text-gray-300 sm:mb-3 sm:text-base">
               方法二：使用包管理器
             </p>
             <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
               如果你安装了 Chocolatey 或 Scoop，可以使用命令行安装：
             </p>
             <div
-              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 dark:border dark:border-slate-700 dark:bg-slate-900 sm:p-4 sm:text-sm"
             >
               <div class="mb-2"># 使用 Chocolatey</div>
               <div class="whitespace-nowrap text-gray-300">choco install nodejs</div>
@@ -100,9 +100,13 @@
               <div class="whitespace-nowrap text-gray-300">scoop install nodejs</div>
             </div>
           </div>
-          <div class="rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">Windows 注意事项</h6>
-            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm sm:text-xs">
+          <div
+            class="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-500/40 dark:bg-blue-950/30 sm:p-4"
+          >
+            <h6 class="mb-2 text-sm font-medium text-blue-800 dark:text-blue-300 sm:text-base">
+              Windows 注意事项
+            </h6>
+            <ul class="space-y-1 text-xs text-blue-700 dark:text-blue-300 sm:text-sm sm:text-xs">
               <li>• 建议使用 PowerShell 而不是 CMD</li>
               <li>• 如果遇到权限问题，尝试以管理员身份运行</li>
               <li>• 某些杀毒软件可能会误报，需要添加白名单</li>
@@ -111,9 +115,13 @@
         </div>
 
         <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">验证安装是否成功</h6>
-          <p class="mb-2 text-xs text-green-700 sm:mb-3 sm:text-sm">
+        <div
+          class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+        >
+          <h6 class="mb-2 text-sm font-medium text-green-800 dark:text-green-300 sm:text-base">
+            验证安装是否成功
+          </h6>
+          <p class="mb-2 text-xs text-green-700 dark:text-green-300 sm:mb-3 sm:text-sm">
             安装完成后，打开 PowerShell 或 CMD，输入以下命令：
           </p>
           <div
@@ -122,7 +130,9 @@
             <div class="whitespace-nowrap text-gray-300">node --version</div>
             <div class="whitespace-nowrap text-gray-300">npm --version</div>
           </div>
-          <p class="mt-2 text-xs text-green-700 sm:text-sm">如果显示版本号，说明安装成功了！</p>
+          <p class="mt-2 text-xs text-green-700 dark:text-green-300 sm:text-sm">
+            如果显示版本号，说明安装成功了！
+          </p>
         </div>
       </div>
 
@@ -139,10 +149,10 @@
         </h4>
 
         <div
-          class="mb-4 rounded-xl border border-green-100 bg-gradient-to-r from-green-50 to-emerald-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-green-100 bg-gradient-to-r from-green-50 to-emerald-50 p-4 dark:border-green-500/40 dark:from-green-950/30 dark:to-emerald-950/30 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-download mr-2 text-green-600" />
             安装 Claude Code
@@ -162,9 +172,13 @@
             这个命令会从 npm 官方仓库下载并安装最新版本的 Claude Code。
           </p>
 
-          <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">提示</h6>
-            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm">
+          <div
+            class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-500/40 dark:bg-blue-950/30 sm:p-4"
+          >
+            <h6 class="mb-2 text-sm font-medium text-blue-800 dark:text-blue-300 sm:text-base">
+              提示
+            </h6>
+            <ul class="space-y-1 text-xs text-blue-700 dark:text-blue-300 sm:text-sm">
               <li>• 建议使用 PowerShell 而不是 CMD，功能更强大</li>
               <li>• 如果遇到权限问题，以管理员身份运行 PowerShell</li>
             </ul>
@@ -172,15 +186,19 @@
         </div>
 
         <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+        <div
+          class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
+          <p class="mb-3 text-sm text-green-700 dark:text-green-300">
+            安装完成后，输入以下命令检查是否安装成功：
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">claude --version</div>
           </div>
-          <p class="mt-2 text-sm text-green-700">
+          <p class="mt-2 text-sm text-green-700 dark:text-green-300">
             如果显示版本号，恭喜你！Claude Code 已经成功安装了。
           </p>
         </div>
@@ -199,10 +217,10 @@
         </h4>
 
         <div
-          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 dark:border-purple-500/40 dark:from-purple-950/30 dark:to-pink-950/30 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-cog mr-2 text-purple-600" />
             配置 Claude Code 环境变量
@@ -215,10 +233,12 @@
             <div
               class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
             >
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 方法一：PowerShell 临时设置（当前会话）
               </h6>
-              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                在 PowerShell 中运行以下命令：
+              </p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -229,7 +249,7 @@
                   $env:ANTHROPIC_AUTH_TOKEN = "你的API密钥"
                 </div>
               </div>
-              <p class="mt-2 text-xs text-yellow-700">
+              <p class="mt-2 text-xs text-yellow-700 dark:text-yellow-400">
                 💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
               </p>
             </div>
@@ -237,10 +257,10 @@
             <div
               class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
             >
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 方法二：PowerShell 永久设置（用户级）
               </h6>
-              <p class="mb-3 text-sm text-gray-600">
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
                 在 PowerShell 中运行以下命令设置用户级环境变量：
               </p>
               <div
@@ -257,7 +277,7 @@
                   "你的API密钥", [System.EnvironmentVariableTarget]::User)
                 </div>
               </div>
-              <p class="mb-3 text-sm text-gray-600">查看已设置的环境变量：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">查看已设置的环境变量：</p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -271,7 +291,7 @@
                   [System.EnvironmentVariableTarget]::User)
                 </div>
               </div>
-              <p class="mt-2 text-xs text-blue-700">
+              <p class="mt-2 text-xs text-blue-700 dark:text-blue-300">
                 💡 设置后需要重新打开 PowerShell 窗口才能生效。
               </p>
             </div>
@@ -279,21 +299,25 @@
         </div>
 
         <!-- VSCode 插件配置 -->
-        <div class="mt-6 rounded-lg border border-indigo-200 bg-indigo-50 p-3 sm:p-4">
+        <div
+          class="mt-6 rounded-lg border border-indigo-200 bg-indigo-50 p-3 dark:border-indigo-500/40 dark:bg-indigo-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-indigo-800 dark:text-indigo-300">
             VSCode Claude 插件配置
           </h6>
-          <p class="mb-3 text-sm text-indigo-700">
+          <p class="mb-3 text-sm text-indigo-700 dark:text-indigo-300">
             如果使用 VSCode 的 Claude 插件，需要在配置文件中进行设置：
           </p>
           <div class="mb-3 space-y-2">
-            <p class="text-sm text-indigo-700">
+            <p class="text-sm text-indigo-700 dark:text-indigo-300">
               <strong>配置文件位置：</strong>
-              <code class="rounded bg-indigo-100 px-1"
+              <code class="rounded bg-indigo-100 px-1 dark:bg-indigo-900"
                 >C:\Users\你的用户名\.claude\config.json</code
               >
             </p>
-            <p class="text-xs text-indigo-600">💡 如果该文件不存在，请手动创建。</p>
+            <p class="text-xs text-indigo-600 dark:text-indigo-400">
+              💡 如果该文件不存在，请手动创建。
+            </p>
           </div>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
@@ -305,15 +329,17 @@
         </div>
 
         <!-- 验证环境变量设置 -->
-        <div class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+        <div
+          class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-500/40 dark:bg-blue-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-blue-800 dark:text-blue-300">验证环境变量设置</h6>
-          <p class="mb-3 text-sm text-blue-700">
+          <p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
             设置完环境变量后，可以通过以下命令验证是否设置成功：
           </p>
 
           <div class="space-y-4">
             <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 在 PowerShell 中验证：
               </h6>
               <div
@@ -325,7 +351,7 @@
             </div>
 
             <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 在 CMD 中验证：
               </h6>
               <div
@@ -338,14 +364,14 @@
           </div>
 
           <div class="mt-3 space-y-2">
-            <p class="text-sm text-blue-700">
+            <p class="text-sm text-blue-700 dark:text-blue-300">
               <strong>预期输出示例：</strong>
             </p>
             <div class="rounded bg-gray-100 p-2 font-mono text-sm dark:bg-gray-700">
               <div>{{ currentBaseUrl }}</div>
               <div>cr_xxxxxxxxxxxxxxxxxx</div>
             </div>
-            <p class="text-xs text-blue-700">
+            <p class="text-xs text-blue-700 dark:text-blue-300">
               💡 如果输出为空或显示变量名本身，说明环境变量设置失败，请重新设置。
             </p>
           </div>
@@ -354,7 +380,7 @@
         <!-- Gemini CLI 环境变量设置 -->
         <div class="mt-8">
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-robot mr-2 text-green-600" />
             配置 Gemini CLI 环境变量
@@ -364,11 +390,15 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-green-200 bg-white p-3 dark:border-green-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 PowerShell 设置方法
               </h6>
-              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                在 PowerShell 中运行以下命令：
+              </p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -382,16 +412,20 @@
                   $env:GOOGLE_GENAI_USE_GCA = "true"
                 </div>
               </div>
-              <p class="mt-2 text-xs text-yellow-700">
+              <p class="mt-2 text-xs text-yellow-700 dark:text-yellow-400">
                 💡 使用与 Claude Code 相同的 API 密钥即可。
               </p>
             </div>
 
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-green-200 bg-white p-3 dark:border-green-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 PowerShell 永久设置（用户级）
               </h6>
-              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                在 PowerShell 中运行以下命令：
+              </p>
               <div
                 class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -410,16 +444,18 @@
                   [System.EnvironmentVariableTarget]::User)
                 </div>
               </div>
-              <p class="mt-2 text-xs text-blue-700">
+              <p class="mt-2 text-xs text-blue-700 dark:text-blue-300">
                 💡 设置后需要重新打开 PowerShell 窗口才能生效。
               </p>
             </div>
 
-            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+            <div
+              class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+            >
               <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
                 验证 Gemini CLI 环境变量
               </h6>
-              <p class="mb-3 text-sm text-green-700">在 PowerShell 中验证：</p>
+              <p class="mb-3 text-sm text-green-700 dark:text-green-300">在 PowerShell 中验证：</p>
               <div
                 class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -436,7 +472,7 @@
         <!-- Codex 环境变量设置 -->
         <div class="mt-8">
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-code mr-2 text-indigo-600" />
             配置 Codex 环境变量
@@ -446,11 +482,15 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
-              <p class="mb-3 text-sm text-yellow-700">
+            <div
+              class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-500/40 dark:bg-yellow-950/30 sm:p-4"
+            >
+              <h6 class="mb-2 font-medium text-yellow-800 dark:text-yellow-300">Codex 配置文件</h6>
+              <p class="mb-3 text-sm text-yellow-700 dark:text-yellow-300">
                 在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                <code class="rounded bg-yellow-100 px-1 dark:bg-yellow-900"
+                  >~/.codex/config.toml</code
+                >
                 文件开头添加以下配置：
               </p>
               <div
@@ -465,9 +505,11 @@
                   {{ line }}
                 </div>
               </div>
-              <p class="mt-3 text-sm text-yellow-700">
+              <p class="mt-3 text-sm text-yellow-700 dark:text-yellow-300">
                 在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                <code class="rounded bg-yellow-100 px-1 dark:bg-yellow-900"
+                  >~/.codex/auth.json</code
+                >
                 文件中配置API密钥：
               </p>
               <div
@@ -543,7 +585,7 @@
           开始使用 Claude Code
         </h4>
         <div
-          class="rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:p-6"
+          class="rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 dark:border-orange-500/40 dark:from-orange-950/30 dark:to-yellow-950/30 sm:p-6"
         >
           <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
             现在你可以开始使用 Claude Code 了！
@@ -551,7 +593,7 @@
 
           <div class="space-y-4">
             <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 启动 Claude Code
               </h6>
               <div
@@ -562,7 +604,7 @@
             </div>
 
             <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 在特定项目中使用
               </h6>
               <div
@@ -587,19 +629,21 @@
           Windows 常见问题解决
         </h4>
         <div class="space-y-4">
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               安装时提示 "permission denied" 错误
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">这通常是权限问题，尝试以下解决方法：</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>以管理员身份运行 PowerShell</li>
                 <li>
                   或者配置 npm 使用用户目录：<code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >npm config set prefix %APPDATA%\npm</code
                   >
                 </li>
@@ -607,13 +651,15 @@
             </div>
           </details>
 
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               PowerShell 执行策略错误
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">如果遇到执行策略限制，运行：</p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
@@ -625,19 +671,22 @@
             </div>
           </details>
 
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               环境变量设置后不生效
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">设置永久环境变量后需要：</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>重新启动 PowerShell 或 CMD</li>
                 <li>或者注销并重新登录 Windows</li>
                 <li>
-                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  验证设置：<code
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >echo $env:ANTHROPIC_BASE_URL</code
                   >
                 </li>
@@ -661,24 +710,26 @@
           >
           安装 Node.js 环境
         </h4>
-        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code 需要 Node.js 环境才能运行。</p>
+        <p class="mb-4 text-gray-600 dark:text-gray-400 sm:mb-6">
+          Claude Code 需要 Node.js 环境才能运行。
+        </p>
 
         <div
-          class="mb-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 dark:border-gray-700 dark:from-gray-800 dark:to-slate-800 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
-            <i class="fab fa-apple mr-2 text-gray-700" />
+            <i class="fab fa-apple mr-2 text-gray-700 dark:text-gray-400" />
             macOS 安装方法
           </h5>
           <div class="mb-4">
-            <p class="mb-3 text-gray-700">方法一：使用 Homebrew（推荐）</p>
+            <p class="mb-3 text-gray-700 dark:text-gray-300">方法一：使用 Homebrew（推荐）</p>
             <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
               如果你已经安装了 Homebrew，使用它安装 Node.js 会更方便：
             </p>
             <div
-              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 dark:border dark:border-slate-700 dark:bg-slate-900 sm:p-4 sm:text-sm"
             >
               <div class="mb-2"># 更新 Homebrew</div>
               <div class="whitespace-nowrap text-gray-300">brew update</div>
@@ -687,7 +738,7 @@
             </div>
           </div>
           <div class="mb-4">
-            <p class="mb-3 text-gray-700">方法二：官网下载</p>
+            <p class="mb-3 text-gray-700 dark:text-gray-300">方法二：官网下载</p>
             <ol
               class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-400 sm:ml-4 sm:space-y-2 sm:text-sm"
             >
@@ -710,12 +761,18 @@
               <li>按照安装程序指引完成安装</li>
             </ol>
           </div>
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-gray-800 sm:text-base">macOS 注意事项</h6>
-            <ul class="space-y-1 text-xs text-gray-700 sm:text-sm">
+          <div
+            class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-600 dark:bg-gray-800 sm:p-4"
+          >
+            <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
+              macOS 注意事项
+            </h6>
+            <ul class="space-y-1 text-xs text-gray-700 dark:text-gray-300 sm:text-sm">
               <li>
                 • 如果遇到权限问题，可能需要使用
-                <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">sudo</code>
+                <code class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
+                  >sudo</code
+                >
               </li>
               <li>• 首次运行可能需要在系统偏好设置中允许</li>
               <li>• 建议使用 Terminal 或 iTerm2</li>
@@ -724,16 +781,22 @@
         </div>
 
         <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+        <div
+          class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证安装是否成功</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，打开 Terminal，输入以下命令：</p>
+          <p class="mb-3 text-sm text-green-700 dark:text-green-300">
+            安装完成后，打开 Terminal，输入以下命令：
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">node --version</div>
             <div class="whitespace-nowrap text-gray-300">npm --version</div>
           </div>
-          <p class="mt-2 text-sm text-green-700">如果显示版本号，说明安装成功了！</p>
+          <p class="mt-2 text-sm text-green-700 dark:text-green-300">
+            如果显示版本号，说明安装成功了！
+          </p>
         </div>
       </div>
 
@@ -750,10 +813,10 @@
         </h4>
 
         <div
-          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 dark:border-purple-500/40 dark:from-purple-950/30 dark:to-pink-950/30 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-download mr-2 text-purple-600" />
             安装 Claude Code
@@ -769,7 +832,9 @@
               npm install -g @anthropic-ai/claude-code
             </div>
           </div>
-          <p class="mb-2 text-sm text-gray-600">如果遇到权限问题，可以使用 sudo：</p>
+          <p class="mb-2 text-sm text-gray-600 dark:text-gray-400">
+            如果遇到权限问题，可以使用 sudo：
+          </p>
           <div
             class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
           >
@@ -780,15 +845,19 @@
         </div>
 
         <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+        <div
+          class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
+          <p class="mb-3 text-sm text-green-700 dark:text-green-300">
+            安装完成后，输入以下命令检查是否安装成功：
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">claude --version</div>
           </div>
-          <p class="mt-2 text-sm text-green-700">
+          <p class="mt-2 text-sm text-green-700 dark:text-green-300">
             如果显示版本号，恭喜你！Claude Code 已经成功安装了。
           </p>
         </div>
@@ -807,10 +876,10 @@
         </h4>
 
         <div
-          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 dark:border-orange-500/40 dark:from-orange-950/30 dark:to-yellow-950/30 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-cog mr-2 text-orange-600" />
             配置 Claude Code 环境变量
@@ -820,11 +889,15 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-orange-200 bg-white p-3 dark:border-orange-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 方法一：临时设置（当前会话）
               </h6>
-              <p class="mb-3 text-sm text-gray-600">在 Terminal 中运行以下命令：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                在 Terminal 中运行以下命令：
+              </p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -835,16 +908,18 @@
                   export ANTHROPIC_AUTH_TOKEN="你的API密钥"
                 </div>
               </div>
-              <p class="mt-2 text-xs text-yellow-700">
+              <p class="mt-2 text-xs text-yellow-700 dark:text-yellow-400">
                 💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
               </p>
             </div>
 
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-orange-200 bg-white p-3 dark:border-orange-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 方法二：永久设置
               </h6>
-              <p class="mb-3 text-sm text-gray-600">
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
                 编辑你的 shell 配置文件（根据你使用的 shell）：
               </p>
               <div
@@ -876,19 +951,25 @@
         </div>
 
         <!-- VSCode 插件配置 (macOS) -->
-        <div class="mt-6 rounded-lg border border-indigo-200 bg-indigo-50 p-3 sm:p-4">
+        <div
+          class="mt-6 rounded-lg border border-indigo-200 bg-indigo-50 p-3 dark:border-indigo-500/40 dark:bg-indigo-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-indigo-800 dark:text-indigo-300">
             VSCode Claude 插件配置
           </h6>
-          <p class="mb-3 text-sm text-indigo-700">
+          <p class="mb-3 text-sm text-indigo-700 dark:text-indigo-300">
             如果使用 VSCode 的 Claude 插件，需要在配置文件中进行设置：
           </p>
           <div class="mb-3 space-y-2">
-            <p class="text-sm text-indigo-700">
+            <p class="text-sm text-indigo-700 dark:text-indigo-300">
               <strong>配置文件位置：</strong>
-              <code class="rounded bg-indigo-100 px-1">~/.claude/config.json</code>
+              <code class="rounded bg-indigo-100 px-1 dark:bg-indigo-900"
+                >~/.claude/config.json</code
+              >
+            </p>
+            <p class="text-xs text-indigo-600 dark:text-indigo-400">
+              💡 如果该文件不存在，请手动创建。
             </p>
-            <p class="text-xs text-indigo-600">💡 如果该文件不存在，请手动创建。</p>
           </div>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
@@ -902,7 +983,7 @@
         <!-- Gemini CLI 环境变量设置 -->
         <div class="mt-8">
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-robot mr-2 text-green-600" />
             配置 Gemini CLI 环境变量
@@ -912,11 +993,15 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-green-200 bg-white p-3 dark:border-green-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 Terminal 设置方法
               </h6>
-              <p class="mb-3 text-sm text-gray-600">在 Terminal 中运行以下命令：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                在 Terminal 中运行以下命令：
+              </p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -930,16 +1015,20 @@
                   export GOOGLE_GENAI_USE_GCA="true"
                 </div>
               </div>
-              <p class="mt-2 text-xs text-yellow-700">
+              <p class="mt-2 text-xs text-yellow-700 dark:text-yellow-400">
                 💡 使用与 Claude Code 相同的 API 密钥即可。
               </p>
             </div>
 
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-green-200 bg-white p-3 dark:border-green-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 永久设置方法
               </h6>
-              <p class="mb-3 text-sm text-gray-600">添加到你的 shell 配置文件：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                添加到你的 shell 配置文件：
+              </p>
               <div
                 class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -972,11 +1061,13 @@
               </div>
             </div>
 
-            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+            <div
+              class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+            >
               <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
                 验证 Gemini CLI 环境变量
               </h6>
-              <p class="mb-3 text-sm text-green-700">在 Terminal 中验证：</p>
+              <p class="mb-3 text-sm text-green-700 dark:text-green-300">在 Terminal 中验证：</p>
               <div
                 class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -991,7 +1082,7 @@
         <!-- Codex 环境变量设置 -->
         <div class="mt-8">
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-code mr-2 text-indigo-600" />
             配置 Codex 环境变量
@@ -1001,11 +1092,15 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
-              <p class="mb-3 text-sm text-yellow-700">
+            <div
+              class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-500/40 dark:bg-yellow-950/30 sm:p-4"
+            >
+              <h6 class="mb-2 font-medium text-yellow-800 dark:text-yellow-300">Codex 配置文件</h6>
+              <p class="mb-3 text-sm text-yellow-700 dark:text-yellow-300">
                 在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                <code class="rounded bg-yellow-100 px-1 dark:bg-yellow-900"
+                  >~/.codex/config.toml</code
+                >
                 文件开头添加以下配置：
               </p>
               <div
@@ -1020,9 +1115,11 @@
                   {{ line }}
                 </div>
               </div>
-              <p class="mt-3 text-sm text-yellow-700">
+              <p class="mt-3 text-sm text-yellow-700 dark:text-yellow-300">
                 在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                <code class="rounded bg-yellow-100 px-1 dark:bg-yellow-900"
+                  >~/.codex/auth.json</code
+                >
                 文件中配置API密钥：
               </p>
               <div
@@ -1098,7 +1195,7 @@
           开始使用 Claude Code
         </h4>
         <div
-          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 dark:border-yellow-500/40 dark:from-yellow-950/30 dark:to-amber-950/30 sm:p-6"
         >
           <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
             现在你可以开始使用 Claude Code 了！
@@ -1106,7 +1203,7 @@
 
           <div class="space-y-4">
             <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 启动 Claude Code
               </h6>
               <div
@@ -1117,7 +1214,7 @@
             </div>
 
             <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 在特定项目中使用
               </h6>
               <div
@@ -1142,23 +1239,26 @@
           macOS 常见问题解决
         </h4>
         <div class="space-y-4">
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               安装时提示权限错误
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">尝试以下解决方法：</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>
-                  使用 sudo 安装：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  使用 sudo 安装：<code
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >sudo npm install -g @anthropic-ai/claude-code</code
                   >
                 </li>
                 <li>
                   或者配置 npm 使用用户目录：<code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >npm config set prefix ~/.npm-global</code
                   >
                 </li>
@@ -1166,19 +1266,22 @@
             </div>
           </details>
 
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               macOS 安全设置阻止运行
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">如果系统阻止运行 Claude Code：</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>打开"系统偏好设置" → "安全性与隐私"</li>
                 <li>点击"仍要打开"或"允许"</li>
                 <li>
-                  或者在 Terminal 中运行：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  或者在 Terminal 中运行：<code
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >sudo spctl --master-disable</code
                   >
                 </li>
@@ -1186,19 +1289,22 @@
             </div>
           </details>
 
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               环境变量不生效
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">检查以下几点：</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>确认修改了正确的配置文件（.zshrc 或 .bash_profile）</li>
                 <li>重新启动 Terminal</li>
                 <li>
-                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  验证设置：<code
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >echo $ANTHROPIC_BASE_URL</code
                   >
                 </li>
@@ -1222,21 +1328,23 @@
           >
           安装 Node.js 环境
         </h4>
-        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code 需要 Node.js 环境才能运行。</p>
+        <p class="mb-4 text-gray-600 dark:text-gray-400 sm:mb-6">
+          Claude Code 需要 Node.js 环境才能运行。
+        </p>
 
         <div
-          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-red-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-red-50 p-4 dark:border-orange-500/40 dark:from-orange-950/30 dark:to-red-950/30 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fab fa-ubuntu mr-2 text-orange-600" />
             Linux 安装方法
           </h5>
           <div class="mb-4">
-            <p class="mb-3 text-gray-700">方法一：使用官方仓库（推荐）</p>
+            <p class="mb-3 text-gray-700 dark:text-gray-300">方法一：使用官方仓库（推荐）</p>
             <div
-              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 dark:border dark:border-slate-700 dark:bg-slate-900 sm:p-4 sm:text-sm"
             >
               <div class="mb-2"># 添加 NodeSource 仓库</div>
               <div class="whitespace-nowrap text-gray-300">
@@ -1247,12 +1355,12 @@
             </div>
           </div>
           <div class="mb-4">
-            <p class="mb-3 text-gray-700">方法二：使用系统包管理器</p>
+            <p class="mb-3 text-gray-700 dark:text-gray-300">方法二：使用系统包管理器</p>
             <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
               虽然版本可能不是最新的，但对于基本使用已经足够：
             </p>
             <div
-              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 dark:border dark:border-slate-700 dark:bg-slate-900 sm:p-4 sm:text-sm"
             >
               <div class="mb-2"># Ubuntu/Debian</div>
               <div class="whitespace-nowrap text-gray-300">sudo apt update</div>
@@ -1261,27 +1369,40 @@
               <div class="whitespace-nowrap text-gray-300">sudo dnf install nodejs npm</div>
             </div>
           </div>
-          <div class="rounded-lg border border-orange-200 bg-orange-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-orange-800 sm:text-base">Linux 注意事项</h6>
-            <ul class="space-y-1 text-xs text-orange-700 sm:text-sm">
+          <div
+            class="rounded-lg border border-orange-200 bg-orange-50 p-3 dark:border-orange-500/40 dark:bg-orange-950/30 sm:p-4"
+          >
+            <h6 class="mb-2 text-sm font-medium text-orange-800 dark:text-orange-300 sm:text-base">
+              Linux 注意事项
+            </h6>
+            <ul class="space-y-1 text-xs text-orange-700 dark:text-orange-300 sm:text-sm">
               <li>• 某些发行版可能需要安装额外的依赖</li>
-              <li>• 如果遇到权限问题，使用 <code class="rounded bg-orange-200 px-1">sudo</code></li>
+              <li>
+                • 如果遇到权限问题，使用
+                <code class="rounded bg-orange-200 px-1 dark:bg-orange-900">sudo</code>
+              </li>
               <li>• 确保你的用户在 npm 的全局目录有写权限</li>
             </ul>
           </div>
         </div>
 
         <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+        <div
+          class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证安装是否成功</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，打开终端，输入以下命令：</p>
+          <p class="mb-3 text-sm text-green-700 dark:text-green-300">
+            安装完成后，打开终端，输入以下命令：
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">node --version</div>
             <div class="whitespace-nowrap text-gray-300">npm --version</div>
           </div>
-          <p class="mt-2 text-sm text-green-700">如果显示版本号，说明安装成功了！</p>
+          <p class="mt-2 text-sm text-green-700 dark:text-green-300">
+            如果显示版本号，说明安装成功了！
+          </p>
         </div>
       </div>
 
@@ -1298,10 +1419,10 @@
         </h4>
 
         <div
-          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 dark:border-purple-500/40 dark:from-purple-950/30 dark:to-pink-950/30 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-download mr-2 text-purple-600" />
             安装 Claude Code
@@ -1317,7 +1438,9 @@
               npm install -g @anthropic-ai/claude-code
             </div>
           </div>
-          <p class="mb-2 text-sm text-gray-600">如果遇到权限问题，可以使用 sudo：</p>
+          <p class="mb-2 text-sm text-gray-600 dark:text-gray-400">
+            如果遇到权限问题，可以使用 sudo：
+          </p>
           <div
             class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
           >
@@ -1328,15 +1451,19 @@
         </div>
 
         <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+        <div
+          class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
+          <p class="mb-3 text-sm text-green-700 dark:text-green-300">
+            安装完成后，输入以下命令检查是否安装成功：
+          </p>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
             <div class="whitespace-nowrap text-gray-300">claude --version</div>
           </div>
-          <p class="mt-2 text-sm text-green-700">
+          <p class="mt-2 text-sm text-green-700 dark:text-green-300">
             如果显示版本号，恭喜你！Claude Code 已经成功安装了。
           </p>
         </div>
@@ -1355,10 +1482,10 @@
         </h4>
 
         <div
-          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 dark:border-orange-500/40 dark:from-orange-950/30 dark:to-yellow-950/30 sm:mb-6 sm:p-6"
         >
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-cog mr-2 text-orange-600" />
             配置 Claude Code 环境变量
@@ -1368,11 +1495,13 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-orange-200 bg-white p-3 dark:border-orange-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 方法一：临时设置（当前会话）
               </h6>
-              <p class="mb-3 text-sm text-gray-600">在终端中运行以下命令：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">在终端中运行以下命令：</p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -1383,16 +1512,18 @@
                   export ANTHROPIC_AUTH_TOKEN="你的API密钥"
                 </div>
               </div>
-              <p class="mt-2 text-xs text-yellow-700">
+              <p class="mt-2 text-xs text-yellow-700 dark:text-yellow-400">
                 💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
               </p>
             </div>
 
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-orange-200 bg-white p-3 dark:border-orange-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 方法二：永久设置
               </h6>
-              <p class="mb-3 text-sm text-gray-600">编辑你的 shell 配置文件：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">编辑你的 shell 配置文件：</p>
               <div
                 class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -1424,7 +1555,7 @@
         <!-- Gemini CLI 环境变量设置 -->
         <div class="mt-8">
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-robot mr-2 text-green-600" />
             配置 Gemini CLI 环境变量
@@ -1434,11 +1565,13 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-green-200 bg-white p-3 dark:border-green-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 终端设置方法
               </h6>
-              <p class="mb-3 text-sm text-gray-600">在终端中运行以下命令：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">在终端中运行以下命令：</p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -1452,16 +1585,20 @@
                   export GOOGLE_GENAI_USE_GCA="true"
                 </div>
               </div>
-              <p class="mt-2 text-xs text-yellow-700">
+              <p class="mt-2 text-xs text-yellow-700 dark:text-yellow-400">
                 💡 使用与 Claude Code 相同的 API 密钥即可。
               </p>
             </div>
 
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+            <div
+              class="rounded-lg border border-green-200 bg-white p-3 dark:border-green-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 永久设置方法
               </h6>
-              <p class="mb-3 text-sm text-gray-600">添加到你的 shell 配置文件：</p>
+              <p class="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                添加到你的 shell 配置文件：
+              </p>
               <div
                 class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -1494,11 +1631,13 @@
               </div>
             </div>
 
-            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+            <div
+              class="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-500/40 dark:bg-green-950/30 sm:p-4"
+            >
               <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
                 验证 Gemini CLI 环境变量
               </h6>
-              <p class="mb-3 text-sm text-green-700">在终端中验证：</p>
+              <p class="mb-3 text-sm text-green-700 dark:text-green-300">在终端中验证：</p>
               <div
                 class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
               >
@@ -1513,7 +1652,7 @@
         <!-- Codex 环境变量设置 -->
         <div class="mt-8">
           <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-200 sm:mb-3 sm:text-lg"
           >
             <i class="fas fa-code mr-2 text-indigo-600" />
             配置 Codex 环境变量
@@ -1523,11 +1662,15 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
-              <p class="mb-3 text-sm text-yellow-700">
+            <div
+              class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-500/40 dark:bg-yellow-950/30 sm:p-4"
+            >
+              <h6 class="mb-2 font-medium text-yellow-800 dark:text-yellow-300">Codex 配置文件</h6>
+              <p class="mb-3 text-sm text-yellow-700 dark:text-yellow-300">
                 在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                <code class="rounded bg-yellow-100 px-1 dark:bg-yellow-900"
+                  >~/.codex/config.toml</code
+                >
                 文件开头添加以下配置：
               </p>
               <div
@@ -1542,9 +1685,11 @@
                   {{ line }}
                 </div>
               </div>
-              <p class="mt-3 text-sm text-yellow-700">
+              <p class="mt-3 text-sm text-yellow-700 dark:text-yellow-300">
                 在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                <code class="rounded bg-yellow-100 px-1 dark:bg-yellow-900"
+                  >~/.codex/auth.json</code
+                >
                 文件中配置API密钥：
               </p>
               <div
@@ -1608,54 +1753,32 @@
         </div>
 
         <!-- VSCode 插件配置 (Linux) -->
-        <div class="mt-6 rounded-lg border border-indigo-200 bg-indigo-50 p-3 sm:p-4">
+        <div
+          class="mt-6 rounded-lg border border-indigo-200 bg-indigo-50 p-3 dark:border-indigo-500/40 dark:bg-indigo-950/30 sm:p-4"
+        >
           <h6 class="mb-2 font-medium text-indigo-800 dark:text-indigo-300">
             VSCode Claude 插件配置
           </h6>
-          <p class="mb-3 text-sm text-indigo-700">
-            如果使用 VSCode 的 Claude 插件，请在 VSCode 设置中为扩展添加以下环境变量：
+          <p class="mb-3 text-sm text-indigo-700 dark:text-indigo-300">
+            如果使用 VSCode 的 Claude 插件，需要在配置文件中进行设置：
           </p>
           <div class="mb-3 space-y-2">
-            <p class="text-sm text-indigo-700">
-              <strong>操作步骤：</strong>
-              打开 VSCode，依次选择「文件」→「首选项」→「设置」，搜索
-              <code class="rounded bg-indigo-100 px-1">Claude Code: Environment Variables</code>
-              并点击「在 settings.json 中编辑」。
+            <p class="text-sm text-indigo-700 dark:text-indigo-300">
+              <strong>配置文件位置：</strong>
+              <code class="rounded bg-indigo-100 px-1 dark:bg-indigo-900"
+                >~/.claude/config.json</code
+              >
             </p>
-            <p class="text-xs text-indigo-600">
-              💡 也可以直接编辑
-              <code class="rounded bg-indigo-100 px-1">~/.config/Code/User/settings.json</code>。
+            <p class="text-xs text-indigo-600 dark:text-indigo-400">
+              💡 如果该文件不存在，请手动创建。
             </p>
           </div>
           <div
             class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
           >
-            <div class="whitespace-nowrap text-gray-300">"claude-code.environmentVariables": [</div>
             <div class="whitespace-nowrap text-gray-300">{</div>
-            <div class="whitespace-nowrap text-gray-300">"name": "ANTHROPIC_BASE_URL",</div>
-            <div class="whitespace-nowrap text-gray-300">"value": "{{ currentBaseUrl }}"</div>
-            <div class="whitespace-nowrap text-gray-300">},</div>
-            <div class="whitespace-nowrap text-gray-300">{</div>
-            <div class="whitespace-nowrap text-gray-300">"name": "ANTHROPIC_AUTH_TOKEN",</div>
-            <div class="whitespace-nowrap text-gray-300">"value": "你的API密钥"</div>
+            <div class="whitespace-nowrap text-gray-300">"primaryApiKey": "crs"</div>
             <div class="whitespace-nowrap text-gray-300">}</div>
-            <div class="whitespace-nowrap text-gray-300">]</div>
-          </div>
-          <p class="mt-3 text-xs text-indigo-600">
-            💡 保存后重启 VSCode。如果仍提示 “Invalid API key”，请确认所填密钥有效且未过期。
-          </p>
-          <div class="mt-4 rounded-lg border border-indigo-200 bg-white p-3 sm:p-4">
-            <p class="mb-3 text-sm text-indigo-700">
-              需要在配置文件中<code class="rounded bg-indigo-100 px-1">~/.claude/config.json</code
-              >进行设置：
-            </p>
-            <div
-              class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-            >
-              <div class="whitespace-nowrap text-gray-300">{</div>
-              <div class="whitespace-nowrap text-gray-300">"primaryApiKey": "crs"</div>
-              <div class="whitespace-nowrap text-gray-300">}</div>
-            </div>
           </div>
         </div>
       </div>
@@ -1672,7 +1795,7 @@
           开始使用 Claude Code
         </h4>
         <div
-          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 dark:border-yellow-500/40 dark:from-yellow-950/30 dark:to-amber-950/30 sm:p-6"
         >
           <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
             现在你可以开始使用 Claude Code 了！
@@ -1680,7 +1803,7 @@
 
           <div class="space-y-4">
             <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 启动 Claude Code
               </h6>
               <div
@@ -1691,7 +1814,7 @@
             </div>
 
             <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-300 sm:text-base">
                 在特定项目中使用
               </h6>
               <div
@@ -1716,28 +1839,32 @@
           Linux 常见问题解决
         </h4>
         <div class="space-y-4">
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               安装时提示权限错误
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">尝试以下解决方法：</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>
-                  使用 sudo 安装：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  使用 sudo 安装：<code
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >sudo npm install -g @anthropic-ai/claude-code</code
                   >
                 </li>
                 <li>
                   或者配置 npm 使用用户目录：<code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >npm config set prefix ~/.npm-global</code
                   >
                 </li>
                 <li>
-                  然后添加到 PATH：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  然后添加到 PATH：<code
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >export PATH=~/.npm-global/bin:$PATH</code
                   >
                 </li>
@@ -1745,13 +1872,15 @@
             </div>
           </details>
 
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               缺少依赖库
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">某些 Linux 发行版需要安装额外依赖：</p>
               <div
                 class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
@@ -1766,22 +1895,27 @@
             </div>
           </details>
 
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
+          <details
+            class="rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
+          >
             <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4 sm:text-base"
             >
               环境变量不生效
             </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+            <div class="px-3 pb-3 text-gray-600 dark:text-gray-400 sm:px-4 sm:pb-4">
               <p class="mb-2">检查以下几点：</p>
               <ul class="list-inside list-disc space-y-1 text-sm">
                 <li>确认修改了正确的配置文件（.bashrc 或 .zshrc）</li>
                 <li>
                   重新启动终端或运行
-                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">source ~/.bashrc</code>
+                  <code class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
+                    >source ~/.bashrc</code
+                  >
                 </li>
                 <li>
-                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                  验证设置：<code
+                    class="rounded bg-gray-200 px-1 text-xs dark:bg-gray-700 sm:text-sm"
                     >echo $ANTHROPIC_BASE_URL</code
                   >
                 </li>
@@ -2006,4 +2140,234 @@ code {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
+
+/* 暗色主题优化 */
+/* 顶部标签栏背景 - 增加深度感 */
+html.dark :deep(.bg-gray-100) {
+  background-color: #1f2937 !important;
+  border: 1px solid rgba(75, 85, 99, 0.5);
+}
+
+html.dark :deep(.bg-gray-700) {
+  background-color: #1a202c !important;
+  border: 1px solid rgba(75, 85, 99, 0.6);
+}
+
+/* 活动标签页 - 更明显的对比和高亮 */
+html.dark :deep(button.bg-gray-800) {
+  background-color: #3b82f6 !important;
+  border: 1px solid rgba(59, 130, 246, 0.8);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
+  color: #ffffff !important;
+}
+
+/* 非活动标签页文字颜色优化 */
+html.dark :deep(button:not(.bg-gray-800).text-gray-600) {
+  color: #9ca3af !important;
+}
+
+html.dark :deep(button:not(.bg-gray-800).hover\:text-gray-900:hover) {
+  color: #d1d5db !important;
+}
+
+/* 代码块 - 减少纯黑，增加层次感 */
+html.dark :deep(.bg-gray-900) {
+  background-color: #1e293b !important;
+  border: 1px solid rgba(71, 85, 105, 0.6);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* 优化链接颜色 - 更亮更突出 */
+html.dark :deep(a) {
+  color: #60a5fa !important;
+  text-decoration: underline;
+}
+
+html.dark :deep(a:hover) {
+  color: #93c5fd !important;
+}
+
+/* 行内代码样式优化 */
+html.dark :deep(code.rounded) {
+  background-color: #334155 !important;
+  border: 1px solid rgba(100, 116, 139, 0.6);
+  color: #fbbf24 !important;
+  padding: 0.125rem 0.375rem;
+}
+
+/* 注意事项框 - 蓝色系列 */
+html.dark :deep(.border-blue-200) {
+  border-color: rgba(59, 130, 246, 0.5) !important;
+}
+
+html.dark :deep(.bg-blue-50) {
+  background-color: rgba(37, 99, 235, 0.15) !important;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+/* 成功提示框 - 绿色系列 */
+html.dark :deep(.border-green-200) {
+  border-color: rgba(34, 197, 94, 0.5) !important;
+}
+
+html.dark :deep(.bg-green-50) {
+  background-color: rgba(34, 197, 94, 0.15) !important;
+  border: 1px solid rgba(34, 197, 94, 0.3);
+}
+
+/* 警告提示框 - 黄色系列 */
+html.dark :deep(.border-yellow-200) {
+  border-color: rgba(250, 204, 21, 0.5) !important;
+}
+
+html.dark :deep(.bg-yellow-50) {
+  background-color: rgba(250, 204, 21, 0.15) !important;
+  border: 1px solid rgba(250, 204, 21, 0.3);
+}
+
+/* Indigo 提示框 */
+html.dark :deep(.border-indigo-200) {
+  border-color: rgba(99, 102, 241, 0.5) !important;
+}
+
+html.dark :deep(.bg-indigo-50) {
+  background-color: rgba(99, 102, 241, 0.15) !important;
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+
+/* Purple 提示框 */
+html.dark :deep(.border-purple-200) {
+  border-color: rgba(168, 85, 247, 0.5) !important;
+}
+
+/* 渐变背景优化 */
+html.dark :deep(.from-purple-50) {
+  background: linear-gradient(
+    to right,
+    rgba(168, 85, 247, 0.15),
+    rgba(236, 72, 153, 0.15)
+  ) !important;
+  border: 1px solid rgba(168, 85, 247, 0.3);
+}
+
+html.dark :deep(.from-blue-50) {
+  background: linear-gradient(
+    to right,
+    rgba(59, 130, 246, 0.15),
+    rgba(99, 102, 241, 0.15)
+  ) !important;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+html.dark :deep(.from-green-50) {
+  background: linear-gradient(
+    to right,
+    rgba(34, 197, 94, 0.15),
+    rgba(16, 185, 129, 0.15)
+  ) !important;
+  border: 1px solid rgba(34, 197, 94, 0.3);
+}
+
+/* 文字对比度优化 - 提高可读性 */
+html.dark :deep(.text-gray-400) {
+  color: #9ca3af !important;
+}
+
+html.dark :deep(.text-gray-600) {
+  color: #d1d5db !important;
+}
+
+html.dark :deep(.text-gray-700) {
+  color: #e5e7eb !important;
+}
+
+html.dark :deep(.text-gray-800) {
+  color: #f3f4f6 !important;
+}
+
+/* 彩色文字优化 - 提高亮度 */
+html.dark :deep(.text-blue-600) {
+  color: #60a5fa !important;
+}
+
+html.dark :deep(.text-blue-700) {
+  color: #60a5fa !important;
+}
+
+html.dark :deep(.text-blue-800) {
+  color: #93c5fd !important;
+}
+
+html.dark :deep(.text-green-700) {
+  color: #4ade80 !important;
+}
+
+html.dark :deep(.text-green-800) {
+  color: #86efac !important;
+}
+
+html.dark :deep(.text-yellow-700) {
+  color: #facc15 !important;
+}
+
+html.dark :deep(.text-yellow-800) {
+  color: #fde047 !important;
+}
+
+html.dark :deep(.text-indigo-700) {
+  color: #818cf8 !important;
+}
+
+html.dark :deep(.text-indigo-800) {
+  color: #a5b4fc !important;
+}
+
+/* 标题对比度优化 */
+html.dark :deep(h3),
+html.dark :deep(h4),
+html.dark :deep(h5),
+html.dark :deep(h6) {
+  color: #f9fafb !important;
+}
+
+/* 内嵌背景色优化 */
+html.dark :deep(.bg-yellow-100) {
+  background-color: rgba(250, 204, 21, 0.2) !important;
+}
+
+html.dark :deep(.bg-indigo-100) {
+  background-color: rgba(99, 102, 241, 0.2) !important;
+}
+
+/* 白色背景框体优化 - 选中的标签页 */
+html.dark :deep(.bg-white) {
+  background-color: #374151 !important;
+  border: 1px solid rgba(107, 114, 128, 0.5);
+}
+
+/* 边框颜色统一优化 */
+html.dark :deep(.border-purple-700) {
+  border-color: rgba(168, 85, 247, 0.6) !important;
+}
+
+html.dark :deep(.border-blue-100) {
+  border-color: rgba(59, 130, 246, 0.4) !important;
+}
+
+html.dark :deep(.border-green-100) {
+  border-color: rgba(34, 197, 94, 0.4) !important;
+}
+
+html.dark :deep(.border-purple-100) {
+  border-color: rgba(168, 85, 247, 0.4) !important;
+}
+
+/* 代码块内文字颜色优化 */
+html.dark :deep(.text-green-400) {
+  color: #4ade80 !important;
+}
+
+html.dark :deep(.text-gray-300) {
+  color: #d1d5db !important;
+}
 </style>