From 2ec0194df5e2d0de702e37e8a2d509c7d376121f Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Thu, 5 Feb 2026 10:54:32 -0700
Subject: [PATCH] Fix dark mode theme - use Starlight's correct CSS selectors

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.
---
 src/styles/custom.css | 78 ++++++++++++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 26 deletions(-)

diff --git a/src/styles/custom.css b/src/styles/custom.css
index 3392ae1..ee00940 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -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);
 }