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

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

packages/ui/src/components/PermissionDialog.tsx

@@ -86,7 +86,7 @@ function getPermissionIcon(type: PermissionType) {
     case 'web':
       return <Globe size={24} className="text-green-400" />;
     default:
-      return <Shield size={24} className="text-gray-400" />;
+      return <Shield size={24} className="text-fg-muted" />;
   }
 }
 
@@ -113,9 +113,9 @@ function DiffViewer({ diff }: { diff: DiffInfo }) {
   }
 
   return (
-    <div className="mt-4 rounded-lg border border-gray-700 overflow-hidden">
-      <div className="flex items-center justify-between px-3 py-2 bg-gray-900/50 border-b border-gray-700">
-        <span className="text-xs text-gray-400">
+    <div className="mt-4 rounded-lg border border-line overflow-hidden">
+      <div className="flex items-center justify-between px-3 py-2 bg-surface-base/50 border-b border-line">
+        <span className="text-xs text-fg-muted">
           {diff.isNew ? 'New file' : 'Changes'}
         </span>
         <div className="flex items-center gap-3 text-xs">
@@ -127,7 +127,7 @@ function DiffViewer({ diff }: { diff: DiffInfo }) {
         <pre className="text-xs font-mono">
           {diff.hunks.map((hunk, hunkIndex) => (
             <div key={hunkIndex}>
-              <div className="px-3 py-1 bg-blue-500/10 text-blue-400 border-y border-gray-700/50">
+              <div className="px-3 py-1 bg-blue-500/10 text-blue-400 border-y border-line/50">
                 @@ -{hunk.oldStart},{hunk.oldCount} +{hunk.newStart},{hunk.newCount} @@
               </div>
               {hunk.lines.map((line, lineIndex) => {
@@ -141,7 +141,7 @@ function DiffViewer({ diff }: { diff: DiffInfo }) {
                   className += 'bg-red-500/10 text-red-400';
                   prefix = '-';
                 } else {
-                  className += 'text-gray-400';
+                  className += 'text-fg-muted';
                 }
 
                 return (
@@ -182,8 +182,8 @@ export function PermissionDialog({
       case 'bash':
         return (
           <div className="space-y-2">
-            <div className="text-sm text-gray-400">Command:</div>
-            <code className="block px-3 py-2 bg-gray-900 rounded-lg font-mono text-sm text-yellow-300 break-all">
+            <div className="text-sm text-fg-muted">Command:</div>
+            <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-sm text-yellow-300 break-all">
               {context.command}
             </code>
             {context.externalPaths && context.externalPaths.length > 0 && (
@@ -206,7 +206,7 @@ export function PermissionDialog({
         return (
           <div className="space-y-2">
             <div className="flex items-center gap-2 text-sm">
-              <span className="text-gray-400">Operation:</span>
+              <span className="text-fg-muted">Operation:</span>
               <span className={cn(
                 'px-2 py-0.5 rounded text-xs font-medium',
                 context.operation === 'delete' ? 'bg-red-500/20 text-red-400' :
@@ -216,8 +216,8 @@ export function PermissionDialog({
                 {context.operation?.toUpperCase()}
               </span>
             </div>
-            <div className="text-sm text-gray-400">Path:</div>
-            <code className="block px-3 py-2 bg-gray-900 rounded-lg font-mono text-sm text-blue-300 break-all">
+            <div className="text-sm text-fg-muted">Path:</div>
+            <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-sm text-blue-300 break-all">
               {context.path}
             </code>
             {diff && <DiffViewer diff={diff} />}
@@ -228,15 +228,15 @@ export function PermissionDialog({
         return (
           <div className="space-y-2">
             <div className="flex items-center gap-2 text-sm">
-              <span className="text-gray-400">Git operation:</span>
+              <span className="text-fg-muted">Git operation:</span>
               <span className="px-2 py-0.5 rounded text-xs font-medium bg-purple-500/20 text-purple-400">
                 {context.gitOperation?.toUpperCase()}
               </span>
             </div>
             {context.command && (
               <>
-                <div className="text-sm text-gray-400">Command:</div>
-                <code className="block px-3 py-2 bg-gray-900 rounded-lg font-mono text-sm text-purple-300 break-all">
+                <div className="text-sm text-fg-muted">Command:</div>
+                <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-sm text-purple-300 break-all">
                   {context.command}
                 </code>
               </>
@@ -247,8 +247,8 @@ export function PermissionDialog({
       case 'web':
         return (
           <div className="space-y-2">
-            <div className="text-sm text-gray-400">Request:</div>
-            <code className="block px-3 py-2 bg-gray-900 rounded-lg font-mono text-sm text-green-300 break-all">
+            <div className="text-sm text-fg-muted">Request:</div>
+            <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-sm text-green-300 break-all">
               {context.query || context.command}
             </code>
           </div>
@@ -256,8 +256,8 @@ export function PermissionDialog({
 
       default:
         return (
-          <div className="text-sm text-gray-400">
-            <pre className="bg-gray-900 p-3 rounded-lg overflow-auto">
+          <div className="text-sm text-fg-muted">
+            <pre className="bg-surface-base p-3 rounded-lg overflow-auto">
               {JSON.stringify(context, null, 2)}
             </pre>
           </div>
@@ -285,24 +285,24 @@ export function PermissionDialog({
           exit="exit"
           transition={smoothTransition}
           className={cn(
-            'bg-gray-800 overflow-hidden flex flex-col',
+            'bg-surface-subtle overflow-hidden flex flex-col',
             responsive
               ? 'w-full md:w-full md:max-w-lg md:mx-4 rounded-t-2xl md:rounded-lg'
               : 'rounded-lg w-full max-w-lg mx-4'
           )}
         >
           {/* Header */}
-          <div className="flex items-center justify-between px-5 py-4 border-b border-gray-700">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-line">
             {responsive && (
-              <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-gray-600 rounded-full md:hidden" />
+              <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-surface-emphasis rounded-full md:hidden" />
             )}
             <div className={cn('flex items-center gap-3', responsive && 'mt-2 md:mt-0')}>
-              <div className="p-2 rounded-lg bg-gray-900">
+              <div className="p-2 rounded-lg bg-surface-base">
                 {getPermissionIcon(permissionType)}
               </div>
               <div>
                 <h2 className="text-lg font-semibold">{getPermissionTitle(permissionType)}</h2>
-                <p className="text-xs text-gray-500">AI is requesting permission</p>
+                <p className="text-xs text-fg-subtle">AI is requesting permission</p>
               </div>
             </div>
             <Button
@@ -322,16 +322,16 @@ export function PermissionDialog({
 
           {/* Footer */}
           <div className={cn(
-            'flex flex-col gap-3 border-t border-gray-700',
+            'flex flex-col gap-3 border-t border-line',
             responsive ? 'px-4 py-4 safe-area-pb' : 'px-5 py-4'
           )}>
             {/* Remember checkbox */}
-            <label className="flex items-center gap-2 text-sm text-gray-400 cursor-pointer">
+            <label className="flex items-center gap-2 text-sm text-fg-muted cursor-pointer">
               <input
                 type="checkbox"
                 checked={remember}
                 onChange={(e) => setRemember(e.target.checked)}
-                className="w-4 h-4 rounded border-gray-600 bg-gray-900 text-primary-500 focus:ring-primary-500"
+                className="w-4 h-4 rounded border-line-muted bg-surface-base text-primary-500 focus:ring-primary-500"
               />
               Remember for this session
             </label>