rf/rs-uv3a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark theme contrast — correct Starlight gray ramp direction

Browse Source 
Starlight uses gray-1=lightest, gray-6=darkest in BOTH modes.
The initial theme had the dark mode grays inverted, causing body
text (gray-2) to resolve to near-black on a dark background.
Also adds proper light mode overrides with inverted semantics.
This commit is contained in:
Ryan Malloy 2026-01-28 14:27:42 -07:00
parent 162d485c31
commit b57b8beb50
1 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/styles/custom.css
View File

@ -2,24 +2,40 @@
* Green accent color reminiscent of classic radio displays
*/
/* Starlight gray convention: gray-1 = LIGHTEST, gray-6 = DARKEST (both modes)
text = gray-2, nav/sidebar bg = gray-6, inline-code bg = gray-5 */
:root {
--sl-color-accent-low: #1a3d2e;
--sl-color-accent: #2d8659;
--sl-color-accent-high: #4ade80;
--sl-color-accent: #22c55e;
--sl-color-accent-high: #bbf7d0;
--sl-color-white: #ffffff;
--sl-color-gray-1: #f0fdf4;
--sl-color-gray-2: #dcfce7;
--sl-color-black: #0d1510;
--sl-color-gray-1: #e5ede8;
--sl-color-gray-2: #bcc3bf;
--sl-color-gray-3: #798380;
--sl-color-gray-4: #464f4a;
--sl-color-gray-5: #1f2a24;
--sl-color-gray-6: #131e18;
/* Table styling */
--sl-color-table-header: var(--sl-color-accent-low);
}
:root[data-theme='dark'] {
--sl-color-accent-low: #1a3d2e;
--sl-color-accent: #22c55e;
--sl-color-accent-high: #bbf7d0;
--sl-color-gray-1: #0f1f17;
--sl-color-gray-2: #162b1f;
/* Light mode: gray-1 = DARKEST, gray-7 = LIGHTEST (inverted from dark mode)
white = dark text color, black = light bg color */
:root[data-theme='light'] {
--sl-color-accent-low: #dcfce7;
--sl-color-accent: #16a34a;
--sl-color-accent-high: #14532d;
--sl-color-white: #1a2e23;
--sl-color-black: #ffffff;
--sl-color-gray-1: #1f2a24;
--sl-color-gray-2: #364039;
--sl-color-gray-3: #546158;
--sl-color-gray-4: #798380;
--sl-color-gray-5: #bcc3bf;
--sl-color-gray-6: #e5ede8;
--sl-color-gray-7: #f2f6f3;
}
/* Command code blocks - give them the terminal look */
@ -51,11 +67,11 @@ code {
.sl-markdown-content td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--sl-color-gray-5);
border-bottom: 1px solid var(--sl-color-gray-3);
}
.sl-markdown-content tr:hover {
background-color: var(--sl-color-gray-6);
background-color: var(--sl-color-gray-2);
}
/* Aside/callout styling */