This is an automated email from the ASF dual-hosted git repository.
twice pushed a commit to branch unstable
in repository https://gitbox.apache.org/repos/asf/kvrocks-controller.git
The following commit(s) were added to refs/heads/unstable by this push:
new ed7c670 Fix top Navigation Bar blue color while reloading (#290)
ed7c670 is described below
commit ed7c6704ee6258b694b657b8611bc3014dfb99e9
Author: Agnik Misra <[email protected]>
AuthorDate: Sun Mar 23 07:45:59 2025 +0530
Fix top Navigation Bar blue color while reloading (#290)
---
webui/src/app/globals.css | 30 ++++++++++++++++++++++++++++++
webui/src/app/theme-provider.tsx | 16 +++++++++++++---
webui/src/app/ui/banner.tsx | 22 +++++++++++++++++++++-
3 files changed, 64 insertions(+), 4 deletions(-)
diff --git a/webui/src/app/globals.css b/webui/src/app/globals.css
index 6578a51..8a7e525 100644
--- a/webui/src/app/globals.css
+++ b/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;
+}
diff --git a/webui/src/app/theme-provider.tsx b/webui/src/app/theme-provider.tsx
index 1b7e18f..f3ec946 100644
--- a/webui/src/app/theme-provider.tsx
+++ b/webui/src/app/theme-provider.tsx
@@ -37,19 +37,27 @@ 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 = () => {
@@ -57,9 +65,11 @@ export function ThemeProvider({ children }: { children:
React.ReactNode }) {
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;
diff --git a/webui/src/app/ui/banner.tsx b/webui/src/app/ui/banner.tsx
index 69850e4..517d830 100644
--- a/webui/src/app/ui/banner.tsx
+++ b/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">
