diff --git a/Yi.Ai.Vue3/.claude/settings.local.json b/Yi.Ai.Vue3/.claude/settings.local.json
index 13e6d318..d3606838 100644
--- a/Yi.Ai.Vue3/.claude/settings.local.json
+++ b/Yi.Ai.Vue3/.claude/settings.local.json
@@ -3,7 +3,8 @@
     "allow": [
       "Bash(npx vue-tsc --noEmit)",
       "Bash(timeout 60 npx vue-tsc:*)",
-      "Bash(npm run dev:*)"
+      "Bash(npm run dev:*)",
+      "Bash(xargs:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/Yi.Ai.Vue3/README.md b/Yi.Ai.Vue3/README.md
index 71e163b2..80fcf996 100644
--- a/Yi.Ai.Vue3/README.md
+++ b/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>
diff --git a/Yi.Ai.Vue3/src/components/WelecomeText/index.vue b/Yi.Ai.Vue3/src/components/WelecomeText/index.vue
index 1d626475..0cf5d1dd 100644
--- a/Yi.Ai.Vue3/src/components/WelecomeText/index.vue
+++ b/Yi.Ai.Vue3/src/components/WelecomeText/index.vue
@@ -1,13 +1,18 @@
 <!-- 欢迎提示词 -->
 <script setup lang="ts">
 import { Typewriter } from 'vue-element-plus-x';
+import { useColorMode } from '@vueuse/core';
 import { useTimeGreeting } from '@/hooks/useTimeGreeting';
 import { useUserStore } from '@/stores';
 
 const greeting = useTimeGreeting();
 const userStore = useUserStore();
+const mode = useColorMode();
 
 const username = computed(() => userStore.userInfo?.username ?? '意心Ai，一心只为打造更良心的Ai平台');
+
+// 根据主题动态设置雾化背景色
+const fogBgColor = computed(() => mode.value === 'dark' ? '#111827' : '#fff');
 </script>
 
 <template>
@@ -22,7 +27,7 @@ const username = computed(() => userStore.userInfo?.username ?? '意心Ai，一
         interval: 45,
       }"
       :is-fog="{
-        bgColor: '#fff',
+        bgColor: fogBgColor,
       }"
     />
   </div>
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/components/ThemeBtn.vue b/Yi.Ai.Vue3/src/layouts/components/Header/components/ThemeBtn.vue
index 975fd521..972881d5 100644
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/ThemeBtn.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/ThemeBtn.vue
@@ -3,16 +3,58 @@ import { useColorMode } from '@vueuse/core';
 
 // 使用 VueUse 的 useColorMode
 const mode = useColorMode({
-  attribute: 'class',
+  attribute: 'data-theme',
   modes: {
     light: 'light',
     dark: 'dark',
   },
+  storageKey: 'yi-theme',
+  initialValue: 'light',
 });
 
-// 切换主题
-function toggleTheme() {
-  mode.value = mode.value === 'dark' ? 'light' : 'dark';
+// 是否正在切换动画中
+const isAnimating = ref(false);
+
+// 切换主题（带动画）
+async function toggleTheme(event: MouseEvent) {
+  // 如果正在动画中，不执行
+  if (isAnimating.value) return;
+
+  const newTheme = mode.value === 'dark' ? 'light' : 'dark';
+
+  // 检查浏览器是否支持 View Transitions API
+  if (!document.startViewTransition) {
+    mode.value = newTheme;
+    return;
+  }
+
+  isAnimating.value = true;
+
+  // 获取点击位置
+  const x = event.clientX;
+  const y = event.clientY;
+
+  // 计算最大半径（从点击位置到最远角落的距离）
+  const maxRadius = Math.hypot(
+    Math.max(x, window.innerWidth - x),
+    Math.max(y, window.innerHeight - y),
+  );
+
+  // 设置 CSS 变量用于动画
+  document.documentElement.style.setProperty('--theme-transition-x', `${x}px`);
+  document.documentElement.style.setProperty('--theme-transition-y', `${y}px`);
+  document.documentElement.style.setProperty('--theme-transition-radius', `${maxRadius}px`);
+
+  // 使用 View Transitions API
+  const transition = document.startViewTransition(() => {
+    mode.value = newTheme;
+  });
+
+  try {
+    await transition.finished;
+  } finally {
+    isAnimating.value = false;
+  }
 }
 
 // 主题图标
@@ -24,20 +66,29 @@ const themeIcon = computed(() => {
 const themeTitle = computed(() => {
   return mode.value === 'dark' ? '切换到浅色模式' : '切换到深色模式';
 });
+
+// 是否为深色模式
+const isDark = computed(() => mode.value === 'dark');
 </script>
 
 <template>
   <div class="theme-btn-container" data-tour="theme-btn">
     <div
       class="theme-btn"
+      :class="{ 'is-dark': isDark }"
       :title="themeTitle"
       @click="toggleTheme"
     >
-      <!-- PC端显示文字 + 图标 -->
-      <el-icon class="theme-icon">
-        <component :is="`i-ep-${themeIcon}`" />
-      </el-icon>
-      <span class="pc-text">主题</span>
+      <!-- 图标容器 -->
+      <div class="icon-wrapper">
+        <el-icon class="theme-icon sun-icon" :class="{ active: isDark }">
+          <Sunny />
+        </el-icon>
+        <el-icon class="theme-icon moon-icon" :class="{ active: !isDark }">
+          <Moon />
+        </el-icon>
+      </div>
+      <span class="pc-text">{{ isDark ? '深色' : '浅色' }}</span>
     </div>
   </div>
 </template>
@@ -53,29 +104,68 @@ const themeTitle = computed(() => {
     gap: 6px;
     cursor: pointer;
     padding: 8px 12px;
-    border-radius: 6px;
-    transition: all 0.2s;
+    border-radius: 8px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     color: var(--el-text-color-regular);
+    background-color: transparent;
 
     &:hover {
       background-color: var(--el-fill-color-light);
       color: var(--el-color-primary);
     }
 
+    &.is-dark {
+      .icon-wrapper {
+        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      }
+    }
+
+    .icon-wrapper {
+      position: relative;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      overflow: hidden;
+    }
+
     .theme-icon {
-      font-size: 18px;
-      transition: transform 0.3s;
+      position: absolute;
+      font-size: 16px;
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    &:hover .theme-icon {
-      transform: rotate(20deg);
+    .sun-icon {
+      color: #f59e0b;
+      transform: translateY(30px) rotate(-90deg);
+      opacity: 0;
+
+      &.active {
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+      }
+    }
+
+    .moon-icon {
+      color: #6366f1;
+      transform: translateY(0) rotate(0deg);
+      opacity: 1;
+
+      &.active {
+        transform: translateY(-30px) rotate(90deg);
+        opacity: 0;
+      }
     }
 
-    // PC端显示文字
     .pc-text {
       display: inline;
       font-size: 14px;
       font-weight: 500;
+      transition: color 0.3s;
     }
   }
 }
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/index.vue b/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
index 1910cfe3..a68df3cf 100644
--- a/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
@@ -155,9 +155,9 @@ function toggleMobileMenu() {
           <BuyBtn :is-menu-item="true" />
         </el-menu-item>
 
-        <!-- 主题切换（暂不显示） -->
-        <el-menu-item v-if="false" class="custom-menu-item" index="no-route">
-          <ThemeBtn :is-menu-item="true" />
+        <!-- 主题切换 -->
+        <el-menu-item class="custom-menu-item" index="no-route">
+          <ThemeBtn />
         </el-menu-item>
 
         <!-- 用户头像 -->
diff --git a/Yi.Ai.Vue3/src/styles/dark-theme.scss b/Yi.Ai.Vue3/src/styles/dark-theme.scss
new file mode 100644
index 00000000..913e1d4e
--- /dev/null
+++ b/Yi.Ai.Vue3/src/styles/dark-theme.scss
@@ -0,0 +1,1207 @@
+/* ========== 深色主题 Element Plus 覆盖样式 ========== */
+
+/* 全局基础样式 */
+[data-theme="dark"] {
+  background-color: #111827;
+  color: #f3f4f6;
+}
+
+[data-theme="dark"] body {
+  background-color: #111827;
+  color: #f3f4f6;
+}
+
+[data-theme="dark"] {
+  /* ========== Element Plus 核心变量 ========== */
+  --el-color-primary: #60a5fa;
+  --el-color-primary-light-3: #93c5fd;
+  --el-color-primary-light-5: #bfdbfe;
+  --el-color-primary-light-7: #dbeafe;
+  --el-color-primary-light-8: #1e3a5f;
+  --el-color-primary-light-9: #172554;
+  --el-color-primary-dark-2: #3b82f6;
+
+  --el-color-success: #34d399;
+  --el-color-warning: #fbbf24;
+  --el-color-danger: #f87171;
+  --el-color-error: #f87171;
+  --el-color-info: #9ca3af;
+
+  /* 背景色 */
+  --el-bg-color: #111827;
+  --el-bg-color-page: #0f172a;
+  --el-bg-color-overlay: #1f2937;
+
+  /* 文字颜色 */
+  --el-text-color-primary: #f9fafb;
+  --el-text-color-regular: #e5e7eb;
+  --el-text-color-secondary: #9ca3af;
+  --el-text-color-placeholder: #6b7280;
+  --el-text-color-disabled: #4b5563;
+
+  /* 边框颜色 */
+  --el-border-color: #374151;
+  --el-border-color-light: #4b5563;
+  --el-border-color-lighter: #374151;
+  --el-border-color-extra-light: #1f2937;
+  --el-border-color-dark: #6b7280;
+  --el-border-color-darker: #9ca3af;
+
+  /* 填充色 */
+  --el-fill-color: #374151;
+  --el-fill-color-light: #1f2937;
+  --el-fill-color-lighter: #111827;
+  --el-fill-color-extra-light: #0f172a;
+  --el-fill-color-dark: #4b5563;
+  --el-fill-color-darker: #6b7280;
+  --el-fill-color-blank: #1f2937;
+
+  /* 遮罩层 */
+  --el-mask-color: rgba(0, 0, 0, 0.7);
+  --el-mask-color-extra-light: rgba(0, 0, 0, 0.4);
+
+  /* 阴影 */
+  --el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.36), 0 8px 20px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.48);
+  --el-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.36);
+  --el-box-shadow-dark: 0 16px 48px 16px rgba(0, 0, 0, 0.72), 0 12px 32px rgba(0, 0, 0, 0.64);
+}
+
+/* ========== 深色主题组件样式 ========== */
+[data-theme="dark"] {
+  /* 页面背景 */
+  background-color: var(--bg-color-primary);
+  color: var(--text-color-primary);
+
+  /* 头部导航 */
+  .header-container,
+  .el-header {
+    background-color: var(--header-background-color) !important;
+    box-shadow: var(--header-box-shadow);
+    border-bottom: var(--header-border);
+  }
+
+  .header-menu,
+  .el-menu--horizontal {
+    background-color: var(--header-background-color) !important;
+    border-bottom: none !important;
+  }
+
+  .brand-text,
+  .mobile-brand-text {
+    color: var(--text-color-primary) !important;
+  }
+
+  .menu-title {
+    color: var(--text-color-secondary) !important;
+  }
+
+  /* 侧边栏 */
+  .aside-container,
+  .aside-wrapper {
+    background-color: var(--sidebar-background-color) !important;
+    border-color: var(--sidebar-border-color) !important;
+  }
+
+  .aside-header {
+    border-bottom-color: var(--sidebar-border-color) !important;
+  }
+
+  .logo-text {
+    color: var(--text-color-primary) !important;
+  }
+
+  /* 聊天区域 */
+  .chat-with-id-container,
+  .chat-default-container,
+  .conversation-page {
+    background-color: var(--content-background-color) !important;
+  }
+
+  .chat-warp {
+    background-color: var(--chat-container-bg) !important;
+  }
+
+  /* 气泡样式 */
+  .el-bubble {
+    &[data-placement="start"] {
+      .el-bubble-content {
+        background-color: var(--chat-bubble-ai-bg) !important;
+        color: var(--chat-bubble-ai-text) !important;
+      }
+    }
+  }
+
+  /* 输入框 */
+  .el-input__wrapper,
+  .el-textarea__inner {
+    background-color: var(--bg-color-secondary) !important;
+    box-shadow: 0 0 0 1px var(--border-color-light) inset !important;
+  }
+
+  .el-input__inner {
+    color: var(--text-color-primary) !important;
+  }
+
+  /* 按钮 */
+  .el-button--default {
+    background-color: var(--bg-color-secondary) !important;
+    border-color: var(--border-color-light) !important;
+    color: var(--text-color-primary) !important;
+
+    &:hover {
+      background-color: var(--bg-color-tertiary) !important;
+      border-color: var(--el-color-primary) !important;
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  /* 卡片 */
+  .el-card {
+    background-color: var(--bg-color-secondary) !important;
+    border-color: var(--border-color-light) !important;
+  }
+
+  /* 弹窗 */
+  .el-dialog {
+    background-color: var(--bg-color-secondary) !important;
+
+    .el-dialog__header {
+      border-bottom-color: var(--border-color-light) !important;
+    }
+
+    .el-dialog__title {
+      color: var(--text-color-primary) !important;
+    }
+  }
+
+  /* 抽屉 */
+  .el-drawer {
+    background-color: var(--bg-color-secondary) !important;
+
+    .el-drawer__header {
+      color: var(--text-color-primary) !important;
+      border-bottom-color: var(--border-color-light) !important;
+    }
+  }
+
+  /* 下拉菜单 */
+  .el-dropdown-menu,
+  .el-select-dropdown,
+  .el-popper {
+    background-color: var(--bg-color-secondary) !important;
+    border-color: var(--border-color-light) !important;
+  }
+
+  .el-dropdown-menu__item,
+  .el-select-dropdown__item {
+    color: var(--text-color-primary) !important;
+
+    &:hover {
+      background-color: var(--bg-color-tertiary) !important;
+    }
+  }
+
+  /* 表格 */
+  .el-table {
+    background-color: var(--bg-color-secondary) !important;
+    color: var(--text-color-primary) !important;
+
+    th.el-table__cell {
+      background-color: var(--bg-color-tertiary) !important;
+      color: var(--text-color-primary) !important;
+    }
+
+    tr {
+      background-color: var(--bg-color-secondary) !important;
+
+      &:hover > td.el-table__cell {
+        background-color: var(--bg-color-tertiary) !important;
+      }
+    }
+  }
+
+  /* 分页 */
+  .el-pagination {
+    button,
+    .el-pager li {
+      background-color: var(--bg-color-secondary) !important;
+      color: var(--text-color-primary) !important;
+    }
+  }
+
+  /* 消息框 */
+  .el-message-box {
+    background-color: var(--bg-color-secondary) !important;
+    border-color: var(--border-color-light) !important;
+
+    .el-message-box__title {
+      color: var(--text-color-primary) !important;
+    }
+
+    .el-message-box__message {
+      color: var(--text-color-secondary) !important;
+    }
+  }
+
+  /* 标签页 */
+  .el-tabs__item {
+    color: var(--text-color-secondary) !important;
+
+    &.is-active {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  /* 空状态 */
+  .el-empty__description {
+    color: var(--text-color-tertiary) !important;
+  }
+}
+
+/* ========== View Transitions 主题切换动画 ========== */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root) {
+  z-index: 9999;
+}
+
+/* 圆形扩散动画 */
+::view-transition-new(root) {
+  animation: theme-circle-clip 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes theme-circle-clip {
+  from {
+    clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
+  }
+  to {
+    clip-path: circle(var(--theme-transition-radius, 100%) at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
+  }
+}
+
+/* 深色模式切换时反向动画 */
+[data-theme="dark"]::view-transition-old(root) {
+  z-index: 9999;
+  animation: theme-circle-clip-reverse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-theme="dark"]::view-transition-new(root) {
+  z-index: 1;
+  animation: none;
+}
+
+@keyframes theme-circle-clip-reverse {
+  from {
+    clip-path: circle(var(--theme-transition-radius, 100%) at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
+  }
+  to {
+    clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
+  }
+}
+
+/* ========== 深色主题额外组件样式 ========== */
+[data-theme="dark"] {
+  /* Sender 组件 */
+  .el-sender {
+    background-color: var(--bg-color-secondary) !important;
+    border-color: var(--border-color-light) !important;
+  }
+
+  /* 会话列表 */
+  .conversations-wrap {
+    .conversation-item {
+      &:hover {
+        background-color: var(--bg-color-tertiary) !important;
+      }
+    }
+  }
+
+  /* 创建对话按钮 */
+  .creat-chat-btn {
+    background-color: rgba(96, 165, 250, 0.1) !important;
+    border-color: rgba(96, 165, 250, 0.2) !important;
+    color: #60a5fa !important;
+
+    &:hover:not(.is-disabled) {
+      background-color: rgba(96, 165, 250, 0.2) !important;
+    }
+  }
+
+  /* 滚动条 */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--bg-color-secondary);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--border-color-default);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--border-color-dark);
+    }
+  }
+
+  /* 代码块 */
+  pre, code {
+    background-color: var(--bg-color-tertiary) !important;
+  }
+
+  /* Markdown 样式 */
+  .markdown-body {
+    color: var(--text-color-primary) !important;
+    background-color: transparent !important;
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--text-color-primary) !important;
+      border-bottom-color: var(--border-color-light) !important;
+    }
+
+    a {
+      color: var(--el-color-primary) !important;
+    }
+
+    blockquote {
+      border-left-color: var(--border-color-default) !important;
+      color: var(--text-color-secondary) !important;
+    }
+
+    table {
+      th, td {
+        border-color: var(--border-color-light) !important;
+      }
+
+      tr {
+        background-color: var(--bg-color-secondary) !important;
+
+        &:nth-child(2n) {
+          background-color: var(--bg-color-tertiary) !important;
+        }
+      }
+    }
+
+    hr {
+      background-color: var(--border-color-light) !important;
+    }
+  }
+}
+
+/* ========== 登录弹窗深色样式 ========== */
+[data-theme="dark"] {
+  /* 登录弹窗 */
+  .glass-dialog {
+    background-color: #1f2937 !important;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
+  }
+
+  .left-section {
+    background: linear-gradient(
+      233deg,
+      rgba(59, 130, 246, 0.3) 17.67%,
+      rgba(96, 165, 250, 0.3) 70.4%
+    ) !important;
+  }
+
+  .right-section {
+    background-color: #1f2937 !important;
+
+    .content-title {
+      color: #f3f4f6 !important;
+    }
+
+    .mode-toggle {
+      color: #60a5fa !important;
+    }
+  }
+
+  .form-container,
+  .qr-container {
+    color: #e5e7eb !important;
+  }
+
+  /* 第三方登录按钮 */
+  .third-party-btn {
+    background-color: #374151 !important;
+
+    &:hover {
+      background-color: #4b5563 !important;
+    }
+  }
+
+  /* 分割线 */
+  .el-divider__text {
+    background-color: #1f2937 !important;
+    color: #9ca3af !important;
+  }
+}
+
+/* ========== 聊天页面深色样式 ========== */
+[data-theme="dark"] {
+  /* 聊天默认页 */
+  .chat-default {
+    background-color: #111827 !important;
+  }
+
+  .chat-default-wrap {
+    background-color: #111827 !important;
+  }
+
+  /* 欢迎文字 */
+  .welcome-text {
+    color: #f3f4f6 !important;
+  }
+
+  /* 打字机效果背景 */
+  .typer-container {
+    background-color: transparent !important;
+  }
+
+  .el-typewriter__fog {
+    background: linear-gradient(to right, transparent, #111827) !important;
+  }
+
+  /* 滚动按钮 */
+  .scroll-btn {
+    background-color: #374151 !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+    color: #9ca3af !important;
+
+    &:hover {
+      background-color: #4b5563 !important;
+      color: #e5e7eb !important;
+    }
+  }
+}
+
+/* ========== Sender 输入框深色样式 ========== */
+[data-theme="dark"] {
+  .el-sender,
+  .chat-defaul-sender,
+  .chat-default-sender {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+  }
+
+  .el-sender__inner {
+    background-color: #1f2937 !important;
+  }
+
+  .el-sender__header {
+    background-color: #1f2937 !important;
+    border-bottom-color: #374151 !important;
+  }
+
+  .el-sender__footer {
+    background-color: #1f2937 !important;
+    border-top-color: #374151 !important;
+  }
+
+  /* 文本域 */
+  .el-sender textarea,
+  .el-sender .el-textarea__inner {
+    background-color: transparent !important;
+    color: #f3f4f6 !important;
+
+    &::placeholder {
+      color: #6b7280 !important;
+    }
+  }
+}
+
+/* ========== 菜单深色样式 ========== */
+[data-theme="dark"] {
+  .el-menu {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+  }
+
+  .el-menu-item,
+  .el-sub-menu__title {
+    color: #e5e7eb !important;
+
+    &:hover {
+      background-color: #374151 !important;
+    }
+
+    &.is-active {
+      color: #60a5fa !important;
+    }
+  }
+
+  .el-sub-menu .el-menu {
+    background-color: #1f2937 !important;
+  }
+}
+
+/* ========== 气泡和消息深色样式 ========== */
+[data-theme="dark"] {
+  /* 气泡列表 */
+  .el-bubble-list {
+    background-color: transparent !important;
+  }
+
+  /* AI 气泡 */
+  .el-bubble[data-placement="start"] .el-bubble-content,
+  .el-bubble--start .el-bubble-content {
+    background-color: #1f2937 !important;
+    color: #e5e7eb !important;
+  }
+
+  /* 用户气泡 */
+  .el-bubble[data-placement="end"] .el-bubble-content,
+  .el-bubble--end .el-bubble-content {
+    background-color: #3b82f6 !important;
+    color: #ffffff !important;
+  }
+
+  /* 用户文件项 */
+  .user-file-item {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+    color: #e5e7eb !important;
+  }
+
+  /* 思考链 */
+  .el-thinking,
+  .thinking-chain-warp {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+    color: #9ca3af !important;
+  }
+}
+
+/* ========== 附件和文件卡片深色样式 ========== */
+[data-theme="dark"] {
+  .el-attachments,
+  .el-files-card {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+  }
+
+  .el-files-card__name {
+    color: #e5e7eb !important;
+  }
+
+  .el-files-card__size {
+    color: #9ca3af !important;
+  }
+}
+
+/* ========== 模型选择深色样式 ========== */
+[data-theme="dark"] {
+  .model-select-trigger {
+    background-color: #374151 !important;
+    border-color: #4b5563 !important;
+    color: #e5e7eb !important;
+  }
+
+  .model-select-dropdown {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+  }
+
+  .model-item {
+    color: #e5e7eb !important;
+
+    &:hover {
+      background-color: #374151 !important;
+    }
+
+    &.is-active {
+      background-color: rgba(96, 165, 250, 0.2) !important;
+    }
+  }
+}
+
+/* ========== 会话列表深色样式 ========== */
+[data-theme="dark"] {
+  .conversations-list {
+    background-color: transparent !important;
+  }
+
+  .conversation-item {
+    color: #e5e7eb !important;
+
+    &:hover {
+      background-color: #374151 !important;
+    }
+  }
+
+  .conversation-item-active {
+    background-color: #374151 !important;
+    box-shadow: none !important;
+  }
+
+  .conversation-title {
+    color: #f3f4f6 !important;
+  }
+
+  .conversation-preview {
+    color: #9ca3af !important;
+  }
+
+  .avatar-circle {
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
+  }
+}
+
+/* ========== Tooltip 和 Popover 深色样式 ========== */
+[data-theme="dark"] {
+  .el-tooltip__popper,
+  .el-popover {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+    color: #e5e7eb !important;
+  }
+
+  .el-tooltip__popper.is-dark {
+    background-color: #374151 !important;
+  }
+}
+
+/* ========== 通用文字和链接深色样式 ========== */
+[data-theme="dark"] {
+  /* 链接 */
+  a {
+    color: #60a5fa;
+
+    &:hover {
+      color: #93c5fd;
+    }
+  }
+
+  /* 标题 */
+  h1, h2, h3, h4, h5, h6 {
+    color: #f3f4f6;
+  }
+
+  /* 段落 */
+  p {
+    color: #e5e7eb;
+  }
+
+  /* 标签 */
+  .el-tag {
+    background-color: #374151 !important;
+    border-color: #4b5563 !important;
+    color: #e5e7eb !important;
+  }
+
+  /* 徽章 */
+  .el-badge__content {
+    background-color: #ef4444 !important;
+  }
+}
+
+/* ========== 布局容器深色样式 ========== */
+[data-theme="dark"] {
+  .el-container {
+    background-color: #111827 !important;
+  }
+
+  .el-main {
+    background-color: #111827 !important;
+  }
+
+  .el-aside {
+    background-color: #111827 !important;
+  }
+}
+
+/* ========== 自定义弹出框深色样式 ========== */
+[data-theme="dark"] {
+  .custom-popover .el-menu {
+    background-color: #1f2937 !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+
+    .el-menu-item {
+      color: #e5e7eb !important;
+
+      &:hover {
+        background-color: #374151 !important;
+        color: #60a5fa !important;
+      }
+
+      &.is-active {
+        color: #60a5fa !important;
+        background-color: rgba(96, 165, 250, 0.15) !important;
+      }
+    }
+  }
+}
+
+/* ========== 移动端抽屉深色样式 ========== */
+[data-theme="dark"] {
+  .mobile-drawer .el-drawer {
+    background-color: #1f2937 !important;
+  }
+
+  .drawer-title {
+    color: #f3f4f6 !important;
+  }
+
+  .mobile-menu {
+    background-color: #1f2937 !important;
+  }
+
+  .mobile-menu-actions {
+    border-top-color: #374151 !important;
+  }
+}
+
+/* ========== 二维码登录深色样式 ========== */
+[data-theme="dark"] {
+  .qr-code-container {
+    background-color: #1f2937 !important;
+  }
+
+  .qr-code-tip {
+    color: #9ca3af !important;
+  }
+}
+
+/* ========== 控制台页面深色样式 ========== */
+[data-theme="dark"] {
+  .console-container,
+  .console-page {
+    background-color: #111827 !important;
+  }
+
+  .console-card {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+  }
+
+  .console-title {
+    color: #f3f4f6 !important;
+  }
+
+  .console-desc {
+    color: #9ca3af !important;
+  }
+}
+
+/* ========== 产品/定价页面深色样式 ========== */
+[data-theme="dark"] {
+  .products-container,
+  .pricing-container {
+    background-color: #111827 !important;
+  }
+
+  .product-card {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+
+    &:hover {
+      border-color: #60a5fa !important;
+    }
+  }
+
+  .product-title {
+    color: #f3f4f6 !important;
+  }
+
+  .product-price {
+    color: #60a5fa !important;
+  }
+
+  .product-desc {
+    color: #9ca3af !important;
+  }
+}
+
+/* ========== Select 选择器深色样式 ========== */
+[data-theme="dark"] {
+  .el-select {
+    .el-input__wrapper {
+      background-color: #1f2937 !important;
+      box-shadow: 0 0 0 1px #374151 inset !important;
+    }
+
+    .el-input__inner {
+      color: #e5e7eb !important;
+    }
+  }
+
+  .el-select-dropdown {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+
+    .el-select-dropdown__item {
+      color: #e5e7eb !important;
+
+      &:hover {
+        background-color: #374151 !important;
+      }
+
+      &.selected {
+        color: #60a5fa !important;
+      }
+    }
+  }
+}
+
+/* ========== 复选框和单选框深色样式 ========== */
+[data-theme="dark"] {
+  .el-checkbox__inner,
+  .el-radio__inner {
+    background-color: #374151 !important;
+    border-color: #4b5563 !important;
+  }
+
+  .el-checkbox__label,
+  .el-radio__label {
+    color: #e5e7eb !important;
+  }
+}
+
+/* ========== Switch 开关深色样式 ========== */
+[data-theme="dark"] {
+  .el-switch__core {
+    background-color: #4b5563 !important;
+    border-color: #4b5563 !important;
+  }
+
+  .el-switch.is-checked .el-switch__core {
+    background-color: #60a5fa !important;
+    border-color: #60a5fa !important;
+  }
+}
+
+/* ========== Loading 加载深色样式 ========== */
+[data-theme="dark"] {
+  .el-loading-mask {
+    background-color: rgba(17, 24, 39, 0.9) !important;
+  }
+
+  .el-loading-text {
+    color: #e5e7eb !important;
+  }
+}
+
+/* ========== Message 消息深色样式 ========== */
+[data-theme="dark"] {
+  .el-message {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+
+    .el-message__content {
+      color: #e5e7eb !important;
+    }
+  }
+}
+
+/* ========== Notification 通知深色样式 ========== */
+[data-theme="dark"] {
+  .el-notification {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+
+    .el-notification__title {
+      color: #f3f4f6 !important;
+    }
+
+    .el-notification__content {
+      color: #9ca3af !important;
+    }
+  }
+}
+
+/* ========== 日期选择器深色样式 ========== */
+[data-theme="dark"] {
+  .el-date-picker,
+  .el-picker-panel {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+  }
+
+  .el-date-picker__header-label,
+  .el-picker-panel__icon-btn {
+    color: #e5e7eb !important;
+  }
+
+  .el-date-table td.available:hover,
+  .el-date-table td.current:not(.disabled) {
+    color: #60a5fa !important;
+  }
+}
+
+/* ========== 模型选择弹窗深色样式 ========== */
+[data-theme="dark"] {
+  .model-select-dialog {
+    .el-dialog {
+      background-color: #1f2937 !important;
+    }
+
+    .el-dialog__header {
+      border-bottom-color: #374151 !important;
+    }
+
+    .el-dialog__title {
+      color: #f3f4f6 !important;
+    }
+
+    .el-dialog__body {
+      background-color: #1f2937 !important;
+    }
+  }
+
+  .model-list-container {
+    background-color: #1f2937 !important;
+  }
+
+  /* 侧边导航 */
+  .border-gray-100 {
+    border-color: #374151 !important;
+  }
+
+  /* 分组标题 */
+  .group-title,
+  .text-gray-500 {
+    color: #9ca3af !important;
+  }
+
+  .text-gray-600 {
+    color: #d1d5db !important;
+  }
+
+  .text-gray-700 {
+    color: #e5e7eb !important;
+  }
+
+  .text-gray-400 {
+    color: #9ca3af !important;
+  }
+
+  /* 背景色 */
+  .bg-gray-50 {
+    background-color: #374151 !important;
+  }
+
+  .bg-gray-100 {
+    background-color: #4b5563 !important;
+  }
+
+  .hover\:bg-gray-50:hover {
+    background-color: #374151 !important;
+  }
+
+  .bg-blue-50 {
+    background-color: rgba(96, 165, 250, 0.2) !important;
+  }
+
+  /* 边框 */
+  .border-gray-200 {
+    border-color: #4b5563 !important;
+  }
+
+  /* 模型 Logo 背景 */
+  .bg-white {
+    background-color: #374151 !important;
+  }
+
+  /* 更多 Tailwind 背景色 */
+  .bg-green-100 {
+    background-color: rgba(52, 211, 153, 0.2) !important;
+  }
+
+  .bg-orange-100 {
+    background-color: rgba(251, 191, 36, 0.2) !important;
+  }
+
+  .bg-yellow-100 {
+    background-color: rgba(251, 191, 36, 0.2) !important;
+  }
+
+  /* 更多 Tailwind 文字色 */
+  .text-green-600 {
+    color: #34d399 !important;
+  }
+
+  .text-orange-600 {
+    color: #fbbf24 !important;
+  }
+
+  .text-yellow-600 {
+    color: #fbbf24 !important;
+  }
+
+  .text-blue-600 {
+    color: #60a5fa !important;
+  }
+
+  .text-gray-600 {
+    color: #d1d5db !important;
+  }
+}
+
+/* ========== 欢迎文字打字机效果深色样式 ========== */
+[data-theme="dark"] {
+  .welcome-text {
+    color: #f3f4f6 !important;
+  }
+
+  .el-typewriter__fog {
+    background: linear-gradient(to right, transparent, #111827) !important;
+  }
+
+  .typer-container {
+    background-color: transparent !important;
+  }
+}
+
+/* ========== 产品套餐弹窗深色样式 ========== */
+[data-theme="dark"] {
+  .product-package-dialog {
+    .el-dialog {
+      background-color: #1f2937 !important;
+    }
+  }
+
+  .package-card {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+
+    &:hover {
+      border-color: #60a5fa !important;
+    }
+  }
+
+  .package-title {
+    color: #f3f4f6 !important;
+  }
+
+  .package-price {
+    color: #60a5fa !important;
+  }
+
+  .package-desc {
+    color: #9ca3af !important;
+  }
+}
+
+/* ========== 用户中心深色样式 ========== */
+[data-theme="dark"] {
+  .user-center-card {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+  }
+
+  .user-info-item {
+    color: #e5e7eb !important;
+  }
+
+  .user-info-label {
+    color: #9ca3af !important;
+  }
+}
+
+/* ========== 尊享过滤标签深色样式 ========== */
+[data-theme="dark"] {
+  .premium-filter-tag {
+    background: linear-gradient(#1f2937, #1f2937) padding-box,
+                linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd) border-box !important;
+  }
+}
+
+/* ========== 更多 Tailwind 工具类深色覆盖 ========== */
+[data-theme="dark"] {
+  /* 边框颜色 */
+  .border-gray-100 {
+    border-color: #374151 !important;
+  }
+
+  /* 文字颜色 */
+  .text-lg,
+  .text-base,
+  .text-sm,
+  .text-xs {
+    color: inherit;
+  }
+
+  /* 字体粗细保持不变 */
+  .font-bold,
+  .font-semibold,
+  .font-medium {
+    font-weight: inherit;
+  }
+}
+
+/* ========== 联系我们弹窗深色样式 ========== */
+[data-theme="dark"] {
+  .wechat-message-box {
+    .el-message-box {
+      background-color: #1f2937 !important;
+    }
+
+    .text-blue-600 {
+      color: #60a5fa !important;
+    }
+
+    .text-gray-600 {
+      color: #9ca3af !important;
+    }
+
+    .bg-yellow-100 {
+      background-color: rgba(251, 191, 36, 0.2) !important;
+    }
+
+    .text-yellow-800 {
+      color: #fbbf24 !important;
+    }
+  }
+}
+
+/* ========== 模型库页面深色样式 ========== */
+[data-theme="dark"] {
+  .model-library-container {
+    background-color: #111827 !important;
+  }
+
+  .model-library-card {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+
+    &:hover {
+      border-color: #60a5fa !important;
+    }
+  }
+}
+
+/* ========== 深度思考组件深色样式 ========== */
+[data-theme="dark"] {
+  .deep-thinking-container {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+  }
+}
+
+/* ========== 文件选择组件深色样式 ========== */
+[data-theme="dark"] {
+  .files-select-container {
+    background-color: #1f2937 !important;
+    border-color: #374151 !important;
+  }
+}
+
+/* ========== 系统公告弹窗深色样式 ========== */
+[data-theme="dark"] {
+  .system-announcement-dialog {
+    .el-dialog {
+      background-color: #1f2937 !important;
+    }
+  }
+}
diff --git a/Yi.Ai.Vue3/src/styles/index.scss b/Yi.Ai.Vue3/src/styles/index.scss
index 11234049..d03399c6 100644
--- a/Yi.Ai.Vue3/src/styles/index.scss
+++ b/Yi.Ai.Vue3/src/styles/index.scss
@@ -4,6 +4,7 @@
 @use './element-plus';
 @use './elx';
 @use './guide-tour';
+@use './dark-theme';
 body{
   //overflow: hidden;
 }
diff --git a/Yi.Ai.Vue3/src/styles/var.scss b/Yi.Ai.Vue3/src/styles/var.scss
index 74a73edd..949e0ac1 100644
--- a/Yi.Ai.Vue3/src/styles/var.scss
+++ b/Yi.Ai.Vue3/src/styles/var.scss
@@ -219,24 +219,96 @@
 
 /* ========== 暗色模式变量 ========== */
 [data-theme="dark"] {
-  --sidebar-background-color: #1f2937;
-  --header-background-color: #111827;
+  /* ========== 颜色系统 ========== */
+  --color-primary: #60a5fa;
+  --color-primary-light: #93c5fd;
+  --color-primary-lighter: #bfdbfe;
+  --color-primary-dark: #3b82f6;
+  --color-primary-darker: #2563eb;
+
+  /* 辅助色 */
+  --color-success: #34d399;
+  --color-warning: #fbbf24;
+  --color-danger: #f87171;
+  --color-info: #9ca3af;
+
+  /* 中性色 */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-gray-50: #111827;
+  --color-gray-100: #1f2937;
+  --color-gray-200: #374151;
+  --color-gray-300: #4b5563;
+  --color-gray-400: #6b7280;
+  --color-gray-500: #9ca3af;
+  --color-gray-600: #d1d5db;
+  --color-gray-700: #e5e7eb;
+  --color-gray-800: #f3f4f6;
+  --color-gray-900: #f9fafb;
+
+  /* ========== 头部区域 ========== */
+  --header-background-color: #1f2937;
+  --header-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  --header-text-color: #f3f4f6;
+  --header-icon-color: #9ca3af;
+  --header-border: 1px solid #374151;
+
+  /* ========== 侧边栏区域 ========== */
+  --sidebar-background-color: #111827;
+  --sidebar-active-bg-color: #374151;
+  --sidebar-active-text-color: #f9fafb;
+  --sidebar-hover-bg-color: #374151;
+  --sidebar-text-color: #d1d5db;
+  --sidebar-icon-color: #9ca3af;
+  --sidebar-border-color: rgba(255, 255, 255, 0.08);
+
+  /* ========== 主要内容区域 ========== */
   --content-background-color: #111827;
+
+  /* ========== 聊天区域 ========== */
   --chat-container-bg: #111827;
   --chat-sender-bg: #1f2937;
-  --chat-bubble-ai-bg: #374151;
+  --chat-sender-border: 1px solid #374151;
+  --chat-bubble-user-bg: #3b82f6;
+  --chat-bubble-user-text: #ffffff;
+  --chat-bubble-ai-bg: #1f2937;
+  --chat-bubble-ai-text: #e5e7eb;
+  --chat-typing-indicator-color: #6b7280;
 
+  /* ========== 登录弹框 ========== */
+  --login-dialog-logo-background: #1f2937;
+  --login-dialog-logo-text-color: #f3f4f6;
+  --login-dialog-form-bg: #1f2937;
+  --login-dialog-input-border: 1px solid #374151;
+  --login-dialog-input-focus-border: 1px solid #60a5fa;
+
+  /* 文字颜色 */
   --text-color-primary: #f9fafb;
   --text-color-secondary: #e5e7eb;
   --text-color-tertiary: #9ca3af;
+  --text-color-placeholder: #6b7280;
+  --text-color-disabled: #4b5563;
+  --text-color-inverse: #111827;
 
+  /* 背景颜色 */
   --bg-color-primary: #111827;
   --bg-color-secondary: #1f2937;
   --bg-color-tertiary: #374151;
+  --bg-color-overlay: rgba(0, 0, 0, 0.7);
+  --bg-color-mask: rgba(0, 0, 0, 0.6);
 
+  /* ========== 边框 ========== */
   --border-color-light: #374151;
   --border-color-default: #4b5563;
   --border-color-dark: #6b7280;
+
+  /* ========== 阴影系统 ========== */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
 }
 
 /* ========== 响应式断点 ========== */