随浏览器

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;">