feat: implement theme management with auto-detection and user preference storage. Fixes https://github.com/willmiao/ComfyUI-Lora-Manager/issues/137

static/css/base.css

@@ -59,6 +59,16 @@ html, body {
     --scrollbar-width: 8px; /* 添加滚动条宽度变量 */
 }
 
+html[data-theme="dark"] {
+    background-color: #1a1a1a !important;
+    color-scheme: dark;
+}
+
+html[data-theme="light"] {
+    background-color: #ffffff !important;
+    color-scheme: light;
+}
+
 [data-theme="dark"] {
     --bg-color: #1a1a1a;
     --text-color: #e0e0e0;

static/js/utils/uiHelpers.js

@@ -114,13 +114,55 @@ export function restoreFolderFilter() {
 }
 
 export function initTheme() {
-    document.body.dataset.theme = getStorageItem('theme') || 'dark';
+    const savedTheme = getStorageItem('theme') || 'auto';
+    applyTheme(savedTheme);
+    
+    // Update theme when system preference changes (for 'auto' mode)
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const currentTheme = getStorageItem('theme') || 'auto';
+        if (currentTheme === 'auto') {
+            applyTheme('auto');
+        }
+    });
 }
 
 export function toggleTheme() {
-    const theme = document.body.dataset.theme === 'light' ? 'dark' : 'light';
+    const currentTheme = getStorageItem('theme') || 'auto';
-    document.body.dataset.theme = theme;
+    let newTheme;
-    setStorageItem('theme', theme);
+    
+    if (currentTheme === 'dark') {
+        newTheme = 'light';
+    } else {
+        newTheme = 'dark';
+    }
+    
+    setStorageItem('theme', newTheme);
+    applyTheme(newTheme);
+    
+    // Force a repaint to ensure theme changes are applied immediately
+    document.body.style.display = 'none';
+    document.body.offsetHeight; // Trigger a reflow
+    document.body.style.display = '';
+    
+    return newTheme;
+}
+
+// Add a new helper function to apply the theme
+function applyTheme(theme) {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const htmlElement = document.documentElement;
+    
+    // Remove any existing theme attributes
+    htmlElement.removeAttribute('data-theme');
+    
+    // Apply the appropriate theme
+    if (theme === 'dark' || (theme === 'auto' && prefersDark)) {
+        htmlElement.setAttribute('data-theme', 'dark');
+        document.body.dataset.theme = 'dark';
+    } else {
+        htmlElement.setAttribute('data-theme', 'light');
+        document.body.dataset.theme = 'light';
+    }
 }
 
 export function toggleFolder(tag) {

templates/base.html

@@ -48,6 +48,20 @@
             document.documentElement.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
         });
     </script>
+    <script>
+      (function() {
+        // Apply theme immediately based on stored preference
+        const STORAGE_PREFIX = 'lora_manager_';
+        const savedTheme = localStorage.getItem(STORAGE_PREFIX + 'theme') || 'auto';
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        
+        if (savedTheme === 'dark' || (savedTheme === 'auto' && prefersDark)) {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        } else {
+          document.documentElement.setAttribute('data-theme', 'light');
+        }
+      })();
+    </script>
     {% block head_scripts %}{% endblock %}
 </head>