diff --git a/docs/updater-plan.md b/docs/updater-plan.md
new file mode 100644
index 0000000..b182d6f
--- /dev/null
+++ b/docs/updater-plan.md
@@ -0,0 +1,209 @@
+# 更新功能开发计划（Tauri v2 Updater）
+
+> 目标：为桌面应用（macOS `.app`、Windows）集成并验证基于 Tauri v2 官方 Updater 插件的自动更新能力，覆盖版本检测、下载、安装与重启的完整闭环，并建立可复用的发布与测试流程。
+
+## 一、范围与目标
+- 核心能力：
+  - 检查更新 → 下载 → 安装 → 应用重启。
+  - 支持静态 JSON 与动态接口两种更新源。
+  - 版本通道（stable/beta）与运行时切换端点（可选）。
+- 平台覆盖：
+  - macOS `.app`（优先级高）。
+  - Windows（推荐安装器路径 NSIS/MSI；便携版说明限制）。
+- 安全要求：
+  - Updater 更新签名（Ed25519）强制开启：客户端 `pubkey` 校验服务端签名。
+  - 不强制平台代码签名（macOS/Windows），但建议上线前完善。
+
+## 二、方案概述
+- 插件：`tauri-plugin-updater`（Rust/JS 双端 API），前端重启依赖 `@tauri-apps/plugin-process`。
+- 核心配置：
+  - `src-tauri/tauri.conf.json`
+    - `bundle.createUpdaterArtifacts: true`
+    - `plugins.updater.pubkey: "<PUBLICKEY.PEM 内容>"`
+    - `plugins.updater.endpoints: ["<更新源 URL 列表>"]`
+    - Windows 可选：`plugins.updater.windows.installMode: "passive|basicUi|quiet"`
+  - `src-tauri/capabilities/default.json` 增加：`"updater:default"`
+- 构建与签名：
+  - 生成密钥：`tauri signer generate` → 注入构建环境变量 `TAURI_SIGNING_PRIVATE_KEY`（及可选密码）。
+  - 构建产出带签名的更新制品（各平台包 + sig）。
+
+## 三、交付物
+- 可运行的自动更新能力（含前端触发入口与进度反馈）。
+- 配置完善：`tauri.conf.json`、`capabilities/default.json`、插件初始化。
+- 本地更新测试用 `latest.json` 模板与脚本（或说明）。
+- 文档：
+  - 更新源格式说明（静态/动态）。
+  - 发布与回滚操作说明。
+  - 常见问题排查清单。
+
+## 四、里程碑与任务拆解
+1) 准备与密钥
+- 生成更新签名密钥对（Ed25519）。
+- 将公钥填入 `plugins.updater.pubkey`，在构建环境配置 `TAURI_SIGNING_PRIVATE_KEY`。
+
+2) 插件集成（Rust 侧）
+- 注册插件：`tauri_plugin_updater::Builder::new().build()`。
+- 可选：在 `setup` 中后台自动检查与安装；或暴露 `invoke` 命令由前端驱动。
+- 可选：`updater_builder()` 覆盖网络参数（超时/代理/headers）与动态端点。
+
+3) 前端接入（Renderer）
+- 依赖：`@tauri-apps/plugin-updater`、`@tauri-apps/plugin-process`。
+- 提供“检查更新”入口：显示当前版本、可用版本、更新日志。
+- 进度反馈：`downloadAndInstall` 回调显示 Started/Progress/Finished。
+- 成功后调用 `relaunch()`（或 Rust 侧 `app.restart()`）。
+
+4) 配置与权限
+- `tauri.conf.json`：`createUpdaterArtifacts`、`pubkey`、`endpoints`、Windows `installMode`（如需）。
+- `capabilities/default.json`：加入 `"updater:default"`。
+
+5) 更新源与产物
+- 静态 JSON（`latest.json`）模板：
+  - `version`、`notes`、`pub_date`（可选），`platforms[target].url` 与 `platforms[target].signature`（必填，signature 为 `.sig` 内容）。
+- 动态 API：
+  - 无更新返回 HTTP 204；有更新返回 200 + `{ version, url, signature, notes?, pub_date? }`。
+- 产物托管：
+  - 本地 HTTP 服务器（开发自测）或 GitHub Releases/CDN（准生产）。
+
+6) 测试计划
+- 基线用例：
+  - 发现更新 → 下载 → 安装 → 重启 → 版本号提升。
+  - 无更新（204）提示“已是最新”。
+  - 签名不匹配拒绝更新（安全校验）。
+  - 网络超时/失败的错误提示与恢复。
+- 平台专项：
+  - macOS：`~/Applications` 与 `/Applications` 两种放置；无苹果账号情况下的 Gatekeeper 行为提示。
+  - Windows：安装器三种 `installMode`；便携版在用户可写目录的可行性验证与限制说明（文件锁/提权）。
+- 自测步骤（本地静态 JSON）：
+  - 用 v1.0.0 作为“已安装版本”，构建 v1.0.1 更新产物与 `.sig`。
+  - 生成 `latest.json`，启动本地 HTTP（如 `npx http-server`）。
+  - 旧版应用中点击“检查更新”并验证完整流程。
+
+7) 发布与回滚
+- 发布：
+  - 通过 CI 生成更新产物与签名，上传到 Release/CDN。
+  - 产物与 `latest.json` 上传至 Releases/CDN（或刷新动态接口数据）。
+- 回滚：
+  - 撤回最新产物；或将 `latest.json` 指向上一个稳定版本。
+  - 如允许降级，Rust 侧定制 `version_comparator`。
+
+8) 文档与移交
+- 更新源格式说明、运维手册、常见问题排查（见下文附录）。
+
+## 五、配置清单（示例）
+- `src-tauri/tauri.conf.json` 关键片段：
+```json
+{
+  "bundle": { "createUpdaterArtifacts": true },
+  "plugins": {
+    "updater": {
+      "pubkey": "<PUBLICKEY.PEM 内容>",
+      "endpoints": [
+        "https://releases.example.com/{{target}}/{{arch}}/{{current_version}}",
+        "https://github.com/org/repo/releases/latest/download/latest.json"
+      ],
+      "windows": { "installMode": "passive" }
+    }
+  }
+}
+```
+- `src-tauri/capabilities/default.json`：
+```json
+{
+  "permissions": [
+    "updater:default"
+  ]
+}
+```
+
+## 六、前端最小用例（伪代码）
+```ts
+import { check } from '@tauri-apps/plugin-updater'
+import { relaunch } from '@tauri-apps/plugin-process'
+
+export async function runUpdateFlow() {
+  const update = await check({ timeout: 30000 })
+  if (!update) return { status: 'up-to-date' }
+
+  let downloaded = 0
+  let total = 0
+  await update.downloadAndInstall((e) => {
+    switch (e.event) {
+      case 'Started': total = e.data.contentLength ?? 0; break
+      case 'Progress': downloaded += e.data.chunkLength; break
+    }
+  })
+
+  await relaunch()
+}
+```
+
+## 七、更新源样例
+- 静态 `latest.json`：
+```json
+{
+  "version": "1.0.1",
+  "notes": "Bug fixes and performance improvements",
+  "pub_date": "2025-01-01T10:00:00Z",
+  "platforms": {
+    "darwin-aarch64": { "url": "https://cdn/app-1.0.1-darwin-aarch64.tar.gz", "signature": "<sig 内容>" },
+    "windows-x86_64": { "url": "https://cdn/app-1.0.1-x86_64.zip", "signature": "<sig 内容>" }
+  }
+}
+```
+- 动态接口（有更新返回 200）：
+```json
+{ "version": "1.0.1", "url": "https://cdn/app-1.0.1.zip", "signature": "<sig>", "notes": "..." }
+```
+- 无更新返回：HTTP 204 No Content。
+
+## 八、平台差异与限制
+- macOS `.app`：
+  - 支持直接替换更新；若位于 `/Applications` 且需要管理员权限可能失败（Updater 不主动提权）。建议用户安装到 `~/Applications`。
+  - 无苹果开发者账号也可测试 Updater，但分发会触发 Gatekeeper 警告（建议正式版走代码签名+公证）。
+- Windows：
+  - 强烈建议安装器（NSIS/MSI），Updater 会下载并运行安装器，`installMode` 控制交互程度。
+  - 便携版（绿色版）不稳定：运行中无法覆盖自身文件、缺乏提权与回滚；如必须使用，需将应用放到可写目录并设计辅助替换流程（本计划不默认实现）。
+
+## 九、测试用例清单
+- 功能流转：有更新/无更新/下载中断/重试/安装后重启成功。
+- 安全校验：签名错误与端点被劫持时应拒绝更新。
+- 网络异常：超时、代理、断网时的提示与恢复路径。
+- 平台行为：
+  - macOS：不同安装路径权限导致的成功/失败覆盖。
+  - Windows：`passive|basicUi|quiet` 下安装器行为；便携版在用户可写目录的替换验证（若执行）。
+
+## 十、发布与运维
+- 发布流水线（建议 CI）：
+  - 设置 `TAURI_SIGNING_PRIVATE_KEY`（机密变量）。
+  - 构建生成各平台更新产物与签名。
+  - 产物与 `latest.json` 上传至 Releases/CDN（或刷新动态接口数据）。
+- 回滚策略：
+  - 撤回最新产物；或将 `latest.json` 指向上一个稳定版本。
+  - 如允许降级，Rust 侧定制 `version_comparator`。
+
+## 十一、时间排期（参考）
+- D1：密钥与基础集成（插件/配置/权限）。
+- D2：前端入口与进度 UI、静态 JSON 本地自测通过。
+- D3：GitHub Releases/CDN 端到端验证、平台专项测试。
+- D4：文档完善、回滚与异常流程演练、准备上线。
+
+## 十二、验收标准
+- 基线流转：在两平台完成“发现→下载→安装→重启→版本提升”。
+- 安全：签名校验生效，签名不匹配拒绝更新。
+- 文档：更新源规范、操作手册、排障清单齐备。
+- 稳定性：网络异常与常见权限问题有明确用户提示与可行恢复路径。
+
+---
+
+### 附录 A：常见问题排查
+- “未发现更新”：确认 `version` 更大、端点可达、HTTP 返回码（204/200）。
+- “签名校验失败”：`pubkey` 与私钥不匹配；`signature` 必须是 `.sig` 文件内容。
+- “下载/超时失败”：增加 `timeout`、检查代理/证书、重试策略与提示。
+- “macOS 更新失败”：检查安装路径是否需要管理员权限；建议 `~/Applications`。
+- “Windows 便携版覆盖失败”：可写权限/进程占用/缺少提权，优先改为安装器分发。
+
+### 附录 B：后续可选优化
+- 渠道支持（stable/beta）与 UI 切换。
+- 增量发布策略与 CDN 缓存优化。
+- 远程开关与灰度比例控制（动态接口）。
+- 统一 Telemetry：下载失败率、平均时延、更新成功率统计。
diff --git a/src/App.tsx b/src/App.tsx
index 4f129cc..fb3ceb8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,9 +7,12 @@ import EditProviderModal from "./components/EditProviderModal";
 import { ConfirmDialog } from "./components/ConfirmDialog";
 import { AppSwitcher } from "./components/AppSwitcher";
 import SettingsModal from "./components/SettingsModal";
-import { Plus, Settings } from "lucide-react";
+import { Plus, Settings, Moon, Sun } from "lucide-react";
+import { buttonStyles } from "./lib/styles";
+import { useDarkMode } from "./hooks/useDarkMode";
 
 function App() {
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
   const [activeApp, setActiveApp] = useState<AppType>("claude");
   const [providers, setProviders] = useState<Record<string, Provider>>({});
   const [currentProviderId, setCurrentProviderId] = useState<string>("");
@@ -202,17 +205,24 @@ function App() {
 
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
+    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-950">
       {/* Linear 风格的顶部导航 */}
-      <header className="bg-white border-b border-gray-200 px-6 py-4">
+      <header className="bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-800 px-6 py-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h1 className="text-xl font-semibold text-blue-500">
+            <h1 className="text-xl font-semibold text-blue-500 dark:text-blue-400">
               CC Switch
             </h1>
+            <button
+              onClick={toggleDarkMode}
+              className={buttonStyles.icon}
+              title={isDarkMode ? "切换到亮色模式" : "切换到暗色模式"}
+            >
+              {isDarkMode ? <Sun size={18} /> : <Moon size={18} />}
+            </button>
             <button
               onClick={() => setIsSettingsOpen(true)}
-              className="p-1.5 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-md transition-all"
+              className={buttonStyles.icon}
               title="设置"
             >
               <Settings size={18} />
@@ -224,7 +234,7 @@ function App() {
 
             <button
               onClick={() => setIsAddModalOpen(true)}
-              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium"
+              className={`inline-flex items-center gap-2 ${buttonStyles.primary}`}
             >
               <Plus size={16} />
               添加供应商
diff --git a/src/components/ProviderList.tsx b/src/components/ProviderList.tsx
index 951afe3..6f94313 100644
--- a/src/components/ProviderList.tsx
+++ b/src/components/ProviderList.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Provider } from "../types";
 import { Play, Edit3, Trash2, CheckCircle2, Users } from "lucide-react";
+import { buttonStyles, cardStyles, badgeStyles, cn } from "../lib/styles";
 
 interface ProviderListProps {
   providers: Record<string, Provider>;
@@ -88,11 +89,9 @@ const ProviderList: React.FC<ProviderListProps> = ({
             return (
               <div
                 key={provider.id}
-                className={`bg-white rounded-lg border p-4 transition-all duration-200 ${
-                  isCurrent
-                    ? "border-blue-500 ring-1 ring-blue-500/20 bg-blue-500/5"
-                    : "border-gray-200 hover:border-gray-300 hover:shadow-sm"
-                }`}
+                className={cn(
+                  isCurrent ? cardStyles.selected : cardStyles.interactive
+                )}
               >
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
@@ -101,7 +100,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
                         {provider.name}
                       </h3>
                       {isCurrent && (
-                        <div className="inline-flex items-center gap-1 px-2 py-1 bg-green-500/10 text-green-500 rounded-md text-xs font-medium">
+                        <div className={badgeStyles.success}>
                           <CheckCircle2 size={12} />
                           当前使用
                         </div>
@@ -135,11 +134,12 @@ const ProviderList: React.FC<ProviderListProps> = ({
                     <button
                       onClick={() => onSwitch(provider.id)}
                       disabled={isCurrent}
-                      className={`inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                      className={cn(
+                        "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors",
                         isCurrent
                           ? "bg-gray-100 text-gray-400 cursor-not-allowed"
                           : "bg-blue-500 text-white hover:bg-blue-600"
-                      }`}
+                      )}
                     >
                       <Play size={14} />
                       {isCurrent ? "使用中" : "启用"}
@@ -147,7 +147,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
 
                     <button
                       onClick={() => onEdit(provider.id)}
-                      className="p-1.5 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+                      className={buttonStyles.icon}
                       title="编辑供应商"
                     >
                       <Edit3 size={16} />
@@ -156,11 +156,12 @@ const ProviderList: React.FC<ProviderListProps> = ({
                     <button
                       onClick={() => onDelete(provider.id)}
                       disabled={isCurrent}
-                      className={`p-1.5 rounded-md transition-colors ${
+                      className={cn(
+                        buttonStyles.icon,
                         isCurrent
                           ? "text-gray-400 cursor-not-allowed"
                           : "text-gray-500 hover:text-red-500 hover:bg-red-100"
-                      }`}
+                      )}
                       title="删除供应商"
                     >
                       <Trash2 size={16} />
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index b2cc691..c80cc95 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -83,18 +83,18 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
   };
 
   return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl shadow-2xl w-[500px] overflow-hidden">
+    <div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-[500px] overflow-hidden">
         {/* 标题栏 */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
-          <h2 className="text-lg font-semibold text-blue-500">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
+          <h2 className="text-lg font-semibold text-blue-500 dark:text-blue-400">
             设置
           </h2>
           <button
             onClick={onClose}
-            className="p-1.5 hover:bg-gray-100 rounded-md transition-colors"
+            className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
           >
-            <X size={20} className="text-gray-500" />
+            <X size={20} className="text-gray-500 dark:text-gray-400" />
           </button>
         </div>
 
@@ -102,7 +102,7 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
         <div className="px-6 py-4 space-y-6">
           {/* 显示设置 - 功能还未实现 */}
           {/* <div>
-            <h3 className="text-sm font-medium text-gray-900 mb-3">
+            <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
               显示设置
             </h3>
             <label className="flex items-center justify-between">
@@ -122,23 +122,23 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
 
           {/* 配置文件位置 */}
           <div>
-            <h3 className="text-sm font-medium text-gray-900 mb-3">
+            <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
               配置文件位置
             </h3>
             <div className="flex items-center gap-2">
-              <div className="flex-1 px-3 py-2 bg-gray-100 rounded-lg">
-                <span className="text-xs font-mono text-gray-500">
+              <div className="flex-1 px-3 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
+                <span className="text-xs font-mono text-gray-500 dark:text-gray-400">
                   {configPath || "加载中..."}
                 </span>
               </div>
               <button
                 onClick={handleOpenConfigFolder}
-                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
                 title="打开文件夹"
               >
                 <FolderOpen
                   size={18}
-                  className="text-gray-500"
+                  className="text-gray-500 dark:text-gray-400"
                 />
               </button>
             </div>
@@ -146,10 +146,10 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
 
           {/* 关于 */}
           <div>
-            <h3 className="text-sm font-medium text-gray-900 mb-3">
+            <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
               关于
             </h3>
-            <div className="p-4 bg-gray-100 rounded-lg">
+            <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
               <div className="flex items-start justify-between">
                 <div className="flex items-start gap-3">
                   <Info
@@ -157,10 +157,10 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
                     className="text-gray-500 mt-0.5"
                   />
                   <div className="text-sm">
-                    <p className="font-medium text-gray-900">
+                    <p className="font-medium text-gray-900 dark:text-gray-100">
                       CC Switch
                     </p>
-                    <p className="mt-1 text-gray-500">
+                    <p className="mt-1 text-gray-500 dark:text-gray-400">
                       版本 {version}
                     </p>
                   </div>
@@ -170,8 +170,8 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
                   disabled={isCheckingUpdate}
                   className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
                     isCheckingUpdate
-                      ? "bg-white text-gray-400"
-                      : "bg-white hover:bg-gray-50 text-blue-500"
+                      ? "bg-white dark:bg-gray-700 text-gray-400 dark:text-gray-500"
+                      : "bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-blue-500 dark:text-blue-400"
                   }`}
                 >
                   {isCheckingUpdate ? (
@@ -189,16 +189,16 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
         </div>
 
         {/* 底部按钮 */}
-        <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200">
+        <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-800">
           <button
             onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 rounded-lg transition-colors"
+            className="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
           >
             取消
           </button>
           <button
             onClick={saveSettings}
-            className="px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition-colors"
+            className="px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 rounded-lg transition-colors"
           >
             保存
           </button>
diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts
new file mode 100644
index 0000000..80db257
--- /dev/null
+++ b/src/hooks/useDarkMode.ts
@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react';
+
+export function useDarkMode() {
+  // 初始设为 false，挂载后在 useEffect 中加载真实值
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  // 组件挂载后加载初始值（兼容 Tauri 环境）
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    
+    try {
+      // 尝试读取已保存的偏好
+      const saved = localStorage.getItem('darkMode');
+      if (saved !== null) {
+        const savedBool = saved === 'true';
+        setIsDarkMode(savedBool);
+        console.log('[DarkMode] Loaded from localStorage:', savedBool);
+      } else {
+        // 回退到系统偏好
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        setIsDarkMode(prefersDark);
+        console.log('[DarkMode] Using system preference:', prefersDark);
+      }
+    } catch (error) {
+      console.error('[DarkMode] Error loading preference:', error);
+      setIsDarkMode(false);
+    }
+    
+    setIsInitialized(true);
+  }, []); // 仅在首次挂载时运行
+
+  // 将 dark 类应用到文档根节点
+  useEffect(() => {
+    if (!isInitialized) return;
+    
+    // 添加短暂延迟以确保 Tauri 中 DOM 已就绪
+    const timer = setTimeout(() => {
+      try {
+        if (isDarkMode) {
+          document.documentElement.classList.add('dark');
+          console.log('[DarkMode] Added dark class to document');
+        } else {
+          document.documentElement.classList.remove('dark');
+          console.log('[DarkMode] Removed dark class from document');
+        }
+        
+        // 检查类名是否已成功应用
+        const hasClass = document.documentElement.classList.contains('dark');
+        console.log('[DarkMode] Document has dark class:', hasClass);
+      } catch (error) {
+        console.error('[DarkMode] Error applying dark class:', error);
+      }
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [isDarkMode, isInitialized]);
+
+  // 将偏好保存到 localStorage
+  useEffect(() => {
+    if (!isInitialized) return;
+    
+    try {
+      localStorage.setItem('darkMode', isDarkMode.toString());
+      console.log('[DarkMode] Saved to localStorage:', isDarkMode);
+    } catch (error) {
+      console.error('[DarkMode] Error saving preference:', error);
+    }
+  }, [isDarkMode, isInitialized]);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(prev => {
+      const newValue = !prev;
+      console.log('[DarkMode] Toggling from', prev, 'to', newValue);
+      return newValue;
+    });
+  };
+
+  return { isDarkMode, toggleDarkMode };
+}
diff --git a/src/index.css b/src/index.css
index 62b54ff..08186b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,9 @@
+/* 引入 Tailwind v4 内建样式与工具 */
 @import "tailwindcss";
 
+/* 覆盖 Tailwind v4 默认的 dark 变体为“类选择器”模式 */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* 全局基础样式 */
 * {
   box-sizing: border-box;
@@ -11,7 +15,7 @@ html {
 }
 
 body {
-  @apply m-0 p-0 bg-gray-50 text-gray-900 text-sm;
+  @apply m-0 p-0 bg-gray-50 text-gray-900 text-sm dark:bg-gray-950 dark:text-gray-100;
 }
 
 /* 滚动条样式 */
@@ -20,15 +24,15 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-gray-100;
+  @apply bg-gray-100 dark:bg-gray-800;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-gray-300 rounded;
+  @apply bg-gray-300 rounded dark:bg-gray-600;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-400;
+  @apply bg-gray-400 dark:bg-gray-500;
 }
 
 /* 焦点样式 */
diff --git a/src/lib/styles.ts b/src/lib/styles.ts
new file mode 100644
index 0000000..952f3bc
--- /dev/null
+++ b/src/lib/styles.ts
@@ -0,0 +1,68 @@
+/**
+ * 复用的 Tailwind 样式组合，覆盖常见 UI 模式
+ */
+
+// 按钮样式
+export const buttonStyles = {
+  // 主按钮：蓝底白字
+  primary: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors text-sm font-medium",
+  
+  // 次按钮：灰背景，深色文本
+  secondary: "px-4 py-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 rounded-lg transition-colors text-sm font-medium",
+  
+  // 危险按钮：用于不可撤销/破坏性操作
+  danger: "px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 transition-colors text-sm font-medium",
+  
+  // 幽灵按钮：无背景，仅悬浮反馈
+  ghost: "px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors text-sm font-medium",
+  
+  // 图标按钮：小尺寸，仅图标
+  icon: "p-1.5 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors",
+  
+  // 禁用态：可与其他样式组合
+  disabled: "opacity-50 cursor-not-allowed pointer-events-none",
+} as const;
+
+// 卡片样式
+export const cardStyles = {
+  // 基础卡片容器
+  base: "bg-white rounded-lg border border-gray-200 p-4 dark:bg-gray-900 dark:border-gray-700",
+  
+  // 带悬浮效果的卡片
+  interactive: "bg-white rounded-lg border border-gray-200 p-4 hover:border-gray-300 hover:shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:hover:border-gray-600 transition-all duration-200",
+  
+  // 选中/激活态卡片
+  selected: "bg-white rounded-lg border border-blue-500 ring-1 ring-blue-500/20 bg-blue-500/5 p-4 dark:bg-gray-900 dark:border-blue-400 dark:ring-blue-400/20 dark:bg-blue-400/10",
+} as const;
+
+// 输入控件样式
+export const inputStyles = {
+  // 文本输入框
+  text: "w-full px-3 py-2 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500/20 outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20 transition-colors",
+  
+  // 下拉选择框
+  select: "w-full px-3 py-2 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500/20 outline-none bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:focus:border-blue-400 dark:focus:ring-blue-400/20 transition-colors",
+  
+  // 复选框
+  checkbox: "w-4 h-4 text-blue-500 rounded focus:ring-blue-500/20 border-gray-300 dark:border-gray-600 dark:bg-gray-800",
+} as const;
+
+// 徽标（Badge）样式
+export const badgeStyles = {
+  // 成功徽标
+  success: "inline-flex items-center gap-1 px-2 py-1 bg-green-500/10 text-green-500 rounded-md text-xs font-medium",
+  
+  // 信息徽标
+  info: "inline-flex items-center gap-1 px-2 py-1 bg-blue-500/10 text-blue-500 rounded-md text-xs font-medium",
+  
+  // 警告徽标
+  warning: "inline-flex items-center gap-1 px-2 py-1 bg-amber-500/10 text-amber-500 rounded-md text-xs font-medium",
+  
+  // 错误徽标
+  error: "inline-flex items-center gap-1 px-2 py-1 bg-red-500/10 text-red-500 rounded-md text-xs font-medium",
+} as const;
+
+// 组合类名的工具函数
+export function cn(...classes: (string | undefined | false)[]) {
+  return classes.filter(Boolean).join(' ');
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index ed8ea9d..3f36133 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
-    "./index.html",
+    "./src/index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
@@ -21,7 +21,11 @@ export default {
           300: '#d4d4d8',  // border-hover
           400: '#a1a1aa',  // text-tertiary
           500: '#71717a',  // text-secondary
+          600: '#52525b',  // text-secondary-dark
+          700: '#3f3f46',  // bg-tertiary-dark
+          800: '#27272a',  // bg-secondary-dark
           900: '#18181b',  // text-primary
+          950: '#0a0a0b',  // bg-primary-dark
         },
         // 状态颜色
         green: {
@@ -55,4 +59,4 @@ export default {
     },
   },
   plugins: [],
-}
\ No newline at end of file
+}