style: 支持深色主题

Yi.Ai.Vue3/README.md

@@ -70,3 +70,87 @@ dotnet run
 - [ ] 文件上传
 - [ ] 其他...
 
+深色主题样式编写指南
+
+1. 在 src/styles/dark-theme.scss 中添加样式
+
+所有深色主题样式都使用 [data-theme="dark"] 选择器包裹：
+
+/* ========== 组件名称深色样式 ========== */
+[data-theme="dark"] {
+.your-component-class {
+background-color: #1f2937 !important;
+color: #e5e7eb !important;
+border-color: #374151 !important;
+}
+}
+
+2. 常用深色主题颜色值
+   ┌─────────────────────────┬───────────────────┐
+   │          用途           │      颜色值       │
+   ├─────────────────────────┼───────────────────┤
+   │ 主背景                  │ #111827           │
+   ├─────────────────────────┼───────────────────┤
+   │ 次级背景（卡片、弹窗）  │ #1f2937           │
+   ├─────────────────────────┼───────────────────┤
+   │ 三级背景（hover、表头） │ #374151           │
+   ├─────────────────────────┼───────────────────┤
+   │ 主文字                  │ #f3f4f6 / #f9fafb │
+   ├─────────────────────────┼───────────────────┤
+   │ 次级文字                │ #e5e7eb           │
+   ├─────────────────────────┼───────────────────┤
+   │ 三级文字                │ #9ca3af           │
+   ├─────────────────────────┼───────────────────┤
+   │ 边框浅色                │ #374151           │
+   ├─────────────────────────┼───────────────────┤
+   │ 边框深色                │ #4b5563           │
+   ├─────────────────────────┼───────────────────┤
+   │ 主色调                  │ #60a5fa           │
+   └─────────────────────────┴───────────────────┘
+3. 覆盖 Tailwind 工具类
+
+[data-theme="dark"] {
+.bg-white {
+background-color: #374151 !important;
+}
+
+    .text-gray-700 {
+      color: #e5e7eb !important;
+    }
+}
+
+4. 覆盖 Element Plus 组件
+
+[data-theme="dark"] {
+.el-card {
+background-color: #1f2937 !important;
+border-color: #374151 !important;
+}
+}
+
+5. 使用 CSS 变量（推荐）
+
+在 src/styles/var.scss 的 [data-theme="dark"] 块中定义变量，然后在组件中使用：
+
+// var.scss
+[data-theme="dark"] {
+--my-component-bg: #1f2937;
+}
+
+// dark-theme.scss
+[data-theme="dark"] {
+.my-component {
+background-color: var(--my-component-bg) !important;
+}
+}
+
+6. 组件内动态颜色（JS 方式）
+
+如果需要在 JS 中动态获取颜色：
+
+  <script setup>
+  import { useColorMode } from '@vueuse/core';
+
+  const mode = useColorMode();
+  const bgColor = computed(() => mode.value === 'dark' ? '#1f2937' : '#ffffff');
+  </script>