From c2cc2361d99a5f78933d32992f35b8f61ed01bae Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Tue, 3 Feb 2026 09:55:51 -0500
Subject: [PATCH] feat: make docs theme-aware using CSS variables

- Update Tailwind config to use CSS variables instead of hardcoded colors
- Colors now reference theme variables: var(--text-primary), var(--text-secondary), etc.
- Fix Tokyo Night theme: text-secondary corrected from #565f89 to #9aa5ce
- Typography plugin now uses var() for theme-aware prose styling
- Enables docs to respect theme system like rest of app
---
 tailwind.config.ts   | 22 +++++++++++-----------
 web/static/input.css |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3ab6024..68c2cd0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,20 +21,20 @@ const config: Config = {
           800: '#075985',
           900: '#0c4a6e',
         },
-        'bg-primary': '#1a1b26',
-        'bg-secondary': '#16161e', 
-        'text-primary': '#a9b1d6',
-        'text-secondary': '#565f89',
-        'accent': '#7aa2f7',
-        'border': '#414868',
+        'bg-primary': 'var(--bg-primary)',
+        'bg-secondary': 'var(--bg-secondary)',
+        'text-primary': 'var(--text-primary)',
+        'text-secondary': 'var(--text-secondary)',
+        'accent': 'var(--accent)',
+        'border': 'var(--border)',
       },
       typography: ({ theme }) => ({
         invert: {
           css: {
-            '--tw-prose-pre-bg': theme('colors.background.secondary'),
+            '--tw-prose-pre-bg': 'var(--bg-secondary)',
             code: {
-              backgroundColor: theme('colors.background.primary'),
-              color: theme('colors.text.primary'),
+              backgroundColor: 'var(--bg-primary)',
+              color: 'var(--text-primary)',
               fontWeight: '400',
             },
             'code::before': {
@@ -48,8 +48,8 @@ const config: Config = {
               color: 'inherit',
             },
             pre: {
-              backgroundColor: theme('colors.background.secondary'),
-              color: theme('colors.text.primary'),
+              backgroundColor: 'var(--bg-secondary)',
+              color: 'var(--text-primary)',
             },
           },
         },
diff --git a/web/static/input.css b/web/static/input.css
index 2a9c10d..eaaac13 100644
--- a/web/static/input.css
+++ b/web/static/input.css
@@ -17,7 +17,7 @@
     --bg-primary: #1a1b26;
     --bg-secondary: #16161e;
     --text-primary: #a9b1d6;
-    --text-secondary: #565f89;
+    --text-secondary: #9aa5ce;
     --accent: #7aa2f7;
     --border: #414868;
   }