Fix top Navigation Bar blue color while reloading (#290)

Author: Jitmisra

webui/src/app/globals.css

@@ -87,3 +87,33 @@ body {
   background-color: #121212;
   color: #e0e0e0;
 }
+
+.MuiAppBar-root {
+  transition: background-color 0.3s ease, color 0.3s ease !important;
+}
+
+.dark .MuiAppBar-root {
+  background-color: var(--primary-dark, #1565c0) !important;
+  opacity: 0.9;
+}
+
+.dark .MuiAppBar-root,
+.navbar-dark-mode {
+  background-color: #1565c0 !important;
+  color: white !important;
+  opacity: 0.9;
+}
+
+.navbar-dark-mode {
+  background-color: #1565c0 !important;
+  color: white !important;
+}
+
+.dark .MuiAppBar-root *,
+.navbar-dark-mode * {
+  color: white !important;
+}
+
+.MuiAppBar-root[class*='navbar-dark-mode'] {
+  background-color: #1565c0 !important;
+}

webui/src/app/theme-provider.tsx

@@ -37,29 +37,39 @@ export const useTheme = () => useContext(ThemeContext);
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [isDarkMode, setIsDarkMode] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     // Check if user has already set a preference
     const storedTheme = localStorage.getItem("theme");
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
-    if (storedTheme === "dark" || (!storedTheme && prefersDark)) {
-      setIsDarkMode(true);
+    const shouldBeDark = storedTheme === "dark" || (!storedTheme && prefersDark);
+    
+    // Apply dark mode styles
+    if (shouldBeDark) {
       document.documentElement.classList.add("dark");
+      // Also add the special class to navbar if it exists
+      document.getElementById('navbar')?.classList.add('navbar-dark-mode');
     } else {
-      setIsDarkMode(false);
       document.documentElement.classList.remove("dark");
+      document.getElementById('navbar')?.classList.remove('navbar-dark-mode');
     }
+    
+    setIsDarkMode(shouldBeDark);
+    setMounted(true);
   }, []);
 
   const toggleTheme = () => {
     setIsDarkMode((prev) => {
       const newMode = !prev;
       if (newMode) {
         document.documentElement.classList.add("dark");
+        document.getElementById('navbar')?.classList.add('navbar-dark-mode');
         localStorage.setItem("theme", "dark");
       } else {
         document.documentElement.classList.remove("dark");
+        document.getElementById('navbar')?.classList.remove('navbar-dark-mode');
         localStorage.setItem("theme", "light");
       }
       return newMode;

webui/src/app/ui/banner.tsx

@@ -27,6 +27,7 @@ import Brightness4Icon from "@mui/icons-material/Brightness4";
 import Brightness7Icon from "@mui/icons-material/Brightness7";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 const links = [
     {
@@ -45,12 +46,31 @@ const links = [
 export default function Banner() {
     const { isDarkMode, toggleTheme } = useTheme();
     const pathname = usePathname();
+    const [mounted, setMounted] = useState(false);
+    
+    useEffect(() => {
+        const storedTheme = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const shouldBeDark = storedTheme === "dark" || (!storedTheme && prefersDark);
+
+        if (shouldBeDark) {
+            document.getElementById('navbar')?.classList.add('navbar-dark-mode');
+        }
+
+        setMounted(true);
+    }, []);
 
     // Generate breadcrumb from pathname
     const breadcrumbs = pathname.split('/').filter(Boolean);
 
     return (
-        <AppBar position="fixed" elevation={1} className="bg-white dark:bg-dark-paper text-gray-800 dark:text-gray-100">
+        <AppBar 
+            position="fixed" 
+            elevation={1} 
+            id="navbar"
+            className={`transition-colors duration-300 ${isDarkMode ? 'navbar-dark-mode' : 'bg-white text-gray-800'}`}
+            sx={{ bgcolor: isDarkMode ? '#1565c0 !important' : '#ffffff' }}
+        >
             <Container maxWidth={false}>
                 <Toolbar className="flex justify-between">
                     <div className="flex items-center">