diff --git a/src/components/DailyTaskStatus.vue b/src/components/DailyTaskStatus.vue
index 60549fc..fb70724 100644
--- a/src/components/DailyTaskStatus.vue
+++ b/src/components/DailyTaskStatus.vue
@@ -973,7 +973,7 @@ onBeforeUnmount(() => {
 
 <style scoped lang="scss">
 .daily-task-container {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -1137,7 +1137,7 @@ onBeforeUnmount(() => {
   padding: var(--spacing-xs) var(--spacing-sm);
   border: 1px solid var(--border-light);
   border-radius: var(--border-radius-medium);
-  background: white;
+  background: var(--bg-primary);
   color: var(--text-secondary);
   font-size: var(--font-size-sm);
   cursor: pointer;
diff --git a/src/components/GameStatus.vue b/src/components/GameStatus.vue
index 6d9ee65..7f91d7c 100644
--- a/src/components/GameStatus.vue
+++ b/src/components/GameStatus.vue
@@ -596,7 +596,7 @@ onUnmounted(() => {
 }
 
 .status-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -684,16 +684,16 @@ onUnmounted(() => {
   .time-display {
     font-size: 1.5rem; /* text-2xl */
     font-weight: 700; /* font-bold */
-    color: #111827; /* text-gray-900 */
+    color: var(--text-primary);
     text-align: center;
     margin-bottom: var(--spacing-md);
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
     letter-spacing: 0.1em;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    background: var(--bg-tertiary);
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--border-light);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     transition: all 0.2s ease-in-out;
     
@@ -824,4 +824,4 @@ onUnmounted(() => {
     gap: var(--spacing-sm);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/TeamStatus.vue b/src/components/TeamStatus.vue
index f1c985b..22d7678 100644
--- a/src/components/TeamStatus.vue
+++ b/src/components/TeamStatus.vue
@@ -315,7 +315,7 @@ watch(() => presetTeamRaw.value, () => { updateAvailableTeams(); updateCurrentTe
 
 <style scoped lang="scss">
 .team-status-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -445,8 +445,8 @@ watch(() => presetTeamRaw.value, () => { updateAvailableTeams(); updateCurrentTe
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 2px solid var(--border-color, #e5e5e5);
-  background: white;
+  border: 2px solid var(--border-light);
+  background: var(--bg-primary);
 }
 
 .hero-avatar {
diff --git a/src/components/TowerStatus.vue b/src/components/TowerStatus.vue
index 23d75f0..687b029 100644
--- a/src/components/TowerStatus.vue
+++ b/src/components/TowerStatus.vue
@@ -295,7 +295,7 @@ onMounted(() => {
 <style scoped lang="scss">
 
 .tower-status-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
diff --git a/src/main.js b/src/main.js
index 259889b..9d74b9f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,5 +13,32 @@ app.use(createPinia())
 app.use(router)
 app.use(naive)
 
+// 全局主题应用：从 localStorage 读取并设置 data-theme 属性
+const applyTheme = () => {
+  const saved = localStorage.getItem('theme') || 'auto'
+  if (saved === 'dark') {
+    document.documentElement.setAttribute('data-theme', 'dark')
+  } else if (saved === 'light') {
+    document.documentElement.removeAttribute('data-theme')
+  } else {
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    if (prefersDark) document.documentElement.setAttribute('data-theme', 'dark')
+    else document.documentElement.removeAttribute('data-theme')
+
+    // 跟随系统变更
+    if (window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+        const t = localStorage.getItem('theme') || 'auto'
+        if (t === 'auto') {
+          if (e.matches) document.documentElement.setAttribute('data-theme', 'dark')
+          else document.documentElement.removeAttribute('data-theme')
+        }
+      })
+    }
+  }
+}
+
+applyTheme()
+
 // 挂载应用
-app.mount('#app')
\ No newline at end of file
+app.mount('#app')
diff --git a/src/views/DailyTasks.vue b/src/views/DailyTasks.vue
index 52e3a23..1bda630 100644
--- a/src/views/DailyTasks.vue
+++ b/src/views/DailyTasks.vue
@@ -678,12 +678,22 @@ watch(() => gameRolesStore.selectedRole, (newRole) => {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .daily-tasks-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .page-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: var(--spacing-xl) 0;
   color: white;
 }
 
+/* 深色主题下头部渐变 */
+[data-theme="dark"] .page-header {
+  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+}
+
 .header-content {
   display: flex;
   justify-content: space-between;
@@ -713,7 +723,7 @@ watch(() => gameRolesStore.selectedRole, (newRole) => {
 }
 
 .role-selector-section {
-  background: white;
+  background: var(--bg-primary);
   padding: var(--spacing-lg) 0;
   border-bottom: 1px solid var(--border-light);
 }
@@ -754,7 +764,7 @@ watch(() => gameRolesStore.selectedRole, (newRole) => {
 }
 
 .filter-section {
-  background: white;
+  background: var(--bg-primary);
   padding: var(--spacing-md) 0;
   border-bottom: 1px solid var(--border-light);
 }
@@ -832,4 +842,4 @@ watch(() => gameRolesStore.selectedRole, (newRole) => {
     width: 100%;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index f00539f..8f9a138 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -479,7 +479,7 @@ onMounted(async () => {
 
 // 导航栏
 .dashboard-nav {
-  background: white;
+  background: var(--bg-primary);
   border-bottom: 1px solid var(--border-light);
   padding: 0 var(--spacing-lg);
   position: sticky;
@@ -621,7 +621,7 @@ onMounted(async () => {
 }
 
 .stat-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-light);
@@ -689,7 +689,7 @@ onMounted(async () => {
 }
 
 .action-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-light);
@@ -731,7 +731,7 @@ onMounted(async () => {
 
 // 最近活动区域
 .recent-activity-section {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-light);
diff --git a/src/views/GameFeatures.vue b/src/views/GameFeatures.vue
index 58d9bfd..f002a1b 100644
--- a/src/views/GameFeatures.vue
+++ b/src/views/GameFeatures.vue
@@ -279,9 +279,14 @@ onUnmounted(() => {
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .game-features-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 // 页面头部
 .page-header {
-  background: white;
+  background: var(--bg-primary);
   border-bottom: 1px solid var(--border-light);
   padding: var(--spacing-lg) 0;
 }
@@ -348,7 +353,7 @@ onUnmounted(() => {
 }
 
 .feature-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -482,7 +487,7 @@ onUnmounted(() => {
 }
 
 .ws-status-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-lg);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
diff --git a/src/views/GameRoles.vue b/src/views/GameRoles.vue
index 19d7204..176601a 100644
--- a/src/views/GameRoles.vue
+++ b/src/views/GameRoles.vue
@@ -435,7 +435,7 @@ onMounted(async () => {
 }
 
 .role-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   box-shadow: var(--shadow-light);
   overflow: hidden;
@@ -572,4 +572,4 @@ onMounted(async () => {
     grid-template-columns: 1fr;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3db4c85..f70cba7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -362,7 +362,7 @@ onMounted(() => {
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
   margin-bottom: var(--spacing-md);
-  background: linear-gradient(45deg, #fff, #e6f7ff);
+  background: linear-gradient(45deg, var(--bg-primary), var(--primary-color-light));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -434,7 +434,7 @@ onMounted(() => {
 // 功能特性区域
 .features-section {
   padding: var(--spacing-2xl) 0;
-  background: white;
+  background: var(--bg-primary);
 }
 
 .section-header {
@@ -504,6 +504,10 @@ onMounted(() => {
   padding: var(--spacing-2xl) 0;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
+/* 深色主题下统计区背景 */
+[data-theme="dark"] .stats-section {
+  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+}
 
 .stats-grid {
   display: grid;
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2bfeb3f..be83026 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -283,6 +283,11 @@ onMounted(() => {
   overflow: hidden;
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .login-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .login-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -301,6 +306,12 @@ onMounted(() => {
   border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
+/* 深色主题下登录卡片 */
+[data-theme="dark"] .login-card {
+  background: rgba(17, 24, 39, 0.85);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .card-header {
   text-align: center;
   margin-bottom: var(--spacing-xl);
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 721748e..6a963ec 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -55,6 +55,11 @@ const router = useRouter()
   padding: var(--spacing-lg);
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .not-found-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .error-content {
   text-align: center;
   color: white;
@@ -113,4 +118,4 @@ const router = useRouter()
     align-items: center;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 93535d3..5c9b521 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -341,7 +341,16 @@ const savePreferences = () => {
 
 const updateTheme = (theme) => {
   preferences.theme = theme
-  // 这里可以实际应用主题变更
+  localStorage.setItem('theme', theme)
+  if (theme === 'dark') {
+    document.documentElement.setAttribute('data-theme', 'dark')
+  } else if (theme === 'light') {
+    document.documentElement.removeAttribute('data-theme')
+  } else {
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    if (prefersDark) document.documentElement.setAttribute('data-theme', 'dark')
+    else document.documentElement.removeAttribute('data-theme')
+  }
 }
 
 const changeAvatar = () => {
@@ -434,7 +443,7 @@ onMounted(() => {
 }
 
 .info-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-large);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-light);
@@ -555,4 +564,4 @@ onMounted(() => {
     width: 100%;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 12892eb..d6648d7 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -243,6 +243,11 @@ const handleRegister = async () => {
   padding: var(--spacing-lg);
 }
 
+/* 深色主题下背景 */
+[data-theme="dark"] .register-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .register-container {
   max-width: 500px;
   width: 100%;
@@ -257,6 +262,12 @@ const handleRegister = async () => {
   border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
+/* 深色主题下注册卡片 */
+[data-theme="dark"] .register-card {
+  background: rgba(17, 24, 39, 0.85);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .card-header {
   text-align: center;
   margin-bottom: var(--spacing-xl);
diff --git a/src/views/TokenImport.vue b/src/views/TokenImport.vue
index 0f3f037..91e31b8 100644
--- a/src/views/TokenImport.vue
+++ b/src/views/TokenImport.vue
@@ -488,23 +488,18 @@ const editingToken = ref(null)
 const importMethod = ref('manual')
 const refreshingTokens = ref(new Set())
 
-// 主题控制
-const isDarkTheme = computed(() => {
-  return document.documentElement.classList.contains('dark')
-})
+// 主题控制（使用 data-theme 与全局变量匹配）
+const isDarkTheme = computed(() => document.documentElement.getAttribute('data-theme') === 'dark')
 
 const toggleTheme = () => {
-  const isDark = document.documentElement.classList.contains('dark')
-  if (isDark) {
-    document.documentElement.classList.remove('dark')
+  const current = document.documentElement.getAttribute('data-theme') === 'dark'
+  if (current) {
+    document.documentElement.removeAttribute('data-theme')
     localStorage.setItem('theme', 'light')
   } else {
-    document.documentElement.classList.add('dark')
+    document.documentElement.setAttribute('data-theme', 'dark')
     localStorage.setItem('theme', 'dark')
   }
-  
-  // 触发全局主题更新
-  window.location.reload()
 }
 
 // 导入表单
@@ -1056,6 +1051,11 @@ onMounted(() => {
   padding: var(--spacing-xl) 0;
 }
 
+/* 深色主题下的页面背景 */
+[data-theme="dark"] .token-import-page {
+  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
+}
+
 .container {
   max-width: 1200px;
   margin: 0 auto;
@@ -1120,7 +1120,7 @@ onMounted(() => {
 }
 
 .import-card {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-2xl);
   box-shadow: var(--shadow-large);
@@ -1183,58 +1183,58 @@ onMounted(() => {
   align-items: center;
 }
 
-/* 深色主题强制覆盖 */
-.dark .n-form-item-label,
-.dark .n-form-item-label__text {
+/* 深色主题强制覆盖（与全局 data-theme 保持一致） */
+[data-theme="dark"] .n-form-item-label,
+[data-theme="dark"] .n-form-item-label__text {
   color: #ffffff !important;
 }
 
-.dark .n-input__input,
-.dark .n-input__textarea {
+[data-theme="dark"] .n-input__input,
+[data-theme="dark"] .n-input__textarea {
   color: #ffffff !important;
   background-color: rgba(255, 255, 255, 0.1) !important;
 }
 
-.dark .n-input__placeholder {
+[data-theme="dark"] .n-input__placeholder {
   color: rgba(255, 255, 255, 0.5) !important;
 }
 
-.dark .n-card {
+[data-theme="dark"] .n-card {
   background-color: rgba(255, 255, 255, 0.1) !important;
   color: #ffffff !important;
 }
 
-.dark .import-card {
+[data-theme="dark"] .import-card {
   background: rgba(45, 55, 72, 0.9) !important;
   color: #ffffff !important;
 }
 
-.dark .import-card h2 {
+[data-theme="dark"] .import-card h2 {
   color: #ffffff !important;
 }
 
-.dark .import-card .subtitle {
+[data-theme="dark"] .import-card .subtitle {
   color: rgba(255, 255, 255, 0.7) !important;
 }
 
-.dark .n-collapse-item__header {
+[data-theme="dark"] .n-collapse-item__header {
   color: #ffffff !important;
 }
 
-.dark .n-collapse-item__content-wrapper {
+[data-theme="dark"] .n-collapse-item__content-wrapper {
   background-color: transparent !important;
 }
 
-.dark .n-radio-button {
+[data-theme="dark"] .n-radio-button {
   color: #ffffff !important;
 }
 
-.dark .n-radio-button--checked {
+[data-theme="dark"] .n-radio-button--checked {
   background-color: rgba(16, 185, 129, 0.8) !important;
   color: #ffffff !important;
 }
 
-.dark .form-tip {
+[data-theme="dark"] .form-tip {
   color: rgba(255, 255, 255, 0.6) !important;
 }
 
@@ -1252,12 +1252,18 @@ onMounted(() => {
 }
 
 .tokens-section {
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-medium);
 }
 
+/* 深色主题下的列表区域背景 */
+[data-theme="dark"] .tokens-section {
+  background: rgba(45, 55, 72, 0.9);
+  color: #ffffff;
+}
+
 .section-header {
   display: flex;
   justify-content: space-between;
@@ -1432,7 +1438,7 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
   min-height: 400px;
-  background: white;
+  background: var(--bg-primary);
   border-radius: var(--border-radius-xl);
   box-shadow: var(--shadow-medium);
 }