fixed theme button

public/index.html

@@ -11,14 +11,14 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link rel="stylesheet" href="css/variables.css">
-    <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="css/layout.css">
-    <link rel="stylesheet" href="css/header.css">
-    <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/animations.css">
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/components.css">
     <link rel="stylesheet" href="css/footer.css">
+    <link rel="stylesheet" href="css/header.css">
+    <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/responsive.css">
+    <link rel="stylesheet" href="css/variables.css">
     <script src="js/components.js" defer></script>
     <script src="js/theme.js" defer></script>
 </head>

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
+    // Wait for components to be loaded before initializing the theme system
-    if (document.readyState === 'loading') {
+    document.addEventListener('componentsLoaded', function() {
-        document.addEventListener('DOMContentLoaded', initializeThemeSystem);
+        console.log('Components loaded, initializing theme system...');
-    } else {
         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
@@ -67,6 +70,10 @@
         try {
             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);
@@ -78,11 +85,15 @@
 
     function updateThemeIcon(theme) {
         try {
-            const themeIcon = document.querySelector('.theme-toggle i');
+            const themeToggle = document.querySelector('.theme-toggle');
-            if (themeIcon) {
+            if (themeToggle) {
-                themeIcon.className = theme === THEMES.DARK 
+                // Ensure both icons exist
-                    ? 'fas fa-sun' 
+                if (!themeToggle.querySelector('.fa-sun')) {
-                    : 'fas fa-moon';
+                    themeToggle.innerHTML = `
+                        <i class="fas fa-sun"></i>
+                        <i class="fas fa-moon"></i>
+                    `;
+                }
             }
         } catch (error) {
             console.warn('Theme icon update error:', error);
@@ -111,4 +122,4 @@
             console.warn('Theme persistence error:', error);
         }
     }
-})();
+})();