From bf00a3e95884bb6cce6d85306592b86c74bf223e Mon Sep 17 00:00:00 2001
From: paul valladares <85648028+dreyfus92@users.noreply.github.com>
Date: Thu, 13 Aug 2026 22:02:52 -0500
Subject: [PATCH] feat: per-topic accent colors (#63)

* feat: per-topic accent colors

* chore: refine comment

* fix: remove issue reference from comment in starlight.css
---
 src/starlightOverrides/Head.astro | 20 +++++++++++
 src/styles/starlight.css          | 56 ++++++++++++++++++++++++-------
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/starlightOverrides/Head.astro b/src/starlightOverrides/Head.astro
index b2194bd..0dcd5a1 100644
--- a/src/starlightOverrides/Head.astro
+++ b/src/starlightOverrides/Head.astro
@@ -2,12 +2,32 @@
 import Default from "@astrojs/starlight/components/Head.astro";
 import VtbotStarlight from "astro-vtbot/components/starlight/Base.astro";
 import "/src/styles/starlight.css";
+
+// Per-topic accent colors, matching the bomb.sh project cards
+const ACCENTS = {
+	clack: { dark: "184 100% 48%", light: "184 100% 30%" },
+	args: { dark: "52 100% 56%", light: "45 100% 33%" },
+	tab: { dark: "142 100% 47%", light: "142 100% 28%" },
+	tty: { dark: "268 100% 52%", light: "268 100% 45%" },
+};
+const accent = ACCENTS[Astro.locals.starlightRoute.id.split("/")[0]];
 ---
 
 {/* replaceSidebarContent: sidebar content differs per topic (starlight-sidebar-topics) */}
 <VtbotStarlight replaceSidebarContent transition:animate="fade">
 	<Default><slot /></Default>
 </VtbotStarlight>
+{
+	accent && (
+		<style
+			is:inline
+			set:html={
+				`:root{--sl-color-accent-hsl:${accent.dark}}` +
+				`:root[data-theme=light]{--sl-color-accent-hsl:${accent.light}}`
+			}
+		/>
+	)
+}
 <style is:global>
 	/* Remove the general html font-family override to prevent it from overriding our specific rules */
 	h1,
diff --git a/src/styles/starlight.css b/src/styles/starlight.css
index 3f3efac..698b595 100644
--- a/src/styles/starlight.css
+++ b/src/styles/starlight.css
@@ -8,9 +8,9 @@
     --sl-color-text-heading: var(--heading-fill);
     --sl-text-h1: var(--sl-text-6xl);
     --sl-color-accent-hsl: 311 100% 50%;
-    --sl-color-accent-low: hsl(311 100% 50% / 0.5);
-    --sl-color-accent: hsl(311 100% 50% / 0.9);
-    --sl-color-accent-high: hsl(311 100% 50% / 1);
+    --sl-color-accent-low: hsl(var(--sl-color-accent-hsl) / 0.5);
+    --sl-color-accent: hsl(var(--sl-color-accent-hsl) / 0.9);
+    --sl-color-accent-high: hsl(var(--sl-color-accent-hsl) / 1);
 
     --sl-color-bg: var(--container-fill);
     --sl-color-bg-nav: var(--container-fill);
@@ -134,20 +134,20 @@
       border: 1px solid transparent;
     }
 
+    ul.top-level a:not([aria-current="page"]):is(:hover, :focus-visible) {
+      --c-start: hsl(var(--sl-color-accent-hsl) / 100%);
+      --c-end: hsl(var(--sl-color-accent-hsl) / 50%);
+      border-color: var(--sl-color-accent);
+      color: var(--color-gray-100);
+      background: linear-gradient(to right, var(--c-start), var(--c-end));
+    }
+
     [aria-current="page"] {
       --c-start: hsl(var(--sl-color-accent-hsl) / 5%);
       --c-end: hsl(var(--sl-color-accent-hsl) / 30%);
       color: var(--sl-color-accent);
       background: linear-gradient(to right, var(--c-start), var(--c-end));
       border-color: var(--sl-color-accent);
-
-      &:hover {
-        --c-start: hsl(var(--sl-color-accent-hsl) / 100%);
-        --c-end: hsl(var(--sl-color-accent-hsl) / 50%);
-        border-color: var(--sl-color-accent);
-        color: var(--color-gray-100);
-        background: linear-gradient(to right, var(--c-start), var(--c-end));
-      }
     }
   }
 
@@ -182,6 +182,10 @@
       color: var(--color-gray-50);
     }
 
+    ul.top-level a:not([aria-current="page"]):is(:hover, :focus-visible) {
+      color: var(--color-white-100);
+    }
+
     --sl-icon-color: var(--color-gray-100);
 
     .sl-link-button {
@@ -196,10 +200,36 @@
   }
 }
 
-/* this rule must not be layered because the Starlight Sidebar Topics plugin doesn't use Cascade Layers */
+/* these rules must not be layered because the Starlight Sidebar Topics plugin doesn't use Cascade Layers */
+
+/* each topic link carries its own accent so hover/current always shows the
+   topic's color, not the current page's accent */
+.starlight-sidebar-topics a[href*="/clack/"] { --sl-color-accent-hsl: 184 100% 48%; }
+.starlight-sidebar-topics a[href*="/args/"] { --sl-color-accent-hsl: 52 100% 56%; }
+.starlight-sidebar-topics a[href*="/tab/"] { --sl-color-accent-hsl: 142 100% 47%; }
+.starlight-sidebar-topics a[href*="/tty/"] { --sl-color-accent-hsl: 268 100% 52%; }
+
+:root[data-theme="light"] {
+  .starlight-sidebar-topics a[href*="/clack/"] { --sl-color-accent-hsl: 184 100% 30%; }
+  .starlight-sidebar-topics a[href*="/args/"] { --sl-color-accent-hsl: 45 100% 33%; }
+  .starlight-sidebar-topics a[href*="/tab/"] { --sl-color-accent-hsl: 142 100% 28%; }
+  .starlight-sidebar-topics a[href*="/tty/"] { --sl-color-accent-hsl: 268 100% 45%; }
+}
+
+ul.starlight-sidebar-topics a:is(.starlight-sidebar-topics-current, :hover, :focus-visible) {
+  color: hsl(var(--sl-color-accent-hsl) / 1);
+
+  .starlight-sidebar-topics-icon {
+    background-color: hsl(var(--sl-color-accent-hsl) / 1);
+    border-color: hsl(var(--sl-color-accent-hsl) / 1);
+    color: var(--color-gray-100);
+    --sl-icon-color: var(--color-gray-100);
+  }
+}
+
 :root[data-theme="light"] {
   a:is(.starlight-sidebar-topics-current, :hover, :focus-visible)
     .starlight-sidebar-topics-icon {
-    background-color: var(--sl-color-accent-low);
+    background-color: hsl(var(--sl-color-accent-hsl) / 0.5);
   }
 }
-- 
2.51.2