From fd0a52368ae2b36740fd06cbf3a99a08e1550e15 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Mon, 6 Apr 2026 16:26:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=BB=91=E6=9A=97=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E7=99=BD=E5=A4=A9=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 19 ++++++++++++-------
 public/js/app.js  | 26 ++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 1bca004..bb91bb7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -437,13 +437,18 @@
                 <label for="logoUrlInput">Logo URL (图片链接，为空则显示默认图标)</label>
                 <input type="url" id="logoUrlInput" placeholder="https://example.com/logo.png">
               </div>
-              <div class="form-group" style="margin-top: 15px;">
-                <label for="defaultThemeInput">默认主题</label>
-                <select id="defaultThemeInput"
-                  style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
-                  <option value="dark">默认夜间模式</option>
-                  <option value="light">默认白天模式</option>
-                </select>
+              <div class="settings-section" style="margin-top: 25px; border-top: 1px solid var(--border-color); padding-top: 20px;">
+                <h4 style="font-size: 0.85rem; color: var(--accent-indigo); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px;">界面外观 (Appearance)</h4>
+                <div class="form-group">
+                  <label for="defaultThemeInput">色彩主题模式</label>
+                  <select id="defaultThemeInput"
+                    style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); width: 100%;">
+                    <option value="auto">跟随系统主题 (Sync with OS)</option>
+                    <option value="dark">强制深色模式 (Always Dark)</option>
+                    <option value="light">强制浅色模式 (Always Light)</option>
+                  </select>
+                  <p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;">选择“跟随系统”后，应用将自动同步您操作系统或浏览器的黑暗/白天模式设置。</p>
+                </div>
               </div>
               <div class="form-group" style="margin-top: 15px;">
                 <label for="show95BandwidthInput">24h趋势图默认显示 95计费线</label>
diff --git a/public/js/app.js b/public/js/app.js
index 1e1e7c9..bee5886 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -183,6 +183,17 @@
 
     // Auth & Theme listeners
     dom.themeToggle.addEventListener('change', toggleTheme);
+    
+    // System Theme Listener (Real-time)
+    const systemThemeMedia = window.matchMedia('(prefers-color-scheme: light)');
+    if (systemThemeMedia.addEventListener) {
+      systemThemeMedia.addEventListener('change', () => {
+        const savedTheme = localStorage.getItem('theme') || (window.SITE_SETTINGS && window.SITE_SETTINGS.default_theme) || 'dark';
+        if (savedTheme === 'auto') {
+          applyTheme('auto');
+        }
+      });
+    }
     dom.btnLogin.addEventListener('click', openLoginModal);
     dom.closeLoginModal.addEventListener('click', closeLoginModal);
     dom.loginForm.addEventListener('submit', handleLogin);
@@ -1705,6 +1716,16 @@
         networkChart.draw();
       }
     }
+
+    // Default Theme
+    if (settings.default_theme) {
+      if (dom.defaultThemeInput) dom.defaultThemeInput.value = settings.default_theme;
+      // If setting is 'auto', we also sync immediately
+      const savedTheme = localStorage.getItem('theme');
+      if (!savedTheme || savedTheme === 'auto') {
+        applyTheme(settings.default_theme);
+      }
+    }
   }
 
   async function saveSiteSettings() {
@@ -1723,6 +1744,11 @@
       p95_type: dom.p95TypeSelect.value
     };
 
+    // If user sets default to auto, we should clear their manual override or set it to auto
+    if (settings.default_theme === 'auto') {
+      localStorage.setItem('theme', 'auto');
+    }
+
     dom.btnSaveSiteSettings.disabled = true;
     dom.btnSaveSiteSettings.textContent = '保存中...';