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

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

packages/ui/src/components/Markdown.tsx

@@ -69,13 +69,13 @@ export function Markdown({ content, className }: MarkdownProps) {
             return <ol className="list-decimal list-inside mb-4 space-y-1">{children}</ol>;
           },
           li({ children }) {
-            return <li className="text-gray-200">{children}</li>;
+            return <li className="text-fg-secondary">{children}</li>;
           },
 
           // 引用
           blockquote({ children }) {
             return (
-              <blockquote className="border-l-4 border-gray-600 pl-4 my-4 text-gray-400 italic">
+              <blockquote className="border-l-4 border-line-muted pl-4 my-4 text-fg-muted italic">
                 {children}
               </blockquote>
             );
@@ -97,7 +97,7 @@ export function Markdown({ content, className }: MarkdownProps) {
 
           // 强调
           strong({ children }) {
-            return <strong className="font-bold text-gray-100">{children}</strong>;
+            return <strong className="font-bold text-fg">{children}</strong>;
           },
           em({ children }) {
             return <em className="italic">{children}</em>;
@@ -105,38 +105,38 @@ export function Markdown({ content, className }: MarkdownProps) {
 
           // 分割线
           hr() {
-            return <hr className="my-6 border-gray-700" />;
+            return <hr className="my-6 border-line" />;
           },
 
           // 表格
           table({ children }) {
             return (
               <div className="overflow-x-auto my-4">
-                <table className="min-w-full border-collapse border border-gray-700">
+                <table className="min-w-full border-collapse border border-line">
                   {children}
                 </table>
               </div>
             );
           },
           thead({ children }) {
-            return <thead className="bg-gray-800">{children}</thead>;
+            return <thead className="bg-surface-subtle">{children}</thead>;
           },
           tbody({ children }) {
             return <tbody>{children}</tbody>;
           },
           tr({ children }) {
-            return <tr className="border-b border-gray-700">{children}</tr>;
+            return <tr className="border-b border-line">{children}</tr>;
           },
           th({ children }) {
             return (
-              <th className="px-4 py-2 text-left text-sm font-semibold text-gray-200 border-r border-gray-700 last:border-r-0">
+              <th className="px-4 py-2 text-left text-sm font-semibold text-fg-secondary border-r border-line last:border-r-0">
                 {children}
               </th>
             );
           },
           td({ children }) {
             return (
-              <td className="px-4 py-2 text-sm text-gray-300 border-r border-gray-700 last:border-r-0">
+              <td className="px-4 py-2 text-sm text-fg-secondary border-r border-line last:border-r-0">
                 {children}
               </td>
             );
@@ -156,7 +156,7 @@ export function Markdown({ content, className }: MarkdownProps) {
           // 预格式化文本（非代码块的 pre）
           pre({ children }) {
             return (
-              <pre className="bg-gray-900 p-4 rounded-lg overflow-x-auto my-4 text-sm">
+              <pre className="bg-surface-base p-4 rounded-lg overflow-x-auto my-4 text-sm">
                 {children}
               </pre>
             );