From b11e962344ae101c40bfcad28e774df3f17f1424 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Fri, 12 Jun 2026 12:34:41 +0900
Subject: [PATCH] Fix navbar text and background colors in dark mode

Drive the navbar text from the theme-reactive --hd-fg-* vars instead of
Bootstrap's baked-in dark color, so it flips light when the background
goes dark. Also fade the beginscroll gradient to --hd-bg-canvas rather
than a hardcoded white.
---
 layouts/partials/nav.html |  6 +++---
 static/css/custom.css     | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 052e668..b921492 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -38,9 +38,9 @@
                     </a>
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                         {{ range .Children }}
-                        <a href="{{ .URL }}" class="dropdown-item"
-                            >{{ .Name }}</a
-                        >
+                        <a href="{{ .URL }}" class="dropdown-item">
+                            {{ .Name }}
+                        </a>
                         {{ end }}
                     </div>
                     {{ else }}
diff --git a/static/css/custom.css b/static/css/custom.css
index ad74107..a51a327 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -61,6 +61,15 @@
 }
 
 nav.navbar {
+    /* Bootstrap bakes the navbar text to a fixed dark color, so it stays dark
+       on the dark background in dark mode. Drive it from the theme-reactive
+       --hd-fg-* vars so the text flips light when the background goes dark. */
+    --bs-navbar-color: var(--hd-fg-2);
+    --bs-navbar-hover-color: var(--hd-fg-1);
+    --bs-navbar-active-color: var(--hd-fg-1);
+    --bs-navbar-brand-color: var(--hd-fg-1);
+    --bs-navbar-brand-hover-color: var(--hd-fg-1);
+    color: var(--hd-fg-2);
     background: var(--hd-bg-canvas);
     box-shadow: 0 0px 3px 0 var(--hd-accent);
     border-bottom: 1px solid var(--hd-accent);
@@ -69,7 +78,11 @@ nav.navbar {
 }
 nav.navbar.beginscroll {
     background:
-        linear-gradient(90deg, var(--hd-accent-subtle) 0%, white 100%),
+        linear-gradient(
+            90deg,
+            var(--hd-accent-subtle) 0%,
+            var(--hd-bg-canvas) 100%
+        ),
         var(--hd-accent-subtle);
     box-shadow: none;
     border-bottom: none;