feat(ui): implement dark mode with system preference support

- Add useDarkMode hook for managing theme state and persistence
- Integrate dark mode toggle button in app header
- Update all components with dark variant styles using Tailwind v4
- Create centralized style utilities for consistent theming
- Support system color scheme preference as fallback
- Store user preference in localStorage for persistence

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} />
               添加供应商

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} />

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>

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 };
+}

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;
 }
 
 /* 焦点样式 */

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(' ');
+}