[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs.
bomb.sh/docs
style: fix light theme variables for better readability (#18)
authored by
Paul Valladares
and committed by
GitHub
(Aug 12, 2025, 12:52 PM -0600)
65591645
b69ff49b
+60
-10
+42
-10
src/styles/starlight.css
+42
-10
src/styles/starlight.css
···
18
18
--sl-color-hairline: var(--surface-border-fill);
19
19
--sl-color-hairline-shade: var(--surface-border-fill);
20
20
21
-
--sl-icon-color: var(--color-white-90);
21
+
--sl-icon-color: var(--heading-fill);
22
22
}
23
23
24
24
:is(h1, h2, h3, h4, h5, h6) {
···
36
36
}
37
37
38
38
:is(h1) {
39
-
--c-border: var(--color-white-100);
40
-
--c-start: var(--color-white-90);
41
-
--c-end: var(--color-white-50);
39
+
--c-border: var(--heading-fill);
40
+
--c-start: var(--heading-fill);
41
+
--c-end: var(--heading-muted);
42
42
--s-border: 1px;
43
43
-webkit-text-stroke-color: var(--c-border);
44
44
-webkit-text-stroke-width: var(--s-border);
···
50
50
}
51
51
52
52
:is(h2, h3, h4, h5, h6) {
53
-
--c-start: var(--color-white-100);
54
-
--c-end: var(--color-white-50);
53
+
--c-start: var(--heading-fill);
54
+
--c-end: var(--heading-muted);
55
55
background-clip: text;
56
56
-webkit-background-clip: text;
57
57
-webkit-text-fill-color: transparent;
···
67
67
}
68
68
69
69
a.site-title {
70
-
color: white;
70
+
color: var(--heading-fill);
71
71
}
72
72
73
73
starlight-toc nav > ul {
74
-
--c-start: var(--color-white-50);
75
-
--c-end: var(--color-white-10);
74
+
--c-start: var(--heading-muted);
75
+
--c-end: var(--separator-fill);
76
76
border-left: 1px solid transparent;
77
77
position: relative;
78
78
&::before {
···
108
108
line-height: 1.2em;
109
109
font-family: monospace;
110
110
background-color: #181818;
111
-
color: white;
111
+
color: var(--color-white-100);
112
112
}
113
113
114
114
.sidebar-pane {
···
137
137
top: unset;
138
138
bottom: 0;
139
139
}
140
+
141
+
/* Light theme specific overrides for better readability */
142
+
:root[data-theme=light] {
143
+
--sl-color-text: var(--color-gray-100);
144
+
--sl-color-text-muted: var(--color-gray-70);
145
+
--sl-color-text-accent: var(--color-gray-90);
146
+
147
+
.sl-nav-link,
148
+
.site-title,
149
+
.sl-doc-title {
150
+
color: var(--color-gray-100);
151
+
}
152
+
153
+
input::placeholder {
154
+
color: var(--color-gray-50);
155
+
}
156
+
157
+
--sl-icon-color: var(--color-gray-100);
158
+
159
+
.sl-link-button {
160
+
background-color: var(--color-gray-100);
161
+
color: var(--color-white-100);
162
+
border-color: var(--color-gray-100);
163
+
}
164
+
.sl-link-button > svg {
165
+
fill: var(--color-white-100);
166
+
}
167
+
168
+
.starlight-sidebar-topics-icon{
169
+
background-color: var(--color-gray-20);
170
+
}
171
+
}
+18
src/styles/tint.css
+18
src/styles/tint.css
···
149
149
--accent-muted: var(--color-pink-90);
150
150
--accent-highlight: var(--color-pink-100);
151
151
}
152
+
153
+
:root[data-theme=light] {
154
+
--surface-border-highlight: var(--color-gray-30);
155
+
--surface-border-fill: var(--color-gray-20);
156
+
--surface-fill: var(--color-gray-20);
157
+
--surface-highlight: var(--container-fill);
158
+
--container-fill: var(--color-white-100);
159
+
--surface-inner-fill: var(--color-gray-10);
160
+
--surface-inner-highlight: var(--color-gray-20);
161
+
--heading-fill: var(--color-gray-100);
162
+
--heading-muted: var(--color-gray-70);
163
+
--heading-highlight: var(--color-gray-90);
164
+
--separator-fill: var(--color-gray-90);
165
+
--separator-highlight: var(--color-gray-70);
166
+
--accent-fill: var(--color-pink-100);
167
+
--accent-muted: var(--color-pink-50);
168
+
--accent-highlight: var(--color-pink-100);
169
+
}