[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs.
bomb.sh/docs
fix(theme): accent color per topic
Nate Moore
(Apr 5, 2026, 12:41 AM EDT)
72a17b2d
2f7805b0
+203
-39
+1
astro.config.mjs
+1
astro.config.mjs
+12
-12
src/starlightOverrides/Head.astro
+12
-12
src/starlightOverrides/Head.astro
···
5
5
6
6
<Default><slot /></Default>
7
7
<style is:global>
8
-
/* Remove the general html font-family override to prevent it from overriding our specific rules */
9
-
h1,
10
-
h2,
11
-
h3,
12
-
h4,
13
-
h5,
14
-
h6,
15
-
.site-title,
16
-
.sl-doc-title,
17
-
.sl-nav-link {
18
-
font-family: var(--sl-font-heading);
19
-
}
8
+
/* Remove the general html font-family override to prevent it from overriding our specific rules */
9
+
h1,
10
+
h2,
11
+
h3,
12
+
h4,
13
+
h5,
14
+
h6,
15
+
.site-title,
16
+
.sl-doc-title,
17
+
.sl-nav-link {
18
+
font-family: var(--sl-font-heading);
19
+
}
20
20
</style>
+25
src/starlightOverrides/PageFrame.astro
+25
src/starlightOverrides/PageFrame.astro
···
1
+
---
2
+
import Default from '@astrojs/starlight/components/PageFrame.astro';
3
+
4
+
const topics = Astro.locals.starlightSidebarTopics?.topics ?? [];
5
+
const currentTopic = topics.find((t: { isCurrent: boolean }) => t.isCurrent);
6
+
7
+
const accentMap: Record<string, { hsl: string; name: string }> = {
8
+
Clack: { hsl: '311 100% 50%', name: 'pink' },
9
+
Args: { hsl: '52 81% 53%', name: 'yellow' },
10
+
Tab: { hsl: '134 94% 49%', name: 'green' },
11
+
};
12
+
13
+
const accent = accentMap[currentTopic?.label] ?? accentMap.Clack;
14
+
---
15
+
16
+
<div
17
+
data-topic={currentTopic?.label?.toLowerCase() ?? 'clack'}
18
+
style={`--sl-color-accent-hsl:${accent.hsl};--sl-color-accent-low:hsl(${accent.hsl}/0.1);--sl-color-accent:hsl(${accent.hsl}/0.9);--sl-color-accent-high:hsl(${accent.hsl}/1);--accent-fill:var(--color-${accent.name}-90);--accent-muted:var(--color-${accent.name}-50);--accent-highlight:var(--color-${accent.name}-100);--topic-clack-hsl:311 100% 50%;--topic-args-hsl:52 81% 53%;--topic-tab-hsl:134 94% 49%;`}
19
+
>
20
+
<Default>
21
+
<slot name="header" slot="header" />
22
+
<slot name="sidebar" slot="sidebar" />
23
+
<slot />
24
+
</Default>
25
+
</div>
+165
-27
src/styles/starlight.css
+165
-27
src/styles/starlight.css
···
8
8
--sl-color-text-heading: var(--heading-fill);
9
9
--sl-text-h1: var(--sl-text-6xl);
10
10
--sl-color-accent-hsl: 311 100% 50%;
11
-
--sl-color-accent-low: hsl(311 100% 50% / 0.5);
11
+
--sl-color-accent-low: hsl(311 100% 50% / 0.1);
12
12
--sl-color-accent: hsl(311 100% 50% / 0.9);
13
13
--sl-color-accent-high: hsl(311 100% 50% / 1);
14
14
···
74
74
color: var(--heading-fill);
75
75
}
76
76
77
+
/* Right sidebar (TOC) background gradient */
78
+
.right-sidebar {
79
+
background: linear-gradient(to bottom, var(--surface-fill) 0%, var(--surface-highlight) 100%);
80
+
}
81
+
77
82
starlight-toc nav>ul {
78
-
--c-start: var(--heading-muted);
79
-
--c-end: var(--separator-fill);
80
83
border-left: 1px solid transparent;
81
84
position: relative;
82
85
···
87
90
bottom: 0;
88
91
left: 0;
89
92
width: var(--border-050);
90
-
background: linear-gradient(to bottom, var(--c-start), var(--c-end));
93
+
background: linear-gradient(to bottom, var(--surface-border-highlight), var(--surface-border-fill));
91
94
}
92
95
93
96
a {
···
96
99
}
97
100
98
101
[aria-current] {
99
-
border-left-color: var(--sl-color-accent);
102
+
border-left-color: hsl(var(--sl-color-accent-hsl) / 0.9);
103
+
font-weight: 600;
104
+
color: var(--separator-fill);
100
105
}
101
106
}
102
107
···
107
112
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
108
113
}
109
114
115
+
/* Content links — use current accent color */
116
+
.sl-markdown-content a:not(:where(.not-content *)) {
117
+
color: hsl(var(--sl-color-accent-hsl));
118
+
}
119
+
.sl-markdown-content a:hover:not(:where(.not-content *)) {
120
+
color: hsl(var(--sl-color-accent-hsl) / 0.8);
121
+
}
122
+
110
123
.sl-link-button.primary {
111
-
background: linear-gradient(to right in oklab, var(--color-pink-90), var(--color-pink-100));
112
-
color: var(--color-gray-100);
113
-
border-color: var(--color-pink-100);
114
-
border-radius: 0px;
124
+
background: radial-gradient(ellipse at center, hsl(var(--sl-color-accent-hsl) / 0.5), hsl(var(--sl-color-accent-hsl) / 0.1));
125
+
border: 2px solid hsl(var(--sl-color-accent-hsl) / 0.9);
126
+
border-radius: var(--radius-100);
127
+
color: var(--color-white-100);
128
+
font-family: var(--__sl-font-mono);
129
+
text-transform: uppercase;
130
+
letter-spacing: 0.01em;
131
+
padding: var(--space-400) var(--space-600);
132
+
}
133
+
134
+
.sl-link-button:not(.primary) {
135
+
background: radial-gradient(ellipse at center, var(--color-white-50), var(--color-white-10));
136
+
border: 2px solid var(--color-white-90);
137
+
border-radius: var(--radius-100);
138
+
color: var(--color-white-100);
139
+
font-family: var(--__sl-font-mono);
140
+
text-transform: uppercase;
141
+
letter-spacing: 0.01em;
142
+
padding: var(--space-400) var(--space-600);
115
143
}
116
144
117
145
.sl-link-button > svg {
118
-
fill: var(--color-gray-100);
146
+
fill: currentColor;
119
147
}
120
148
121
149
.cli-preview {
···
129
157
color: var(--color-white-100);
130
158
}
131
159
160
+
/* Sidebar background gradient */
132
161
.sidebar-pane {
162
+
background: linear-gradient(to bottom, var(--surface-fill) 0%, var(--surface-highlight) 100%) !important;
163
+
133
164
a {
134
165
border: 1px solid transparent;
135
166
}
136
167
137
-
[aria-current="page"] {
138
-
--c-start: hsl(var(--sl-color-accent-hsl) / 5%);
139
-
--c-end: hsl(var(--sl-color-accent-hsl) / 30%);
140
-
color: var(--sl-color-accent);
141
-
background: linear-gradient(to right, var(--c-start), var(--c-end));
142
-
border-color: var(--sl-color-accent);
168
+
/* Active sidebar link — accent indicator + gradient bg */
169
+
[aria-current="page"],
170
+
[aria-current="page"]:hover,
171
+
[aria-current="page"]:focus {
172
+
color: hsl(var(--sl-color-accent-hsl));
173
+
background: linear-gradient(to right, hsl(var(--sl-color-accent-hsl) / 0.05), hsl(var(--sl-color-accent-hsl) / 0.3));
174
+
border-color: hsl(var(--sl-color-accent-hsl) / 0.9);
175
+
border-inline-start: 2px solid hsl(var(--sl-color-accent-hsl));
176
+
}
143
177
144
-
&:hover {
145
-
--c-start: hsl(var(--sl-color-accent-hsl) / 100%);
146
-
--c-end: hsl(var(--sl-color-accent-hsl) / 50%);
147
-
border-color: var(--sl-color-accent);
148
-
color: var(--color-gray-100);
149
-
background: linear-gradient(to right, var(--c-start), var(--c-end));
150
-
}
178
+
[aria-current="page"]:hover {
179
+
color: var(--color-gray-100);
180
+
background: linear-gradient(to right, hsl(var(--sl-color-accent-hsl)), hsl(var(--sl-color-accent-hsl) / 0.5));
181
+
}
182
+
183
+
/* Sidebar nested list connector line — gradient */
184
+
ul ul li {
185
+
border-image: linear-gradient(to bottom, var(--surface-border-highlight), var(--surface-border-fill)) 1;
186
+
}
187
+
188
+
/* Sidebar group labels — uppercase */
189
+
summary .group-label .large {
190
+
text-transform: uppercase;
191
+
font-size: var(--sl-text-sm);
192
+
letter-spacing: 0.01em;
151
193
}
152
194
}
153
195
196
+
/* Sidebar topic list — active topic gradient highlight */
197
+
.starlight-sidebar-topics a.starlight-sidebar-topics-current {
198
+
background: linear-gradient(to right, var(--sl-color-accent-low), hsl(var(--sl-color-accent-hsl) / 0.5));
199
+
border: 1px solid hsl(var(--sl-color-accent-hsl) / 0.9);
200
+
border-radius: var(--radius-100);
201
+
}
202
+
203
+
.starlight-sidebar-topics a:not(.starlight-sidebar-topics-current) {
204
+
color: var(--heading-muted);
205
+
}
206
+
207
+
.starlight-sidebar-topics a.starlight-sidebar-topics-current .starlight-sidebar-topics-icon {
208
+
border-color: transparent;
209
+
background: transparent;
210
+
color: hsl(var(--sl-color-accent-hsl));
211
+
}
212
+
213
+
/* Canonical topic hover colors — each topic uses its own color on hover */
214
+
.starlight-sidebar-topics a {
215
+
--sl-color-accent-low: hsl(var(--sl-color-accent-hsl) / 0.1);
216
+
--sl-color-accent: hsl(var(--sl-color-accent-hsl) / 0.9);
217
+
--sl-color-accent-high: hsl(var(--sl-color-accent-hsl) / 1);
218
+
--sl-color-text-accent: var(--sl-color-accent-high);
219
+
--sl-color-text-invert: black;
220
+
--sl-icon-color: currentColor;
221
+
}
222
+
.starlight-sidebar-topics a[href*="/clack"] {
223
+
--sl-color-accent-hsl: 311 100% 50%;
224
+
}
225
+
.starlight-sidebar-topics a[href*="/args"] {
226
+
--sl-color-accent-hsl: 52 81% 53%;
227
+
}
228
+
.starlight-sidebar-topics a[href*="/tab"] {
229
+
--sl-color-accent-hsl: 134 94% 49%;
230
+
}
231
+
154
232
starlight-menu-button button,
155
233
mobile-starlight-toc nav {
156
234
top: unset;
157
235
bottom: 0;
158
236
}
159
237
238
+
/* Aside/Note — full border, gradient bg, corner decorations */
239
+
.starlight-aside {
240
+
border: 1px solid var(--sl-color-asides-border);
241
+
border-inline-start-width: 1px;
242
+
position: relative;
243
+
overflow: visible;
244
+
}
245
+
246
+
.starlight-aside--note {
247
+
background: radial-gradient(ellipse at center top, hsl(234 100% 50% / 0.5), hsl(234 100% 50% / 0.1));
248
+
}
249
+
.starlight-aside--tip {
250
+
background: radial-gradient(ellipse at center top, hsl(281 82% 63% / 0.5), hsl(281 82% 63% / 0.1));
251
+
}
252
+
.starlight-aside--caution {
253
+
background: radial-gradient(ellipse at center top, hsl(41 82% 63% / 0.5), hsl(41 82% 63% / 0.1));
254
+
}
255
+
.starlight-aside--danger {
256
+
background: radial-gradient(ellipse at center top, hsl(339 82% 63% / 0.5), hsl(339 82% 63% / 0.1));
257
+
}
258
+
259
+
.starlight-aside::before,
260
+
.starlight-aside::after {
261
+
content: '';
262
+
position: absolute;
263
+
width: 8px;
264
+
height: 8px;
265
+
border-color: var(--sl-color-asides-border);
266
+
border-style: solid;
267
+
}
268
+
.starlight-aside::before {
269
+
top: -1px;
270
+
left: -1px;
271
+
border-width: 2px 0 0 2px;
272
+
}
273
+
.starlight-aside::after {
274
+
bottom: -1px;
275
+
right: -1px;
276
+
border-width: 0 2px 2px 0;
277
+
}
278
+
279
+
.starlight-aside__title {
280
+
font-family: var(--__sl-font-mono);
281
+
text-transform: uppercase;
282
+
font-size: var(--sl-text-sm);
283
+
letter-spacing: 0.01em;
284
+
}
285
+
286
+
/* Search bar — pill shape */
287
+
site-search button {
288
+
border-radius: var(--radius-full) !important;
289
+
border: 1px solid var(--surface-border-highlight);
290
+
}
291
+
160
292
/* Light theme specific overrides for better readability */
161
293
:root[data-theme=light] {
162
294
--sl-color-text: var(--color-gray-100);
···
175
307
176
308
--sl-icon-color: var(--color-gray-100);
177
309
178
-
.sl-link-button {
179
-
background-color: var(--color-gray-100);
310
+
.sl-link-button.primary {
311
+
background: radial-gradient(ellipse at center, hsl(var(--sl-color-accent-hsl) / 0.3), hsl(var(--sl-color-accent-hsl) / 0.05));
312
+
border-color: hsl(var(--sl-color-accent-hsl) / 0.9);
313
+
color: var(--color-gray-100);
314
+
}
315
+
316
+
.sl-link-button:not(.primary) {
317
+
background: radial-gradient(ellipse at center, var(--color-gray-80), var(--color-gray-100));
318
+
border-color: var(--color-gray-90);
180
319
color: var(--color-white-100);
181
-
border-color: var(--color-gray-100);
182
320
}
183
321
184
322
.sl-link-button>svg {
185
-
fill: var(--color-white-100);
323
+
fill: currentColor;
186
324
}
187
325
188
326
.starlight-sidebar-topics-icon {