From 5b7bd1ebb04c70deab7b7008f79c8807f3428586 Mon Sep 17 00:00:00 2001
From: remco <remcojandijkstra@ziggo.nl>
Date: Wed, 1 Jul 2026 16:02:01 +0200
Subject: [PATCH] fix: pre-hydration navbar color to prevent flash, fix
 hydration mismatch in color picker

---
 src/app/layout.tsx                     |  2 +-
 src/components/navbar-color-picker.tsx | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4ea02b81..26fcc374 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -42,7 +42,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
         {/* Apply the saved/default theme before first paint to avoid a flash. */}
         <script
           dangerouslySetInnerHTML={{
-            __html: `try{var s=localStorage.getItem('theme');if(s==='dark'||(!s&&${defaultDark}))document.documentElement.classList.add('dark');}catch(e){}`,
+            __html: `try{var s=localStorage.getItem('theme');if(s==='dark'||(!s&&${defaultDark}))document.documentElement.classList.add('dark');var nc=localStorage.getItem('navbarColor'),nt=localStorage.getItem('navbarTextColor');if(nc)document.documentElement.style.setProperty('--color-navbar',nc);if(nt)document.documentElement.style.setProperty('--color-navbar-text',nt);}catch(e){}`,
           }}
         />
       </head>
diff --git a/src/components/navbar-color-picker.tsx b/src/components/navbar-color-picker.tsx
index 42b99f8e..ff252948 100644
--- a/src/components/navbar-color-picker.tsx
+++ b/src/components/navbar-color-picker.tsx
@@ -22,12 +22,8 @@ const COLORS = [
 
 export function NavbarColorPicker() {
   const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(() => {
-    if (typeof document === "undefined") return 0;
-    const current = getComputedStyle(document.documentElement).getPropertyValue("--color-navbar").trim();
-    const idx = COLORS.findIndex((c) => c.value === current);
-    return idx >= 0 ? idx : 0;
-  });
+  const [active, setActive] = useState(0);
+  const [mounted, setMounted] = useState(false);
 
   function apply(index: number) {
     const c = COLORS[index];
@@ -45,12 +41,15 @@ export function NavbarColorPicker() {
   useEffect(() => {
     const saved = localStorage.getItem("navbarColor");
     const savedText = localStorage.getItem("navbarTextColor");
-    if (saved && savedText) {
-      document.documentElement.style.setProperty("--color-navbar", saved);
-      document.documentElement.style.setProperty("--color-navbar-text", savedText);
+    if (saved) {
       const idx = COLORS.findIndex((c) => c.value === saved);
       if (idx >= 0) setActive(idx);
+      document.documentElement.style.setProperty("--color-navbar", saved);
     }
+    if (savedText) {
+      document.documentElement.style.setProperty("--color-navbar-text", savedText);
+    }
+    setMounted(true);
   }, []);
 
   return (
@@ -71,7 +70,7 @@ export function NavbarColorPicker() {
         </svg>
       </button>
 
-      {open && (
+      {mounted && open && (
         <div
           className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-3 px-2 border backdrop-blur-md"
           style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}