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

Fix dark mode theme - use Starlight's correct CSS selectors

Browse Source 
Starlight uses :root for dark mode (default) and [data-theme='light']
for light mode override. Previous CSS incorrectly used [data-theme='dark']
which Starlight doesn't recognize.

Also adds explicit --sl-color-bg* variables for backgrounds.
This commit is contained in:
Ryan Malloy 2026-02-05 10:54:32 -07:00
parent e21219be8d
commit 2ec0194df5
1 changed files with 52 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/styles/custom.css
View File

@ -1,31 +1,57 @@
/* Custom styles for mcnanovna docs */
/* Dark mode is the default in Starlight - use :root */
:root {
--sl-color-accent-low: #1a365d;
--sl-color-accent: #2b6cb0;
--sl-color-accent-high: #4299e1;
--sl-color-white: #fff;
--sl-color-gray-1: #edf2f7;
--sl-color-gray-2: #e2e8f0;
--sl-color-gray-3: #cbd5e0;
--sl-color-gray-4: #a0aec0;
--sl-color-gray-5: #718096;
--sl-color-gray-6: #4a5568;
--sl-color-black: #1a202c;
/* Accent colors (blue theme) */
--sl-color-accent-low: hsl(210, 50%, 15%);
--sl-color-accent: hsl(210, 70%, 45%);
--sl-color-accent-high: hsl(210, 80%, 65%);
/* Gray scale for dark mode - darker values */
--sl-color-gray-1: hsl(220, 14%, 71%);
--sl-color-gray-2: hsl(220, 13%, 58%);
--sl-color-gray-3: hsl(220, 12%, 45%);
--sl-color-gray-4: hsl(220, 11%, 32%);
--sl-color-gray-5: hsl(220, 10%, 22%);
--sl-color-gray-6: hsl(220, 12%, 14%);
--sl-color-gray-7: hsl(220, 14%, 10%);
/* Semantic colors for dark mode */
--sl-color-white: hsl(0, 0%, 95%);
--sl-color-black: hsl(220, 15%, 8%);
/* Backgrounds */
--sl-color-bg: var(--sl-color-black);
--sl-color-bg-nav: var(--sl-color-gray-6);
--sl-color-bg-sidebar: var(--sl-color-gray-6);
--sl-color-bg-inline-code: var(--sl-color-gray-5);
}
:root[data-theme='dark'] {
--sl-color-accent-low: #1e3a5f;
--sl-color-accent: #3182ce;
--sl-color-accent-high: #63b3ed;
--sl-color-white: #1a202c;
--sl-color-gray-1: #2d3748;
--sl-color-gray-2: #4a5568;
--sl-color-gray-3: #718096;
--sl-color-gray-4: #a0aec0;
--sl-color-gray-5: #cbd5e0;
--sl-color-gray-6: #e2e8f0;
--sl-color-black: #f7fafc;
/* Light mode override */
[data-theme='light'] {
/* Accent colors (blue theme - slightly darker for light bg) */
--sl-color-accent-low: hsl(210, 60%, 90%);
--sl-color-accent: hsl(210, 70%, 40%);
--sl-color-accent-high: hsl(210, 80%, 30%);
/* Gray scale for light mode - inverted (higher numbers = darker) */
--sl-color-gray-1: hsl(220, 14%, 20%);
--sl-color-gray-2: hsl(220, 13%, 30%);
--sl-color-gray-3: hsl(220, 12%, 45%);
--sl-color-gray-4: hsl(220, 11%, 60%);
--sl-color-gray-5: hsl(220, 10%, 75%);
--sl-color-gray-6: hsl(220, 15%, 92%);
--sl-color-gray-7: hsl(220, 20%, 97%);
/* Semantic colors for light mode (inverted) */
--sl-color-white: hsl(220, 15%, 8%);
--sl-color-black: hsl(0, 0%, 100%);
/* Backgrounds */
--sl-color-bg: var(--sl-color-black);
--sl-color-bg-nav: var(--sl-color-gray-7);
--sl-color-bg-sidebar: var(--sl-color-bg);
--sl-color-bg-inline-code: var(--sl-color-gray-6);
}
/* Tool reference tables */
@ -38,12 +64,12 @@
.tool-table td {
padding: 0.5rem 1rem;
text-align: left;
border-bottom: 1px solid var(--sl-color-gray-3);
border-bottom: 1px solid var(--sl-color-gray-5);
}
.tool-table code {
font-size: 0.875rem;
background: var(--sl-color-gray-1);
background: var(--sl-color-bg-inline-code);
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
}
@ -53,5 +79,5 @@
max-width: 100%;
margin: 1.5rem 0;
border-radius: 0.5rem;
border: 1px solid var(--sl-color-gray-3);
border: 1px solid var(--sl-color-gray-5);
}