theme switcher fix

resources/js/theme-switcher.js

@@ -1,38 +1,72 @@
-document.addEventListener('DOMContentLoaded', function() {
+// Apply theme immediately on script load (before DOM is ready) to prevent flash
-    const themeSwitcher = document.getElementById('themeSwitcher');
+(function() {
-    const themeIcon = themeSwitcher.querySelector('.iconify');
-    const themeText = themeSwitcher.querySelector('.theme-text');
-    
-    // Check for saved theme preference or use system preference
     const savedTheme = localStorage.getItem('theme');
     const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    
+
-    if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
+    // Wait for body to be available
-        document.body.classList.add('dark-mode');
+    if (document.body) {
-        themeIcon.setAttribute('data-icon', 'mdi-weather-night');
+        applyInitialTheme();
-        themeText.textContent = 'Dark Mode';
     } else {
-        document.body.classList.add('light-mode');
+        document.addEventListener('DOMContentLoaded', applyInitialTheme);
-        themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
-        themeText.textContent = 'Light Mode';
     }
-    
+
+    function applyInitialTheme() {
+        // Remove any existing theme classes first
+        document.body.classList.remove('dark-mode', 'light-mode');
+
+        if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
+            document.body.classList.add('dark-mode');
+        } else {
+            document.body.classList.add('light-mode');
+        }
+    }
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+    const themeSwitcher = document.getElementById('themeSwitcher');
+
+    if (!themeSwitcher) {
+        console.warn('Theme switcher button not found');
+        return;
+    }
+
+    const themeIcon = themeSwitcher.querySelector('.iconify');
+    const themeText = themeSwitcher.querySelector('.theme-text');
+
+    // Function to apply theme
+    function applyTheme(theme) {
+        // Remove both classes first
+        document.body.classList.remove('dark-mode', 'light-mode');
+
+        if (theme === 'dark') {
+            document.body.classList.add('dark-mode');
+            if (themeIcon) themeIcon.setAttribute('data-icon', 'mdi-weather-night');
+            if (themeText) themeText.textContent = 'Dark Mode';
+            localStorage.setItem('theme', 'dark');
+        } else {
+            document.body.classList.add('light-mode');
+            if (themeIcon) themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
+            if (themeText) themeText.textContent = 'Light Mode';
+            localStorage.setItem('theme', 'light');
+        }
+    }
+
+    // Set initial theme UI based on current state
+    const savedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const currentTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+
+    if (currentTheme === 'dark') {
+        if (themeIcon) themeIcon.setAttribute('data-icon', 'mdi-weather-night');
+        if (themeText) themeText.textContent = 'Dark Mode';
+    } else {
+        if (themeIcon) themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
+        if (themeText) themeText.textContent = 'Light Mode';
+    }
+
     // Theme switcher click handler
     themeSwitcher.addEventListener('click', function() {
-        if (document.body.classList.contains('dark-mode')) {
+        const isDarkMode = document.body.classList.contains('dark-mode');
-            // Switch to light mode
+        applyTheme(isDarkMode ? 'light' : 'dark');
-            document.body.classList.remove('dark-mode');
-            document.body.classList.add('light-mode');
-            themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
-            themeText.textContent = 'Light Mode';
-            localStorage.setItem('theme', 'light');
-        } else {
-            // Switch to dark mode
-            document.body.classList.remove('light-mode');
-            document.body.classList.add('dark-mode');
-            themeIcon.setAttribute('data-icon', 'mdi-weather-night');
-            themeText.textContent = 'Dark Mode';
-            localStorage.setItem('theme', 'dark');
-        }
     });
 }); 

resources/views/layouts/app.blade.php

@@ -24,7 +24,7 @@
     @livewireStyles
     @bukStyles
 </head>
-<body class="light-mode">
+<body>
     <div class="theme-switcher d-none">
         1 | 2 | 3 | 4
     </div>