随浏览器

public/css/style.css

@@ -389,7 +389,6 @@ input:checked + .slider:before {
   font-size: 0.85rem;
   font-weight: 500;
   color: var(--accent-indigo);
-  margin-right: 8px;
   opacity: 0.9;
 }
 

public/index.html

@@ -15,7 +15,11 @@
       const savedTheme = localStorage.getItem('theme');
       const settings = window.SITE_SETTINGS || {};
       const defaultTheme = settings.default_theme || 'dark';
-      const theme = savedTheme || defaultTheme;
+      let theme = savedTheme || defaultTheme;
+      
+      if (theme === 'auto') {
+        theme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+      }
       
       if (theme === 'light') {
         document.documentElement.classList.add('light-theme');
@@ -203,10 +207,10 @@
         <div class="chart-card chart-card-gauges" id="gaugesCard">
           <div class="chart-card-header">
             <h2 class="chart-title">
-              <span class="title-time" id="gaugesTime"></span>
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="chart-title-icon">
                 <path d="M12 20V10M18 20V4M6 20v-4"/>
               </svg>
+              <span class="title-time" id="gaugesTime"></span>
               资源使用概览
             </h2>
           </div>
@@ -359,6 +363,7 @@
                 <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>
+                  <option value="auto">跟随浏览器/系统</option>
                 </select>
               </div>
               <div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">

public/js/app.js

@@ -164,21 +164,23 @@
   }
 
   function applyTheme(theme) {
-    const isLight = theme === 'light';
+    let actualTheme = theme;
+    if (theme === 'auto') {
+      actualTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    }
+    
+    const isLight = actualTheme === 'light';
     dom.themeToggle.checked = isLight;
     document.documentElement.classList.toggle('light-theme', isLight);
-    updateThemeIcons(theme);
+    updateThemeIcons(actualTheme);
   }
 
   function updateThemeIcons(theme) {
+    // Icons are in the slider, we adjust their opacity to show which one is active
     if (theme === 'light') {
-      dom.sunIcon.style.display = 'block'; // Always show both in slider, but might adjust opacity
-      dom.moonIcon.style.display = 'block';
       dom.sunIcon.style.opacity = '0.3';
       dom.moonIcon.style.opacity = '1';
     } else {
-      dom.sunIcon.style.display = 'block';
-      dom.moonIcon.style.display = 'block';
       dom.sunIcon.style.opacity = '1';
       dom.moonIcon.style.opacity = '0.3';
     }
@@ -487,13 +489,18 @@
 
       // Handle Theme Priority: localStorage > Site Default
       const savedTheme = localStorage.getItem('theme');
-      if (savedTheme) {
-        applyTheme(savedTheme);
-      } else if (settings.default_theme) {
-        applyTheme(settings.default_theme);
-      } else {
-        applyTheme('dark'); // Fallback
-      }
+      const themeToApply = savedTheme || settings.default_theme || 'dark';
+      applyTheme(themeToApply);
+
+      // Listen for system theme changes if set to auto
+      window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => {
+        const currentSavedTheme = localStorage.getItem('theme');
+        const defaultTheme = window.SITE_SETTINGS ? window.SITE_SETTINGS.default_theme : 'dark';
+        const activeTheme = currentSavedTheme || defaultTheme;
+        if (activeTheme === 'auto') {
+          applyTheme('auto');
+        }
+      });
     } catch (err) {
       console.error('Error loading site settings:', err);
     }