diff --git a/frontend/ai-dimension/src/App.vue b/frontend/ai-dimension/src/App.vue
index 5654c8c..9ea99f6 100644
--- a/frontend/ai-dimension/src/App.vue
+++ b/frontend/ai-dimension/src/App.vue
@@ -9,7 +9,6 @@ import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
 
 onLaunch(() => {
   console.log('[AI维度] App launched')
-  // 初始化主题
   initTheme()
 })
 
@@ -22,78 +21,108 @@ onHide(() => {
 })
 
 function initTheme() {
-  // 从本地存储读取主题偏好
-  const theme = uni.getStorageSync('theme') || 'dark'
+  const theme = uni.getStorageSync('theme') || 'light'
   applyTheme(theme)
 }
 
 function applyTheme(theme) {
-  if (theme === 'light') {
-    document.documentElement.classList.add('theme-light')
-  } else {
-    document.documentElement.classList.remove('theme-light')
+  try {
+    // H5 环境直接操作 document
+    const root = document.documentElement
+    if (theme === 'dark') {
+      root.classList.add('theme-dark')
+      root.classList.remove('theme-light')
+    } else {
+      root.classList.remove('theme-dark')
+      root.classList.add('theme-light')
+    }
+  } catch (e) {
+    // 小程序环境：document 不存在，直接忽略
   }
 }
 </script>
 
 <style>
-/* 全局样式 - 直接定义 CSS 变量（不通过 @import 避免循环） */
-page {
-  --bg-primary: #14141e;
-  --bg-secondary: #181828;
-  --bg-tertiary: #1c1a34;
-  --glass-bg: rgba(255, 255, 255, 0.06);
-  --glass-border: rgba(255, 255, 255, 0.08);
-  --glass-hover: rgba(255, 255, 255, 0.1);
-  --glass-hover-border: rgba(255, 255, 255, 0.15);
-  --glass-strong: rgba(255, 255, 255, 0.12);
-  --glass-dim-bg: rgba(124, 77, 255, 0.06);
-  --text-primary: rgba(255, 255, 255, 0.95);
-  --text-secondary: rgba(255, 255, 255, 0.7);
-  --text-tertiary: rgba(255, 255, 255, 0.5);
-  --text-muted: rgba(255, 255, 255, 0.3);
-  --color-brand: #8b5cf6;
-  --color-brand-light: #a78bfa;
-  --color-brand-dark: #7c3aed;
-  --color-brand-bg: rgba(139, 92, 246, 0.12);
-  --color-brand-glow: rgba(139, 92, 246, 0.15);
-  --dim1-color: #a78bfa;
-  --dim1-bg: rgba(139, 92, 246, 0.12);
-  --dim1-icon-bg: rgba(139, 92, 246, 0.2);
-  --dim1-border: rgba(139, 92, 246, 0.18);
-  --dim1-glow: rgba(139, 92, 246, 0.08);
-  --dim2-color: #60a5fa;
-  --dim2-bg: rgba(96, 165, 250, 0.12);
-  --dim2-icon-bg: rgba(96, 165, 250, 0.2);
-  --dim2-border: rgba(96, 165, 250, 0.18);
-  --dim2-glow: rgba(96, 165, 250, 0.08);
-  --dim3-color: #34d399;
-  --dim3-bg: rgba(52, 211, 153, 0.12);
-  --dim3-icon-bg: rgba(52, 211, 153, 0.2);
-  --dim3-border: rgba(52, 211, 153, 0.18);
-  --dim3-glow: rgba(52, 211, 153, 0.08);
-  --dim4-color: #fbbf24;
-  --dim4-bg: rgba(251, 191, 36, 0.12);
-  --dim4-icon-bg: rgba(251, 191, 36, 0.2);
-  --dim4-border: rgba(251, 191, 36, 0.18);
-  --dim4-glow: rgba(251, 191, 36, 0.08);
-  --dim5-color: #fb7185;
-  --dim5-bg: rgba(251, 113, 133, 0.12);
-  --dim5-icon-bg: rgba(251, 113, 133, 0.2);
-  --dim5-border: rgba(251, 113, 133, 0.18);
-  --dim5-glow: rgba(251, 113, 133, 0.08);
-  --color-free: #34d399;
-  --color-free-bg: rgba(52, 211, 153, 0.12);
-  --color-pro: #fbbf24;
-  --color-pro-bg: rgba(251, 191, 36, 0.12);
-  --color-vip: #fb7185;
-  --color-vip-bg: rgba(251, 113, 133, 0.12);
-  --color-hot: #fb7185;
-  --color-hot-bg: rgba(251, 113, 133, 0.15);
-  --color-new: #60a5fa;
-  --color-new-bg: rgba(96, 165, 250, 0.15);
-  --color-pick: #a78bfa;
-  --color-pick-bg: rgba(139, 92, 246, 0.15);
+/* ============================================
+   宇之然AI维度 — 全局主题
+   默认：亮色模式  |  .theme-dark：暗色模式
+   ============================================ */
+
+/* ---- 亮色模式（默认） ---- */
+page, .theme-light {
+  /* 基础色 — 清爽浅灰 */
+  --bg-primary: #f5f5f7;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #e8e8ed;
+
+  /* 玻璃拟态 */
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(0, 0, 0, 0.06);
+  --glass-hover: rgba(255, 255, 255, 0.85);
+  --glass-hover-border: rgba(0, 0, 0, 0.1);
+  --glass-strong: rgba(255, 255, 255, 0.9);
+  --glass-dim-bg: rgba(139, 92, 246, 0.05);
+
+  /* 文字 */
+  --text-primary: rgba(0, 0, 0, 0.88);
+  --text-secondary: rgba(0, 0, 0, 0.55);
+  --text-tertiary: rgba(0, 0, 0, 0.4);
+  --text-muted: rgba(0, 0, 0, 0.25);
+  --text-disabled: rgba(0, 0, 0, 0.2);
+
+  /* 品牌色 */
+  --color-brand: #7c4dff;
+  --color-brand-light: #b388ff;
+  --color-brand-dark: #651fff;
+  --color-brand-bg: rgba(124, 77, 255, 0.08);
+  --color-brand-glow: rgba(124, 77, 255, 0.12);
+
+  /* 维度色 */
+  --dim1-color: #7c4dff;
+  --dim1-bg: rgba(124, 77, 255, 0.08);
+  --dim1-icon-bg: rgba(124, 77, 255, 0.15);
+  --dim1-border: rgba(124, 77, 255, 0.15);
+  --dim1-glow: rgba(124, 77, 255, 0.06);
+
+  --dim2-color: #0ea5e9;
+  --dim2-bg: rgba(14, 165, 233, 0.08);
+  --dim2-icon-bg: rgba(14, 165, 233, 0.15);
+  --dim2-border: rgba(14, 165, 233, 0.15);
+  --dim2-glow: rgba(14, 165, 233, 0.06);
+
+  --dim3-color: #10b981;
+  --dim3-bg: rgba(16, 185, 129, 0.08);
+  --dim3-icon-bg: rgba(16, 185, 129, 0.15);
+  --dim3-border: rgba(16, 185, 129, 0.15);
+  --dim3-glow: rgba(16, 185, 129, 0.06);
+
+  --dim4-color: #f59e0b;
+  --dim4-bg: rgba(245, 158, 11, 0.08);
+  --dim4-icon-bg: rgba(245, 158, 11, 0.15);
+  --dim4-border: rgba(245, 158, 11, 0.15);
+  --dim4-glow: rgba(245, 158, 11, 0.06);
+
+  --dim5-color: #ef4444;
+  --dim5-bg: rgba(239, 68, 68, 0.08);
+  --dim5-icon-bg: rgba(239, 68, 68, 0.15);
+  --dim5-border: rgba(239, 68, 68, 0.15);
+  --dim5-glow: rgba(239, 68, 68, 0.06);
+
+  /* 功能色 */
+  --color-free: #10b981;
+  --color-free-bg: rgba(16, 185, 129, 0.1);
+  --color-pro: #f59e0b;
+  --color-pro-bg: rgba(245, 158, 11, 0.1);
+  --color-vip: #ef4444;
+  --color-vip-bg: rgba(239, 68, 68, 0.1);
+  --color-hot: #ef4444;
+  --color-hot-bg: rgba(239, 68, 68, 0.12);
+  --color-new: #0ea5e9;
+  --color-new-bg: rgba(14, 165, 233, 0.12);
+  --color-pick: #7c4dff;
+  --color-pick-bg: rgba(124, 77, 255, 0.12);
+
+  /* 圆角/间距/过渡 */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
@@ -108,24 +137,121 @@ page {
   --blur-bg: 20px;
   --transition-fast: 0.2s ease;
   --transition-normal: 0.3s ease;
+  --glow-brand: 0 0 20px rgba(124, 77, 255, 0.08);
+  --glow-brand-strong: 0 0 30px rgba(124, 77, 255, 0.12);
+}
+
+/* ---- 暗色模式 ---- */
+.theme-dark {
+  /* 基础色 */
+  --bg-primary: #14141e;
+  --bg-secondary: #181828;
+  --bg-tertiary: #1c1a34;
+
+  --glass-bg: rgba(255, 255, 255, 0.06);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-hover: rgba(255, 255, 255, 0.1);
+  --glass-hover-border: rgba(255, 255, 255, 0.15);
+  --glass-strong: rgba(255, 255, 255, 0.12);
+  --glass-dim-bg: rgba(124, 77, 255, 0.06);
+
+  --text-primary: rgba(255, 255, 255, 0.95);
+  --text-secondary: rgba(255, 255, 255, 0.7);
+  --text-tertiary: rgba(255, 255, 255, 0.5);
+  --text-muted: rgba(255, 255, 255, 0.3);
+  --text-disabled: rgba(255, 255, 255, 0.15);
+
+  --color-brand: #8b5cf6;
+  --color-brand-light: #a78bfa;
+  --color-brand-dark: #7c3aed;
+  --color-brand-bg: rgba(139, 92, 246, 0.12);
+  --color-brand-glow: rgba(139, 92, 246, 0.15);
+
+  --dim1-color: #a78bfa;
+  --dim1-bg: rgba(139, 92, 246, 0.12);
+  --dim1-icon-bg: rgba(139, 92, 246, 0.2);
+  --dim1-border: rgba(139, 92, 246, 0.18);
+  --dim1-glow: rgba(139, 92, 246, 0.08);
+
+  --dim2-color: #60a5fa;
+  --dim2-bg: rgba(96, 165, 250, 0.12);
+  --dim2-icon-bg: rgba(96, 165, 250, 0.2);
+  --dim2-border: rgba(96, 165, 250, 0.18);
+  --dim2-glow: rgba(96, 165, 250, 0.08);
+
+  --dim3-color: #34d399;
+  --dim3-bg: rgba(52, 211, 153, 0.12);
+  --dim3-icon-bg: rgba(52, 211, 153, 0.2);
+  --dim3-border: rgba(52, 211, 153, 0.18);
+  --dim3-glow: rgba(52, 211, 153, 0.08);
+
+  --dim4-color: #fbbf24;
+  --dim4-bg: rgba(251, 191, 36, 0.12);
+  --dim4-icon-bg: rgba(251, 191, 36, 0.2);
+  --dim4-border: rgba(251, 191, 36, 0.18);
+  --dim4-glow: rgba(251, 191, 36, 0.08);
+
+  --dim5-color: #fb7185;
+  --dim5-bg: rgba(251, 113, 133, 0.12);
+  --dim5-icon-bg: rgba(251, 113, 133, 0.2);
+  --dim5-border: rgba(251, 113, 133, 0.18);
+  --dim5-glow: rgba(251, 113, 133, 0.08);
+
+  --color-free: #34d399;
+  --color-free-bg: rgba(52, 211, 153, 0.12);
+  --color-pro: #fbbf24;
+  --color-pro-bg: rgba(251, 191, 36, 0.12);
+  --color-vip: #fb7185;
+  --color-vip-bg: rgba(251, 113, 133, 0.12);
+  --color-hot: #fb7185;
+  --color-hot-bg: rgba(251, 113, 133, 0.15);
+  --color-new: #60a5fa;
+  --color-new-bg: rgba(96, 165, 250, 0.15);
+  --color-pick: #a78bfa;
+  --color-pick-bg: rgba(139, 92, 246, 0.15);
+
   --glow-brand: 0 0 20px rgba(139, 92, 246, 0.1);
   --glow-brand-strong: 0 0 30px rgba(139, 92, 246, 0.15);
+}
+
+/* 全局排版 */
+page {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   background-color: var(--bg-primary);
   color: var(--text-secondary);
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 view {
   box-sizing: border-box;
 }
 
-/* 滚动条隐藏 */
 ::-webkit-scrollbar {
   display: none;
   width: 0;
   height: 0;
 }
+
+/* 卡片通用 */
+.card {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  backdrop-filter: blur(var(--blur-bg));
+  -webkit-backdrop-filter: blur(var(--blur-bg));
+  transition: all var(--transition-normal);
+}
+
+.gradient-brand {
+  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--color-brand-light), var(--color-brand));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/ai-dimension/src/pages/achievements/achievements.vue b/frontend/ai-dimension/src/pages/achievements/achievements.vue
index 79768cc..b57ed19 100644
--- a/frontend/ai-dimension/src/pages/achievements/achievements.vue
+++ b/frontend/ai-dimension/src/pages/achievements/achievements.vue
@@ -178,7 +178,7 @@ function formatDate(dateStr) {
 .title {
   font-size: 22px;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-primary);
 }
 
 .unlock-count {
@@ -240,7 +240,7 @@ function formatDate(dateStr) {
 
 .category-name {
   font-size: 15px;
-  color: #fff;
+  color: var(--text-primary);
   font-weight: 500;
   flex: 1;
 }
diff --git a/frontend/ai-dimension/src/pages/chat/chat.vue b/frontend/ai-dimension/src/pages/chat/chat.vue
index 0393cd4..a1862d3 100644
--- a/frontend/ai-dimension/src/pages/chat/chat.vue
+++ b/frontend/ai-dimension/src/pages/chat/chat.vue
@@ -237,7 +237,7 @@ function goShare() {
 
 .chat-name {
   font-size: 16px;
-  color: white;
+  color: var(--text-primary);
   font-weight: 600;
   display: block;
 }
diff --git a/frontend/ai-dimension/src/pages/dimension/dimension.vue b/frontend/ai-dimension/src/pages/dimension/dimension.vue
index 878c679..5e7cc50 100644
--- a/frontend/ai-dimension/src/pages/dimension/dimension.vue
+++ b/frontend/ai-dimension/src/pages/dimension/dimension.vue
@@ -194,7 +194,7 @@ function goDetail(item) {
   overflow: hidden;
 }
 .dim-banner-icon { font-size: 28px; display: block; margin-bottom: 8px; }
-.dim-banner-title { font-size: 22px; color: #fff; display: block; margin-bottom: 6px; }
+.dim-banner-title { font-size: 22px; color: var(--text-primary); display: block; margin-bottom: 6px; }
 .dim-banner-desc {
   font-size: 12px;
   color: rgba(255,255,255,0.4);
diff --git a/frontend/ai-dimension/src/pages/favorites/favorites.vue b/frontend/ai-dimension/src/pages/favorites/favorites.vue
index 5e5114d..b0e80ad 100644
--- a/frontend/ai-dimension/src/pages/favorites/favorites.vue
+++ b/frontend/ai-dimension/src/pages/favorites/favorites.vue
@@ -134,7 +134,7 @@ function goHome() {
 .title {
   font-size: 22px;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-primary);
 }
 
 .count-badge {
diff --git a/frontend/ai-dimension/src/pages/index/index.vue b/frontend/ai-dimension/src/pages/index/index.vue
index 9f89443..5c2ad65 100644
--- a/frontend/ai-dimension/src/pages/index/index.vue
+++ b/frontend/ai-dimension/src/pages/index/index.vue
@@ -195,7 +195,7 @@ function goNewsDetail(item) {
 }
 .brand-text .title {
   font-size: 20px;
-  color: #fff;
+  color: var(--text-primary);
   font-weight: 700;
   letter-spacing: 1px;
 }
@@ -225,7 +225,7 @@ function goNewsDetail(item) {
 }
 .greeting-title {
   font-size: 26px;
-  color: #fff;
+  color: var(--text-primary);
   font-weight: 700;
 }
 .greeting-highlight {
@@ -266,7 +266,7 @@ function goNewsDetail(item) {
 }
 .section-title {
   font-size: 17px;
-  color: #fff;
+  color: var(--text-primary);
   font-weight: 600;
   letter-spacing: 0.5px;
 }
diff --git a/frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue b/frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue
index f20ecc5..8825483 100644
--- a/frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue
+++ b/frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue
@@ -152,7 +152,7 @@ function dimDotColor(id) {
 .title {
   font-size: 22px;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-primary);
 }
 
 // 维度切换
@@ -178,7 +178,7 @@ function dimDotColor(id) {
 .dim-tab.active {
   background: linear-gradient(135deg, rgba(179, 136, 255, 0.15), rgba(77, 182, 172, 0.15));
   border-color: rgba(179, 136, 255, 0.3);
-  color: #fff;
+  color: var(--text-primary);
   font-weight: 500;
 }
 
diff --git a/frontend/ai-dimension/src/pages/login/login.vue b/frontend/ai-dimension/src/pages/login/login.vue
index c7a781c..297d9ec 100644
--- a/frontend/ai-dimension/src/pages/login/login.vue
+++ b/frontend/ai-dimension/src/pages/login/login.vue
@@ -14,51 +14,49 @@
       <text class="app-title">宇之然 AI 维度</text>
       <text class="app-subtitle">从 5 个维度系统理解人工智能</text>
 
-      <!-- 微信小程序登录 -->
-      <view class="login-method" v-if="isMiniApp">
-        <button class="wechat-btn" @click="wechatLogin">
-          <image class="wechat-icon" src="/static/icons/wechat.svg" mode="aspectFit" />
-          微信一键登录
-        </button>
-        <text class="login-tip">登录后，即刻开启你的 AI 探索之旅</text>
+      <!-- Tab 切换 — 两种模式共用 -->
+      <view class="tab-switch">
+        <text class="tab-item" :class="{ active: activeTab === 'login' }" @click="activeTab = 'login'">登录</text>
+        <text class="tab-item" :class="{ active: activeTab === 'register' }" @click="activeTab = 'register'">注册</text>
       </view>
 
-      <!-- H5 登录/注册 -->
-      <view class="h5-login" v-else>
-        <!-- Tab 切换 -->
-        <view class="tab-switch">
-          <text class="tab-item" :class="{ active: activeTab === 'login' }" @click="activeTab = 'login'">登录</text>
-          <text class="tab-item" :class="{ active: activeTab === 'register' }" @click="activeTab = 'register'">注册</text>
+      <!-- 登录表单 -->
+      <view class="form-card" v-if="activeTab === 'login'">
+        <view class="form-item">
+          <text class="form-label">用户名</text>
+          <input class="form-input" v-model="loginForm.username" placeholder="请输入用户名" />
         </view>
-
-        <!-- 登录表单 -->
-        <view class="form-card" v-if="activeTab === 'login'">
-          <view class="form-item">
-            <text class="form-label">用户名</text>
-            <input class="form-input" v-model="loginForm.username" placeholder="请输入用户名" />
-          </view>
-          <view class="form-item">
-            <text class="form-label">密码</text>
-            <input class="form-input" v-model="loginForm.password" type="password" placeholder="请输入密码" />
-          </view>
-          <button class="submit-btn" :loading="loading" @click="handleLogin">登 录</button>
+        <view class="form-item">
+          <text class="form-label">密码</text>
+          <input class="form-input" v-model="loginForm.password" type="password" placeholder="请输入密码" />
         </view>
+        <view class="submit-btn" :class="{ loading: loading }" @click="handleLogin">
+          <text>{{ loading ? '登录中...' : '登录' }}</text>
+        </view>
+        <!-- 微信小程序一键登录入口 -->
+        <view class="wx-login-row" v-if="isMiniApp">
+          <view class="wx-login-btn" @click="wechatLogin">
+            <text>微信一键登录</text>
+          </view>
+        </view>
+      </view>
 
-        <!-- 注册表单 -->
-        <view class="form-card" v-else>
-          <view class="form-item">
-            <text class="form-label">用户名</text>
-            <input class="form-input" v-model="registerForm.username" placeholder="3-20位字符" />
-          </view>
-          <view class="form-item">
-            <text class="form-label">昵称</text>
-            <input class="form-input" v-model="registerForm.nickName" placeholder="显示名称" />
-          </view>
-          <view class="form-item">
-            <text class="form-label">密码</text>
-            <input class="form-input" v-model="registerForm.password" type="password" placeholder="至少6位" />
-          </view>
-          <button class="submit-btn" :loading="loading" @click="handleRegister">注 册</button>
+      <!-- 注册表单 -->
+      <view class="form-card" v-if="activeTab === 'register'">
+        <view class="form-item">
+          <text class="form-label">用户名</text>
+          <input class="form-input" v-model="registerForm.username" placeholder="3-20 位字符" />
+        </view>
+        <view class="form-item">
+          <text class="form-label">昵称</text>
+          <input class="form-input" v-model="registerForm.nickName" placeholder="显示名称（选填）" />
+        </view>
+        <view class="form-item">
+          <text class="form-label">密码</text>
+          <input class="form-input" v-model="registerForm.password" type="password" placeholder="至少 6 位" />
+        </view>
+        <view class="submit-btn" :class="{ loading: loading }" @click="handleRegister">
+          <text>{{ loading ? '注册中...' : '注册' }}</text>
         </view>
       </view>
 
@@ -71,15 +69,19 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useUserStore } from '@/stores/index'
 
-const isMiniApp = ref(false)
 // 检测是否为微信小程序环境
+const isMiniApp = ref(false)
+const platform = uni.getSystemInfoSync().platform
 try {
-  isMiniApp.value = !!uni.getSystemInfoSync().brand &&
-    (uni.getSystemInfoSync().platform === 'devtools' ||
-     (typeof wx !== 'undefined' && wx.getSystemInfoSync))
+  const sysInfo = uni.getSystemInfoSync()
+  // 小程序环境：platform 为 ios/android/devtools，且有 brand/version 等字段
+  if (sysInfo && sysInfo.version && sysInfo.platform) {
+    // 有 weixin 特有字段即为小程序
+    isMiniApp.value = true
+  }
 } catch (e) {
   // H5 环境
 }
@@ -94,11 +96,9 @@ const registerForm = ref({ username: '', password: '', nickName: '' })
 
 /**
  * 微信小程序登录
- * 调用 wx.login 获取 code → 后端 code2Session → 获取 token
  */
 const wechatLogin = async () => {
   try {
-    // 获取微信登录 code
     const loginRes = await new Promise((resolve, reject) => {
       uni.login({
         success: resolve,
@@ -114,7 +114,6 @@ const wechatLogin = async () => {
     loading.value = true
     await userStore.login(loginRes.code, {})
 
-    // 登录成功，跳转首页
     uni.showToast({ title: '登录成功', icon: 'success' })
     setTimeout(() => {
       uni.switchTab({ url: '/pages/index/index' })
@@ -159,7 +158,7 @@ const handleRegister = async () => {
     return
   }
   if (registerForm.value.password.length < 6) {
-    uni.showToast({ title: '密码至少6位', icon: 'none' })
+    uni.showToast({ title: '密码至少 6 位', icon: 'none' })
     return
   }
 
@@ -186,18 +185,19 @@ const handleRegister = async () => {
 .login-page {
   position: relative;
   width: 100%;
-  height: 100vh;
+  min-height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
+  background: var(--bg-primary);
 
   // 背景装饰光球
   .bg-orb {
     position: absolute;
     border-radius: 50%;
     filter: blur(60px);
-    opacity: 0.4;
+    opacity: 0.3;
     pointer-events: none;
   }
   .orb-1 {
@@ -220,7 +220,8 @@ const handleRegister = async () => {
     position: relative;
     z-index: 1;
     width: 100%;
-    padding: 0 40px;
+    max-width: 360px;
+    padding: 0 32px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -229,16 +230,16 @@ const handleRegister = async () => {
   // Logo
   .logo-wrap {
     position: relative;
-    width: 80px;
-    height: 80px;
-    margin-bottom: 20px;
+    width: 72px;
+    height: 72px;
+    margin-bottom: 16px;
 
     .logo-ring {
       position: absolute;
       inset: 0;
-      border-radius: 20px;
+      border-radius: 18px;
       background: linear-gradient(135deg, var(--dim1-color), var(--dim3-color));
-      box-shadow: 0 8px 32px rgba(179, 136, 255, 0.3);
+      box-shadow: 0 8px 32px rgba(124, 77, 255, 0.2);
     }
     .logo-text {
       position: absolute;
@@ -246,130 +247,146 @@ const handleRegister = async () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 32px;
+      font-size: 28px;
       font-weight: 700;
       color: white;
     }
   }
 
   .app-title {
-    font-size: 28px;
+    font-size: 24px;
     font-weight: 700;
     color: var(--text-primary);
-    letter-spacing: 2px;
-    margin-bottom: 8px;
+    letter-spacing: 1px;
+    margin-bottom: 6px;
   }
   .app-subtitle {
-    font-size: 14px;
+    font-size: 13px;
     color: var(--text-secondary);
-    margin-bottom: 40px;
+    margin-bottom: 32px;
   }
 
-  // 微信登录按钮
-  .wechat-btn {
-    width: 80%;
-    height: 50px;
+  // Tab 切换
+  .tab-switch {
+    display: flex;
+    width: 100%;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--glass-border);
+
+    .tab-item {
+      flex: 1;
+      text-align: center;
+      padding: 10px 0;
+      color: var(--text-secondary);
+      font-size: 15px;
+      font-weight: 500;
+      border-bottom: 2px solid transparent;
+      transition: all 0.3s;
+
+      &.active {
+        color: var(--color-brand);
+        border-bottom-color: var(--color-brand);
+      }
+    }
+  }
+
+  // 表单卡片
+  .form-card {
+    width: 100%;
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 24px 20px;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+  }
+
+  .form-item {
+    margin-bottom: 16px;
+
+    .form-label {
+      display: block;
+      font-size: 13px;
+      color: var(--text-secondary);
+      margin-bottom: 6px;
+      font-weight: 500;
+    }
+    .form-input {
+      width: 100%;
+      height: 44px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--glass-border);
+      border-radius: 10px;
+      padding: 0 14px;
+      color: var(--text-primary);
+      font-size: 14px;
+      box-sizing: border-box;
+      outline: none;
+
+      &::placeholder {
+        color: var(--text-disabled);
+      }
+    }
+  }
+
+  // 提交按钮
+  .submit-btn {
+    width: 100%;
+    height: 46px;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 10px;
-    background: linear-gradient(135deg, #07c160, #06ad56);
+    background: linear-gradient(135deg, var(--color-brand), var(--dim3-color));
     color: white;
-    border: none;
-    border-radius: 12px;
-    font-size: 16px;
+    border-radius: 10px;
+    font-size: 15px;
     font-weight: 600;
-    box-shadow: 0 4px 16px rgba(7, 193, 96, 0.3);
+    margin-top: 8px;
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(124, 77, 255, 0.25);
+    transition: opacity 0.3s;
 
-    .wechat-icon {
-      width: 22px;
-      height: 22px;
+    &:active {
+      opacity: 0.8;
+    }
+    &.loading {
+      opacity: 0.7;
     }
   }
-  .login-tip {
-    font-size: 12px;
-    color: var(--text-secondary);
+
+  // 微信一键登录
+  .wx-login-row {
     margin-top: 16px;
-  }
+    padding-top: 16px;
+    border-top: 1px solid var(--glass-border);
+    display: flex;
+    justify-content: center;
 
-  // H5 登录
-  .h5-login {
-    width: 80%;
-    max-width: 320px;
-
-    .tab-switch {
+    .wx-login-btn {
+      padding: 10px 28px;
       display: flex;
-      margin-bottom: 20px;
-
-      .tab-item {
-        flex: 1;
-        text-align: center;
-        padding: 10px;
-        color: var(--text-secondary);
-        font-size: 15px;
-        border-bottom: 2px solid transparent;
-        transition: all 0.3s;
-
-        &.active {
-          color: var(--dim1-color);
-          border-bottom-color: var(--dim1-color);
-        }
-      }
-    }
-
-    .form-card {
-      background: rgba(255, 255, 255, 0.04);
-      border: 1px solid rgba(255, 255, 255, 0.08);
-      border-radius: 16px;
-      padding: 24px 20px;
-      backdrop-filter: blur(20px);
-    }
-
-    .form-item {
-      margin-bottom: 16px;
-
-      .form-label {
-        display: block;
-        font-size: 13px;
-        color: var(--text-secondary);
-        margin-bottom: 6px;
-      }
-      .form-input {
-        width: 100%;
-        height: 42px;
-        background: rgba(255, 255, 255, 0.06);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 8px;
-        padding: 0 14px;
-        color: var(--text-primary);
-        font-size: 14px;
-        box-sizing: border-box;
-
-        &::placeholder {
-          color: var(--text-disabled);
-        }
-      }
-    }
-
-    .submit-btn {
-      width: 100%;
-      height: 44px;
-      background: linear-gradient(135deg, var(--dim1-color), var(--dim3-color));
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      background: linear-gradient(135deg, #07c160, #06ad56);
       color: white;
-      border: none;
-      border-radius: 8px;
-      font-size: 15px;
+      border-radius: 10px;
+      font-size: 14px;
       font-weight: 600;
-      margin-top: 8px;
-      box-shadow: 0 4px 16px rgba(179, 136, 255, 0.25);
+      cursor: pointer;
+      box-shadow: 0 4px 16px rgba(7, 193, 96, 0.3);
+
+      &:active {
+        opacity: 0.8;
+      }
     }
   }
 
+  // 底部信息
   .footer-info {
-    position: absolute;
-    bottom: 40px;
+    margin-top: 40px;
     font-size: 11px;
-    color: var(--text-disabled);
+    color: var(--text-muted);
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/ai-dimension/src/pages/news/news.vue b/frontend/ai-dimension/src/pages/news/news.vue
index 22d91f0..1a5194f 100644
--- a/frontend/ai-dimension/src/pages/news/news.vue
+++ b/frontend/ai-dimension/src/pages/news/news.vue
@@ -206,7 +206,7 @@ onMounted(() => {
 .nav-title {
   font-size: 16px;
   font-weight: 600;
-  color: #fff;
+  color: var(--text-primary);
 }
 
 .nav-share { font-size: 22px; color: rgba(255,255,255,0.5); }
@@ -246,7 +246,7 @@ onMounted(() => {
   font-size: 22px;
   font-weight: 700;
   line-height: 1.45;
-  color: #fff;
+  color: var(--text-primary);
   margin: 12px 20px 16px;
 }
 
diff --git a/frontend/ai-dimension/src/pages/payment/payment.vue b/frontend/ai-dimension/src/pages/payment/payment.vue
index 3c335c9..8caed5f 100644
--- a/frontend/ai-dimension/src/pages/payment/payment.vue
+++ b/frontend/ai-dimension/src/pages/payment/payment.vue
@@ -223,7 +223,7 @@ function goBack() {
 .header-title {
   font-size: 22px;
   font-weight: 700;
-  color: white;
+  color: var(--text-primary);
   display: block;
 }
 
@@ -264,7 +264,7 @@ function goBack() {
 .plan-name {
   font-size: 18px;
   font-weight: 700;
-  color: white;
+  color: var(--text-primary);
   display: block;
   margin-bottom: 6px;
 }
diff --git a/frontend/ai-dimension/src/pages/profile/profile.vue b/frontend/ai-dimension/src/pages/profile/profile.vue
index ddeefb9..cab73ab 100644
--- a/frontend/ai-dimension/src/pages/profile/profile.vue
+++ b/frontend/ai-dimension/src/pages/profile/profile.vue
@@ -318,7 +318,7 @@ function goSettings() {
 
 .profile-name {
   font-size: 18px;
-  color: white;
+  color: var(--text-primary);
   font-weight: 600;
   display: block;
 }
@@ -348,7 +348,7 @@ function goSettings() {
 
 .plan-title {
   font-size: 16px;
-  color: white;
+  color: var(--text-primary);
   font-weight: 600;
   display: block;
 }
diff --git a/frontend/ai-dimension/src/pages/settings/settings.vue b/frontend/ai-dimension/src/pages/settings/settings.vue
index ff015ef..e75247e 100644
--- a/frontend/ai-dimension/src/pages/settings/settings.vue
+++ b/frontend/ai-dimension/src/pages/settings/settings.vue
@@ -8,18 +8,22 @@
     <view class="card">
       <view class="setting-item" @click="togglePush">
         <view class="s-icon" style="background:rgba(255,213,79,0.1);color:#ffd54f">🔔</view>
-        <text class="s-label">推送通知</text>
-        <text class="s-desc">接收每日 AI 趋势推送</text>
+        <view class="s-text">
+          <text class="s-label">推送通知</text>
+          <text class="s-desc">接收每日 AI 趋势推送</text>
+        </view>
         <view class="s-switch" :class="{ active: pushOn }">
           <view class="s-switch-knob" :class="{ on: pushOn }"></view>
         </view>
       </view>
-      <view class="setting-item">
+      <view class="setting-item" @click="toggleDarkMode">
         <view class="s-icon" style="background:rgba(77,208,225,0.1);color:#4dd0e1">🌙</view>
-        <text class="s-label">深色模式</text>
-        <text class="s-desc">当前已启用暗色风格</text>
-        <view class="s-switch active">
-          <view class="s-switch-knob on"></view>
+        <view class="s-text">
+          <text class="s-label">暗色模式</text>
+          <text class="s-desc">{{ darkMode ? '已开启暗色风格' : '当前为亮色风格' }}</text>
+        </view>
+        <view class="s-switch" :class="{ active: darkMode }">
+          <view class="s-switch-knob" :class="{ on: darkMode }"></view>
         </view>
       </view>
     </view>
@@ -29,18 +33,24 @@
     <view class="card">
       <view class="setting-item" @click="showAbout">
         <view class="s-icon" style="background:rgba(179,136,255,0.1);color:#b388ff">ℹ️</view>
-        <text class="s-label">关于「宇之然AI维度」</text>
+        <view class="s-text">
+          <text class="s-label">关于「宇之然AI维度」</text>
+        </view>
         <text class="s-arrow">→</text>
       </view>
       <view class="setting-item" @click="showContact">
         <view class="s-icon" style="background:rgba(102,187,106,0.1);color:#66bb6a">📧</view>
-        <text class="s-label">联系方式</text>
-        <text class="s-desc">客服邮箱：support@yuzhiran.com</text>
+        <view class="s-text">
+          <text class="s-label">联系方式</text>
+          <text class="s-desc">客服邮箱：support@yuzhiran.com</text>
+        </view>
         <text class="s-arrow">→</text>
       </view>
       <view class="setting-item" @click="showAgreement">
         <view class="s-icon" style="background:rgba(239,83,80,0.1);color:#ef5350">📄</view>
-        <text class="s-label">用户协议 / 隐私政策</text>
+        <view class="s-text">
+          <text class="s-label">用户协议 / 隐私政策</text>
+        </view>
         <text class="s-arrow">→</text>
       </view>
     </view>
@@ -50,9 +60,15 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 const pushOn = ref(true)
+const darkMode = ref(false)
+
+onMounted(() => {
+  // 读取当前主题
+  darkMode.value = uni.getStorageSync('theme') === 'dark'
+})
 
 function togglePush() {
   pushOn.value = !pushOn.value
@@ -62,6 +78,32 @@ function togglePush() {
   })
 }
 
+function toggleDarkMode() {
+  darkMode.value = !darkMode.value
+  const theme = darkMode.value ? 'dark' : 'light'
+  uni.setStorageSync('theme', theme)
+  applyTheme(theme)
+  uni.showToast({
+    title: darkMode.value ? '已切换为暗色模式' : '已切换为亮色模式',
+    icon: 'none'
+  })
+}
+
+function applyTheme(theme) {
+  try {
+    const root = document.documentElement
+    if (theme === 'dark') {
+      root.classList.add('theme-dark')
+      root.classList.remove('theme-light')
+    } else {
+      root.classList.remove('theme-dark')
+      root.classList.add('theme-light')
+    }
+  } catch (e) {
+    // mini-program 忽略
+  }
+}
+
 function showAbout() {
   uni.showModal({
     title: '关于「宇之然AI维度」',
@@ -98,7 +140,7 @@ function showAgreement() {
 
 .page-title {
   font-size: 22px;
-  color: white;
+  color: var(--text-primary);
   font-weight: 600;
   display: block;
   margin: 6px 0 22px;
@@ -106,15 +148,14 @@ function showAgreement() {
 
 .section-title {
   font-size: 12px;
-  color: rgba(255,255,255,0.3);
+  color: var(--text-muted);
   margin: 18px 0 10px;
-  text-transform: uppercase;
   letter-spacing: 1px;
 }
 
 .card {
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   padding: 4px 16px;
 }
@@ -124,7 +165,7 @@ function showAgreement() {
   align-items: center;
   gap: 14px;
   padding: 14px 0;
-  border-bottom: 1px solid rgba(255,255,255,0.04);
+  border-bottom: 1px solid var(--glass-border);
 }
 .setting-item:last-child { border-bottom: none; }
 
@@ -139,25 +180,27 @@ function showAgreement() {
   flex-shrink: 0;
 }
 
-.s-label {
+.s-text {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.s-label {
   font-size: 14px;
-  color: rgba(255,255,255,0.85);
-  display: block;
+  color: var(--text-primary);
 }
 
 .s-desc {
   font-size: 11px;
-  color: rgba(255,255,255,0.35);
-  display: block;
-  margin-top: 3px;
+  color: var(--text-tertiary);
   line-height: 1.3;
-  flex: 1;
 }
 
 .s-arrow {
   font-size: 14px;
-  color: rgba(255,255,255,0.15);
+  color: var(--text-muted);
 }
 
 // 开关
@@ -165,13 +208,13 @@ function showAgreement() {
   width: 44px;
   height: 24px;
   border-radius: 12px;
-  background: rgba(255,255,255,0.1);
+  background: rgba(0, 0, 0, 0.1);
   position: relative;
   flex-shrink: 0;
   transition: background 0.3s;
 }
 .s-switch.active {
-  background: rgba(179,136,255,0.4);
+  background: rgba(124, 77, 255, 0.4);
 }
 .s-switch-knob {
   width: 20px;
@@ -182,14 +225,15 @@ function showAgreement() {
   top: 2px;
   left: 2px;
   transition: left 0.3s;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 .s-switch-knob.on { left: 22px; }
 
 .version {
   text-align: center;
   font-size: 11px;
-  color: rgba(255,255,255,0.1);
+  color: var(--text-muted);
   margin-top: 30px;
   display: block;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/ai-dimension/src/pages/trend/trend.vue b/frontend/ai-dimension/src/pages/trend/trend.vue
index 6af0bba..eda4566 100644
--- a/frontend/ai-dimension/src/pages/trend/trend.vue
+++ b/frontend/ai-dimension/src/pages/trend/trend.vue
@@ -199,7 +199,7 @@ function getSampleData() {
 .header-title {
   font-size: 24px;
   font-weight: 700;
-  color: white;
+  color: var(--text-primary);
   display: block;
 }
 
diff --git a/frontend/ai-dimension/src/styles/theme.scss b/frontend/ai-dimension/src/styles/theme.scss
index fd0f39b..e8df101 100644
--- a/frontend/ai-dimension/src/styles/theme.scss
+++ b/frontend/ai-dimension/src/styles/theme.scss
@@ -1,127 +1,27 @@
 /* ============================================
-   宇之然AI维度 — 主题系统 v2
-   使用 CSS 自定义属性，一键切换主题
+   宇之然AI维度 — 主题系统 v3
+   亮色默认 + CSS 自定义属性切换
    ============================================ */
 
-/* ---- 主题色板 ----
-   🌌 宇宙深空：深紫黑渐变背景
-   🟣 紫 — 品牌色、AI 起源
-   🔵 青 — AI 发展、科技
-   🟢 青绿 — AI 当前
-   🟡 金 — AI 学习
-   🔴 珊瑚 — AI 趋势
-   ============================================ */
+/* 
+ * 注意: 此文件通过 uni.scss 注入到每个组件
+ * 但全局 CSS 变量定义在 App.vue 的非 scoped <style> 中
+ * 此文件只保留 SCSS 变量 + 工具类，防止重复
+ */
 
-:root,
-page {
-  /* === 基础色 — 深空紫黑 === */
-  --bg-primary: #14141e;
-  --bg-secondary: #181828;
-  --bg-tertiary: #1c1a34;
+/* ---- SCSS 变量（方便组件内使用） ---- */
+$color-brand: #7c4dff;
+$color-brand-light: #b388ff;
+$color-bg-primary: #f5f5f7;
+$color-bg-dark: #14141e;
 
-  /* === 玻璃拟态 — 足够可见 === */
-  --glass-bg: rgba(255, 255, 255, 0.06);
-  --glass-border: rgba(255, 255, 255, 0.08);
-  --glass-hover: rgba(255, 255, 255, 0.1);
-  --glass-hover-border: rgba(255, 255, 255, 0.15);
-  --glass-strong: rgba(255, 255, 255, 0.12);
-  --glass-dim-bg: rgba(124, 77, 255, 0.06);
-
-  /* === 文字 — 更清晰的分层 === */
-  --text-primary: rgba(255, 255, 255, 0.95);
-  --text-secondary: rgba(255, 255, 255, 0.7);
-  --text-tertiary: rgba(255, 255, 255, 0.5);
-  --text-muted: rgba(255, 255, 255, 0.3);
-
-  /* === 品牌色 — 紫色系 === */
-  --color-brand: #8b5cf6;
-  --color-brand-light: #a78bfa;
-  --color-brand-dark: #7c3aed;
-  --color-brand-bg: rgba(139, 92, 246, 0.12);
-  --color-brand-glow: rgba(139, 92, 246, 0.15);
-
-  /* === 维度色系 — 更饱和 === */
-
-  /* dim1: AI 起源 — 紫罗兰 */
-  --dim1-color: #a78bfa;
-  --dim1-bg: rgba(139, 92, 246, 0.12);
-  --dim1-icon-bg: rgba(139, 92, 246, 0.2);
-  --dim1-border: rgba(139, 92, 246, 0.18);
-  --dim1-glow: rgba(139, 92, 246, 0.08);
-
-  /* dim2: AI 发展 — 天蓝 */
-  --dim2-color: #60a5fa;
-  --dim2-bg: rgba(96, 165, 250, 0.12);
-  --dim2-icon-bg: rgba(96, 165, 250, 0.2);
-  --dim2-border: rgba(96, 165, 250, 0.18);
-  --dim2-glow: rgba(96, 165, 250, 0.08);
-
-  /* dim3: AI 当前 — 翠绿 */
-  --dim3-color: #34d399;
-  --dim3-bg: rgba(52, 211, 153, 0.12);
-  --dim3-icon-bg: rgba(52, 211, 153, 0.2);
-  --dim3-border: rgba(52, 211, 153, 0.18);
-  --dim3-glow: rgba(52, 211, 153, 0.08);
-
-  /* dim4: AI 学习 — 琥珀金 */
-  --dim4-color: #fbbf24;
-  --dim4-bg: rgba(251, 191, 36, 0.12);
-  --dim4-icon-bg: rgba(251, 191, 36, 0.2);
-  --dim4-border: rgba(251, 191, 36, 0.18);
-  --dim4-glow: rgba(251, 191, 36, 0.08);
-
-  /* dim5: AI 趋势 — 玫瑰红 */
-  --dim5-color: #fb7185;
-  --dim5-bg: rgba(251, 113, 133, 0.12);
-  --dim5-icon-bg: rgba(251, 113, 133, 0.2);
-  --dim5-border: rgba(251, 113, 133, 0.18);
-  --dim5-glow: rgba(251, 113, 133, 0.08);
-
-  /* === 功能色 === */
-  --color-free: #34d399;
-  --color-free-bg: rgba(52, 211, 153, 0.12);
-  --color-pro: #fbbf24;
-  --color-pro-bg: rgba(251, 191, 36, 0.12);
-  --color-vip: #fb7185;
-  --color-vip-bg: rgba(251, 113, 133, 0.12);
-  --color-hot: #fb7185;
-  --color-hot-bg: rgba(251, 113, 133, 0.15);
-  --color-new: #60a5fa;
-  --color-new-bg: rgba(96, 165, 250, 0.15);
-  --color-pick: #a78bfa;
-  --color-pick-bg: rgba(139, 92, 246, 0.15);
-
-  /* === 圆角 === */
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 16px;
-  --radius-xl: 20px;
-  --radius-full: 9999px;
-
-  /* === 间距 === */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 12px;
-  --spacing-lg: 16px;
-  --spacing-xl: 20px;
-  --spacing-2xl: 24px;
-
-  /* === 玻璃模糊 === */
-  --blur-bg: 20px;
-
-  /* === 过渡 === */
-  --transition-fast: 0.2s ease;
-  --transition-normal: 0.3s ease;
-
-  /* === 辉光 === */
-  --glow-brand: 0 0 20px rgba(139, 92, 246, 0.1);
-  --glow-brand-strong: 0 0 30px rgba(139, 92, 246, 0.15);
-}
-
-/* ============================================
-   全局排版
-   ============================================ */
+$dim1-color: #7c4dff;
+$dim2-color: #0ea5e9;
+$dim3-color: #10b981;
+$dim4-color: #f59e0b;
+$dim5-color: #ef4444;
 
+/* 全局排版 */
 page {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;