From 4e66024be02a55058b075c0c6b9e1c547cee89c2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 18 May 2026 14:37:44 +0000
Subject: [PATCH] Fix sidebar header and theme toggle colours on
 accent-coloured nav backgrounds

Site name, site description, and dark/light mode toggle all used content-area
colour variables (--font-colour, --font-colour-muted, --divider) which clash
when nav-background differs from the page background. All three now reference
the nav colour variables (--nav-link-colour, --nav-link-active-colour,
--nav-section-heading-colour) with graceful fallbacks, so they remain legible
on any nav background colour without requiring new theme.yml keys.

https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB
---
 app/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/index.html b/app/index.html
index e37e50f..a910816 100644
--- a/app/index.html
+++ b/app/index.html
@@ -196,14 +196,14 @@ body {
   font-family: var(--font-title);
   font-weight: var(--font-title-weight);
   font-size: 1.15rem;
-  color: var(--font-colour);
+  color: var(--nav-link-colour, var(--font-colour));
   line-height: 1.3;
   text-decoration: none;
   display: block;
 }
-.sidebar-sitename:hover { color: var(--accent); }
+.sidebar-sitename:hover { color: var(--nav-link-active-colour, var(--accent)); }
 
-.sidebar-description { font-size: 0.8rem; color: var(--font-colour-muted); margin-top: 0.25rem; line-height: 1.4; }
+.sidebar-description { font-size: 0.8rem; color: var(--nav-section-heading-colour, var(--font-colour-muted)); margin-top: 0.25rem; line-height: 1.4; }
 
 /* Search */
 .search-container { padding: 0.75rem 1.25rem; flex-shrink: 0; }
@@ -341,9 +341,9 @@ body {
   gap: 0.5rem;
   padding: 0.4rem 0.6rem;
   font-size: 0.8rem;
-  color: var(--font-colour-muted);
+  color: var(--nav-section-heading-colour, var(--font-colour-muted));
   background: none;
-  border: 1px solid var(--divider);
+  border: 1px solid color-mix(in srgb, var(--bg-nav) 70%, var(--nav-link-colour, var(--font-colour)));
   border-radius: 6px;
   cursor: pointer;
   font-family: var(--font-body);
@@ -351,7 +351,7 @@ body {
   width: 100%;
   justify-content: center;
 }
-.theme-toggle:hover { color: var(--font-colour); border-color: var(--font-colour-muted); }
+.theme-toggle:hover { color: var(--nav-link-colour, var(--font-colour)); border-color: var(--nav-section-heading-colour, var(--font-colour-muted)); }
 .theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
 
 /* ═══════════════════════════════════════════