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

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

packages/ui/src/components/ChatInput.tsx

@@ -142,7 +142,7 @@ export function ChatInput({
   return (
     <div
       className={clsx(
-        'border-t border-gray-700 bg-gray-900 relative',
+        'border-t border-line bg-surface-base relative',
         responsive ? 'p-3 md:p-4 safe-area-pb' : 'p-4'
       )}
     >
@@ -174,10 +174,10 @@ export function ChatInput({
             disabled={disabled}
             rows={1}
             className={clsx(
-              'w-full resize-none rounded-lg border border-gray-600 bg-gray-800',
+              'w-full resize-none rounded-lg border border-line bg-surface-subtle',
               responsive ? 'px-3 py-2.5 md:px-4 md:py-3' : 'px-4 py-3',
               responsive ? 'text-base md:text-sm' : 'text-sm', // 移动端使用 16px 防止缩放
-              'text-gray-100 placeholder-gray-500',
+              'text-fg placeholder-fg-subtle',
               'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
@@ -202,7 +202,7 @@ export function ChatInput({
       </div>
       {/* 响应式模式下桌面端显示提示文字 */}
       {responsive && (
-        <p className="hidden md:block text-xs text-gray-500 text-center mt-2">
+        <p className="hidden md:block text-xs text-fg-subtle text-center mt-2">
           Press Enter to send, Shift+Enter for new line, / for commands
         </p>
       )}