feat: enhance theme toggle functionality with auto theme support and icon updates. Fix #243

static/js/components/Header.js

@@ -46,9 +46,21 @@ export class HeaderManager {
       // Handle theme toggle
       const themeToggle = document.querySelector('.theme-toggle');
       if (themeToggle) {
+        // Set initial state based on current theme
+        const currentTheme = localStorage.getItem('lm_theme') || 'auto';
+        themeToggle.classList.add(`theme-${currentTheme}`);
+        
         themeToggle.addEventListener('click', () => {
           if (typeof toggleTheme === 'function') {
-            toggleTheme();
+            const newTheme = toggleTheme();
+            // Update tooltip based on next toggle action
+            if (newTheme === 'light') {
+              themeToggle.title = "Switch to dark theme";
+            } else if (newTheme === 'dark') {
+              themeToggle.title = "Switch to auto theme";
+            } else {
+              themeToggle.title = "Switch to light theme";
+            }
           }
         });
       }

static/js/utils/uiHelpers.js

@@ -118,10 +118,13 @@ export function toggleTheme() {
     const currentTheme = getStorageItem('theme') || 'auto';
     let newTheme;
     
-    if (currentTheme === 'dark') {
-        newTheme = 'light';
-    } else {
+    // Cycle through themes: light → dark → auto → light
+    if (currentTheme === 'light') {
         newTheme = 'dark';
+    } else if (currentTheme === 'dark') {
+        newTheme = 'auto';
+    } else {
+        newTheme = 'light';
     }
     
     setStorageItem('theme', newTheme);
@@ -151,6 +154,21 @@ function applyTheme(theme) {
         htmlElement.setAttribute('data-theme', 'light');
         document.body.dataset.theme = 'light';
     }
+    
+    // Update the theme-toggle icon state
+    updateThemeToggleIcons(theme);
+}
+
+// New function to update theme toggle icons
+function updateThemeToggleIcons(theme) {
+    const themeToggle = document.querySelector('.theme-toggle');
+    if (!themeToggle) return;
+    
+    // Remove any existing active classes
+    themeToggle.classList.remove('theme-light', 'theme-dark', 'theme-auto');
+    
+    // Add the appropriate class based on current theme
+    themeToggle.classList.add(`theme-${theme}`);
 }
 
 export function toggleFolder(tag) {