fix(admin): navbar theme not applied on page load — defer to DOMContentLoaded

admin/index.php

@@ -198,7 +198,7 @@ function sidebarDropdownLink($url, $nome) {
     }
     echo "<li class='nav-item'><a href='/' class='nav-link'>Voltar</a></li>";
     // Fechar Navbar no HTML, e passar o conteúdo para baixo
-    echo "</ul></div></div></nav><div class='container-fluid mt-4 justify-content-center text-center'>";
+    echo "</ul></div></div></nav><script>window.__applyNavbarTheme&&window.__applyNavbarTheme();</script><div class='container-fluid mt-4 justify-content-center text-center'>";
 
     $csrfTokenHtml = htmlspecialchars(generate_csrf_token(), ENT_QUOTES, 'UTF-8');
     echo "<input type='hidden' id='global-csrf-token' value='{$csrfTokenHtml}'>";

assets/theme-switcher.js

@@ -2,29 +2,44 @@
 (function() {
     const htmlElement = document.documentElement;
     const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    
-    // Function to apply theme
-    function applyTheme(isDark) {
-        htmlElement.setAttribute('data-bs-theme', isDark ? 'dark' : 'light');
-        
-        // Handle admin navbar specifically
+
+    // Set data-bs-theme immediately (before DOM is ready) to avoid flash of wrong theme
+    htmlElement.setAttribute('data-bs-theme', darkModeQuery.matches ? 'dark' : 'light');
+
+    // Handle admin navbar class switching
+    function applyNavbarTheme(isDark) {
         const adminNavbar = document.getElementById('admin-navbar');
-        if (adminNavbar) {
-            if (isDark) {
-                adminNavbar.classList.remove('navbar-light', 'bg-light');
-                adminNavbar.classList.add('navbar-dark', 'bg-dark');
-            } else {
-                adminNavbar.classList.remove('navbar-dark', 'bg-dark');
-                adminNavbar.classList.add('navbar-light', 'bg-light');
-            }
+        if (!adminNavbar) return;
+        if (isDark) {
+            adminNavbar.classList.remove('navbar-light', 'bg-light');
+            adminNavbar.classList.add('navbar-dark', 'bg-dark');
+        } else {
+            adminNavbar.classList.remove('navbar-dark', 'bg-dark');
+            adminNavbar.classList.add('navbar-light', 'bg-light');
         }
     }
-
-    // Set initial theme based on system preference
-    applyTheme(darkModeQuery.matches);
-
-    // Listen for changes in system theme preference
-    darkModeQuery.addEventListener('change', e => {
+
+    // Exposed for inline <script> placed right after the navbar HTML — runs
+    // synchronously before paint, so there is no flash of wrong navbar theme.
+    window.__applyNavbarTheme = function () {
+        applyNavbarTheme(darkModeQuery.matches);
+    };
+
+    // DOMContentLoaded fallback (e.g. if the inline call is missing or navbar
+    // is added dynamically after page load)
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function () {
+            applyNavbarTheme(darkModeQuery.matches);
+        });
+    }
+
+    function applyTheme(isDark) {
+        htmlElement.setAttribute('data-bs-theme', isDark ? 'dark' : 'light');
+        applyNavbarTheme(isDark);
+    }
+
+    // Listen for changes in system theme preference (live OS toggle)
+    darkModeQuery.addEventListener('change', function (e) {
         applyTheme(e.matches);
     });
 })();