the dark mode fix is in

static/js/main.js

@@ -1,12 +1,28 @@
-// Initialize dark mode from localStorage
+// Theme handling
 document.addEventListener('DOMContentLoaded', () => {
-    // Check if dark mode was previously enabled
-    const darkMode = localStorage.getItem('darkMode') === 'true';
-    if (darkMode) {
-        document.documentElement.classList.add('dark');
-        toggleIcons(true); // Ensure correct icon is shown
-    } else {
-        toggleIcons(false);
+    const themeToggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
+    
+    // Initialize toggle state based on current theme
+    if (themeToggle) {
+        themeToggle.checked = html.classList.contains('dark');
+        
+        // Handle toggle changes
+        themeToggle.addEventListener('change', function() {
+            const isDark = this.checked;
+            html.classList.toggle('dark', isDark);
+            localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        });
+        
+        // Listen for system theme changes
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', (e) => {
+            if (!localStorage.getItem('theme')) {
+                const isDark = e.matches;
+                html.classList.toggle('dark', isDark);
+                themeToggle.checked = isDark;
+            }
+        });
     }
 });
 
@@ -20,18 +36,40 @@ document.addEventListener('submit', (e) => {
     }
 });
 
-// Close mobile menu when clicking outside
-document.addEventListener('click', (e) => {
-    const mobileMenu = document.querySelector('[x-show="mobileMenuOpen"]');
-    const menuButton = document.querySelector('[x-on\\:click="mobileMenuOpen = !mobileMenuOpen"]');
-    
-    if (mobileMenu && menuButton && !mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
-        const alpineData = mobileMenu._x_dataStack && mobileMenu._x_dataStack[0];
-        if (alpineData && alpineData.mobileMenuOpen) {
-            alpineData.mobileMenuOpen = false;
+// Mobile menu toggle
+const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+const mobileMenu = document.getElementById('mobileMenu');
+
+if (mobileMenuBtn && mobileMenu) {
+    mobileMenuBtn.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+    });
+}
+
+// User dropdown toggle
+const userMenuBtn = document.getElementById('userMenuBtn');
+const userDropdown = document.getElementById('userDropdown');
+
+if (userMenuBtn && userDropdown) {
+    userMenuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        userDropdown.classList.toggle('active');
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
+            userDropdown.classList.remove('active');
         }
-    }
-});
+    });
+
+    // Close dropdown when pressing escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            userDropdown.classList.remove('active');
+        }
+    });
+}
 
 // Handle flash messages
 document.addEventListener('DOMContentLoaded', () => {
@@ -51,7 +89,7 @@ document.addEventListener('DOMContentLoaded', () => {
         tooltip.addEventListener('mouseenter', (e) => {
             const text = e.target.getAttribute('data-tooltip');
             const tooltipEl = document.createElement('div');
-            tooltipEl.className = 'tooltip bg-gray-900 text-white px-2 py-1 rounded text-sm absolute z-50';
+            tooltipEl.className = 'absolute z-50 px-2 py-1 text-sm text-white bg-gray-900 rounded tooltip';
             tooltipEl.textContent = text;
             document.body.appendChild(tooltipEl);
             
@@ -66,79 +104,3 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 });
-
-// Handle dropdown menus
-document.addEventListener('click', (e) => {
-    const dropdowns = document.querySelectorAll('[x-show]');
-    dropdowns.forEach(dropdown => {
-        if (!dropdown.contains(e.target) && 
-            !e.target.matches('[x-on\\:click*="open = !open"]')) {
-            const alpineData = dropdown._x_dataStack && dropdown._x_dataStack[0];
-            if (alpineData && alpineData.open) {
-                alpineData.open = false;
-            }
-        }
-    });
-});
-
-// Theme management
-const themeManager = {
-    init() {
-        // Set up toggle button when DOM is loaded
-        document.addEventListener('DOMContentLoaded', () => {
-            const toggleBtn = document.getElementById('theme-toggle');
-            if (toggleBtn) {
-                toggleBtn.addEventListener('click', () => {
-                    this.toggleTheme();
-                });
-            }
-
-            // Watch for system theme changes
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-                if (!localStorage.theme) {
-                    this.setTheme(e.matches ? 'dark' : 'light');
-                }
-            });
-
-            // Set initial theme icon state
-            this.updateThemeIcon();
-        });
-    },
-
-    setTheme(theme) {
-        if (theme === 'dark') {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
-        }
-        
-        localStorage.setItem('theme', theme);
-        this.updateThemeIcon();
-    },
-
-    toggleTheme() {
-        const isDark = document.documentElement.classList.contains('dark');
-        this.setTheme(isDark ? 'light' : 'dark');
-    },
-
-    updateThemeIcon() {
-        const isDark = document.documentElement.classList.contains('dark');
-        const sunIcon = document.querySelector('#theme-toggle .fa-sun');
-        const moonIcon = document.querySelector('#theme-toggle .fa-moon');
-        
-        if (sunIcon && moonIcon) {
-            // Show sun icon in dark mode (to indicate you can switch to light)
-            // Show moon icon in light mode (to indicate you can switch to dark)
-            if (isDark) {
-                sunIcon.classList.remove('hidden');
-                moonIcon.classList.add('hidden');
-            } else {
-                sunIcon.classList.add('hidden');
-                moonIcon.classList.remove('hidden');
-            }
-        }
-    }
-};
-
-// Initialize theme management
-themeManager.init();