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