fixed theme button

public/js/theme.js

@@ -11,12 +11,11 @@
     // Initialize theme immediately to prevent flash of wrong theme
     initThemeEarly();
 
-    // Then initialize everything else when DOM is ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initializeThemeSystem);
-    } else {
+    // Wait for components to be loaded before initializing the theme system
+    document.addEventListener('componentsLoaded', function() {
+        console.log('Components loaded, initializing theme system...');
         initializeThemeSystem();
-    }
+    });
 
     // Functions
     function initThemeEarly() {
@@ -35,12 +34,16 @@
     }
 
     function initializeThemeSystem() {
+        console.log('Theme system initializing...');
         try {
             // Set up theme toggle button
             const themeToggle = document.querySelector('.theme-toggle');
+            console.log('Theme toggle button found:', themeToggle);
+            
             if (themeToggle) {
                 themeToggle.addEventListener('click', toggleTheme);
                 updateThemeIcon(getCurrentTheme());
+                console.log('Theme toggle event listener added');
             }
 
             // Set up system theme change listener
@@ -68,6 +71,10 @@
             const currentTheme = getCurrentTheme();
             const newTheme = currentTheme === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
 
+            console.log('Theme Toggle clicked!');
+            console.log('Current theme:', currentTheme);
+            console.log('New theme:', newTheme);
+            
             setTheme(newTheme);
             localStorage.setItem(THEME_STORAGE_KEY, newTheme);
             updateThemeIcon(newTheme);
@@ -78,11 +85,15 @@
 
     function updateThemeIcon(theme) {
         try {
-            const themeIcon = document.querySelector('.theme-toggle i');
-            if (themeIcon) {
-                themeIcon.className = theme === THEMES.DARK 
-                    ? 'fas fa-sun' 
-                    : 'fas fa-moon';
+            const themeToggle = document.querySelector('.theme-toggle');
+            if (themeToggle) {
+                // Ensure both icons exist
+                if (!themeToggle.querySelector('.fa-sun')) {
+                    themeToggle.innerHTML = `
+                        <i class="fas fa-sun"></i>
+                        <i class="fas fa-moon"></i>
+                    `;
+                }
             }
         } catch (error) {
             console.warn('Theme icon update error:', error);