随浏览器

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);
     }