happyDomain/website
2
0
Fork 0
Code Issues Pull requests Releases Activity

Fix navbar text and background colors in dark mode

Browse source 
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.
This commit is contained in:
nemunaire 2026-06-12 12:34:41 +09:00
commit b11e962344
2 changed files with 17 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
layouts/partials/nav.html
View file

@ -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 }}

15
static/css/custom.css
View file

@ -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;