From 8535965ea739586d2d7826a0001061e42a648022 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Mon, 11 Aug 2025 18:04:58 +0930
Subject: [PATCH] Navbar gray when dark mode

---
 src/components/Navbar.astro | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 3481383..a952fb0 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -24,12 +24,14 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
       "mx-auto border-b-1 border-solid px-4 shadow-lg transition",
       navbarDisplay == "transparent"
         ? "border-gray-500 bg-transparent"
-        : "border-white bg-white"
+        : "border-white bg-white dark:border-gray-700 dark:bg-gray-700 dark:text-white"
     ]}
   >
     <div class="flex h-12 items-center justify-between">
       <!-- Logo -->
-      <div class="font-header flex-shrink-0 text-2xl font-bold uppercase">
+      <div
+        class="font-header text-primary flex-shrink-0 text-2xl font-bold uppercase"
+      >
         <a href="/" aria-label="Go home"
           >{person.names.first} {person.names.last}</a
         >
@@ -50,7 +52,9 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
               href={link.href}
               class:list={[
                 "font-header font-medium uppercase transition hover:text-gray-300",
-                pathName === link.href ? "text-primary" : "text-gray-500"
+                pathName === link.href
+                  ? "text-primary"
+                  : "text-gray-500 dark:text-white"
               ]}
               aria-current={pathName === link.href ? "page" : undefined}
             >
@@ -64,7 +68,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
       <div class="md:hidden">
         <button
           id="menu-toggle"
-          class="text-2xl text-gray-500 focus:outline-none"
+          class="text-2xl text-gray-500 focus:outline-none dark:text-white"
         >
           ☰
         </button>
@@ -75,7 +79,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
   <!-- Mobile Menu -->
   <div
     id="mobile-menu"
-    class="hidden space-y-2 bg-white px-4 pt-4 pb-4 font-medium shadow-lg md:hidden"
+    class="hidden space-y-2 bg-white px-4 pt-4 pb-4 font-medium shadow-lg md:hidden dark:bg-gray-600 dark:text-white"
   >
     {
       links.map((link) => (
@@ -83,7 +87,9 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
           href={link.href}
           class:list={[
             "block transition hover:text-gray-300",
-            pathName === link.href ? "text-primary" : "text-gray-500"
+            pathName === link.href
+              ? "text-primary"
+              : "text-gray-500 dark:text-white"
           ]}
           aria-current={pathName === link.href ? "page" : undefined}
         >
@@ -134,12 +140,24 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
     if (navbar) {
       if (window.scrollY === 0 && window.navbarDisplay === "transparent") {
         // At top - make navbar transparent
-        navbar.classList.remove("bg-white", "border-white");
+        navbar.classList.remove(
+          "bg-white",
+          "border-white",
+          "dark:bg-gray-700",
+          "dark:border-gray-700",
+          "dark:text-white"
+        );
         navbar.classList.add("bg-transparent", "border-gray-500");
       } else {
         // Scrolled down - add background color
         navbar.classList.remove("bg-transparent", "border-gray-500");
-        navbar.classList.add("bg-white", "border-white");
+        navbar.classList.add(
+          "bg-white",
+          "border-white",
+          "dark:bg-gray-700",
+          "dark:border-gray-700",
+          "dark:text-white"
+        );
       }
     }
   };