diff --git a/pages/settings/settings.js b/pages/settings/settings.js
index 335773d..b5f2218 100644
--- a/pages/settings/settings.js
+++ b/pages/settings/settings.js
@@ -4,6 +4,7 @@ const planMod = require('../../utils/plan')
 const iconsMod = require('../../utils/icons')
 const cloud = require('../../utils/cloud')
 const config = require('../../config')
+const darkMod = require('../../utils/darkMode')
 
 /**
  * Build the simplified plans list shown in the settings UI by overlaying
@@ -54,6 +55,13 @@ Page({
     icons: iconsMod.build(),
     nickName: '',
     avatarUrl: '',
+    // Dark mode
+    darkModePref: 'system',
+    darkModeOptions: [
+      { key: 'system', name: '跟随系统' },
+      { key: 'light', name: '浅色' },
+      { key: 'dark', name: '深色' }
+    ],
     // Editor state
     showPlanEditor: false,
     editingPlanId: '',
@@ -100,10 +108,32 @@ Page({
       icons: iconsMod.build(theme),
       plans: buildPlansList(storage.getCustomPlans()),
       nickName: profile.nickname || '',
-      avatarUrl: profile.avatarUrl || ''
+      avatarUrl: profile.avatarUrl || '',
+      darkModePref: darkMod.getPref()
     })
   },
 
+  applyThemeToPage() {
+    themeMod.applyThemeToPage(this)
+  },
+
+  onSelectDarkMode(e) {
+    const key = e.currentTarget.dataset.key
+    darkMod.setPref(key)
+    this.setData({ darkModePref: key })
+    // 通知所有已打开页面重渲染
+    const pages = getCurrentPages()
+    pages.forEach(p => {
+      if (p && typeof p.applyThemeToPage === 'function') {
+        p.applyThemeToPage()
+      } else if (p && p.route) {
+        // Tab page without method: re-apply via themeMod
+        try { themeMod.applyThemeToPage(p) } catch (e) {}
+      }
+    })
+    themeMod.applyThemeToPage(this)
+  },
+
   // --- Profile handlers ---
 
   onChooseAvatar(e) {
diff --git a/pages/settings/settings.wxml b/pages/settings/settings.wxml
index ed6e3d4..5f3a2d5 100644
--- a/pages/settings/settings.wxml
+++ b/pages/settings/settings.wxml
@@ -54,6 +54,26 @@
     </view>
   </ui-card>
 
+  <!-- 深色模式 -->
+  <ui-card variant="in">
+    <view class="section-header">
+      <image class="section-icon" src="{{icons.skinFill}}" mode="aspectFit"></image>
+      <text class="section-title">深色模式</text>
+    </view>
+    <view class="theme-list">
+      <view
+        class="theme-item {{darkModePref === item.key ? 'active' : ''}}"
+        wx:for="{{darkModeOptions}}"
+        wx:key="key"
+        data-key="{{item.key}}"
+        bindtap="onSelectDarkMode"
+      >
+        <text class="theme-name">{{item.name}}</text>
+        <image class="theme-check-img" wx:if="{{darkModePref === item.key}}" src="{{icons.check}}" mode="aspectFit"></image>
+      </view>
+    </view>
+  </ui-card>
+
   <!-- 训练计划选择 -->
   <ui-card variant="in">
     <view class="section-header">