From 07d9599a2f94a95bd85eea4161f655b606bf0b2b Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 25 Apr 2025 19:39:11 +0800
Subject: [PATCH] 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          | 10 ++++++++
 static/js/utils/uiHelpers.js | 50 +++++++++++++++++++++++++++++++++---
 templates/base.html          | 14 ++++++++++
 3 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index 971d4d85..ddc8352b 100644
--- a/static/css/base.css
+++ b/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;
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index cd2edde0..90812225 100644
--- a/static/js/utils/uiHelpers.js
+++ b/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';
-    document.body.dataset.theme = theme;
-    setStorageItem('theme', theme);
+    const currentTheme = getStorageItem('theme') || 'auto';
+    let newTheme;
+    
+    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) {
diff --git a/templates/base.html b/templates/base.html
index b80a6276..201c16b0 100644
--- a/templates/base.html
+++ b/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>