feat(ui): 实现深色/浅色主题切换功能

- 添加 CSS 变量定义浅色和深色主题色板
- 扩展 Tailwind 配置支持语义化颜色 (surface-*, fg-*, line-*, code)
- 创建 useTheme hook 管理主题状态和持久化
- 创建 ThemeToggle 组件支持三种模式 (light/dark/system)
- 迁移所有组件从硬编码 gray-* 到语义化颜色
- 支持系统主题偏好检测 (prefers-color-scheme)
- 添加主题初始化脚本防止闪烁 (FOUC)

packages/ui/src/components/FileBrowser.tsx

@@ -29,7 +29,7 @@ const FileIcon = ({ type, extension }: { type: 'file' | 'directory'; extension?:
     js: 'text-yellow-300',
     jsx: 'text-yellow-300',
     json: 'text-yellow-500',
-    md: 'text-gray-400',
+    md: 'text-fg-muted',
     css: 'text-pink-400',
     html: 'text-orange-400',
     py: 'text-green-400',
@@ -37,7 +37,7 @@ const FileIcon = ({ type, extension }: { type: 'file' | 'directory'; extension?:
     rs: 'text-orange-500',
   };
 
-  const color = colors[extension || ''] || 'text-gray-400';
+  const color = colors[extension || ''] || 'text-fg-muted';
 
   return (
     <svg className={`w-4 h-4 ${color}`} fill="currentColor" viewBox="0 0 20 20">
@@ -126,13 +126,13 @@ export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps)
   };
 
   return (
-    <div className={`flex flex-col h-full bg-gray-900 ${className}`}>
+    <div className={`flex flex-col h-full bg-surface-base ${className}`}>
       {/* 工具栏 */}
-      <div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
+      <div className="flex items-center gap-2 p-2 border-b border-line bg-surface-subtle">
         <button
           onClick={handleGoUp}
           disabled={parentPath === null}
-          className="p-1.5 rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="p-1.5 rounded hover:bg-surface-muted disabled:opacity-50 disabled:cursor-not-allowed"
           title="Go up"
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -142,7 +142,7 @@ export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps)
 
         <button
           onClick={handleRefresh}
-          className="p-1.5 rounded hover:bg-gray-700"
+          className="p-1.5 rounded hover:bg-surface-muted"
           title="Refresh"
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -155,11 +155,11 @@ export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps)
           </svg>
         </button>
 
-        <div className="flex-1 px-2 py-1 text-sm text-gray-400 bg-gray-900 rounded truncate">
+        <div className="flex-1 px-2 py-1 text-sm text-fg-muted bg-surface-base rounded truncate">
           {currentPath}
         </div>
 
-        <label className="flex items-center gap-1 text-xs text-gray-400 cursor-pointer">
+        <label className="flex items-center gap-1 text-xs text-fg-muted cursor-pointer">
           <input
             type="checkbox"
             checked={showHidden}
@@ -176,7 +176,7 @@ export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps)
       {/* 文件列表 */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="flex items-center justify-center h-32 text-gray-400">
+          <div className="flex items-center justify-center h-32 text-fg-muted">
             Loading...
           </div>
         ) : error ? (
@@ -184,23 +184,23 @@ export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps)
             {error}
           </div>
         ) : files.length === 0 ? (
-          <div className="flex items-center justify-center h-32 text-gray-500">
+          <div className="flex items-center justify-center h-32 text-fg-subtle">
             Empty directory
           </div>
         ) : (
-          <div className="divide-y divide-gray-800">
+          <div className="divide-y divide-surface-subtle">
             {files.map((file) => (
               <div
                 key={file.path}
                 onClick={() => handleItemClick(file)}
-                className={`flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-800 ${
-                  selectedFile === file.path ? 'bg-gray-800 border-l-2 border-blue-500' : ''
+                className={`flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-surface-subtle ${
+                  selectedFile === file.path ? 'bg-surface-subtle border-l-2 border-blue-500' : ''
                 }`}
               >
                 <FileIcon type={file.type} extension={file.extension} />
                 <span className="flex-1 truncate text-sm">{file.name}</span>
                 {file.type === 'file' && (
-                  <span className="text-xs text-gray-500">{formatSize(file.size)}</span>
+                  <span className="text-xs text-fg-subtle">{formatSize(file.size)}</span>
                 )}
               </div>
             ))}
@@ -210,22 +210,22 @@ export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps)
 
       {/* 文件预览 */}
       {selectedFile && fileContent && (
-        <div className="border-t border-gray-700 max-h-48 overflow-auto">
-          <div className="sticky top-0 flex items-center justify-between px-3 py-1 bg-gray-800 border-b border-gray-700">
-            <span className="text-xs text-gray-400 truncate">{selectedFile}</span>
+        <div className="border-t border-line max-h-48 overflow-auto">
+          <div className="sticky top-0 flex items-center justify-between px-3 py-1 bg-surface-subtle border-b border-line">
+            <span className="text-xs text-fg-muted truncate">{selectedFile}</span>
             <button
               onClick={() => {
                 setSelectedFile(null);
                 setFileContent(null);
               }}
-              className="p-1 hover:bg-gray-700 rounded"
+              className="p-1 hover:bg-surface-muted rounded"
             >
               <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>
           </div>
-          <pre className="p-3 text-xs text-gray-300 whitespace-pre-wrap font-mono">
+          <pre className="p-3 text-xs text-fg-secondary whitespace-pre-wrap font-mono">
             {fileContent.slice(0, 5000)}
             {fileContent.length > 5000 && '\n... (truncated)'}
           </pre>