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
This commit is contained in:
2026-02-03 09:55:51 -05:00
parent 0c5c7e4e41
commit c2cc2361d9
2 changed files with 12 additions and 12 deletions
+11 -11
View File
@@ -21,20 +21,20 @@ const config: Config = {
800: '#075985', 800: '#075985',
900: '#0c4a6e', 900: '#0c4a6e',
}, },
'bg-primary': '#1a1b26', 'bg-primary': 'var(--bg-primary)',
'bg-secondary': '#16161e', 'bg-secondary': 'var(--bg-secondary)',
'text-primary': '#a9b1d6', 'text-primary': 'var(--text-primary)',
'text-secondary': '#565f89', 'text-secondary': 'var(--text-secondary)',
'accent': '#7aa2f7', 'accent': 'var(--accent)',
'border': '#414868', 'border': 'var(--border)',
}, },
typography: ({ theme }) => ({ typography: ({ theme }) => ({
invert: { invert: {
css: { css: {
'--tw-prose-pre-bg': theme('colors.background.secondary'), '--tw-prose-pre-bg': 'var(--bg-secondary)',
code: { code: {
backgroundColor: theme('colors.background.primary'), backgroundColor: 'var(--bg-primary)',
color: theme('colors.text.primary'), color: 'var(--text-primary)',
fontWeight: '400', fontWeight: '400',
}, },
'code::before': { 'code::before': {
@@ -48,8 +48,8 @@ const config: Config = {
color: 'inherit', color: 'inherit',
}, },
pre: { pre: {
backgroundColor: theme('colors.background.secondary'), backgroundColor: 'var(--bg-secondary)',
color: theme('colors.text.primary'), color: 'var(--text-primary)',
}, },
}, },
}, },
+1 -1
View File
@@ -17,7 +17,7 @@
--bg-primary: #1a1b26; --bg-primary: #1a1b26;
--bg-secondary: #16161e; --bg-secondary: #16161e;
--text-primary: #a9b1d6; --text-primary: #a9b1d6;
--text-secondary: #565f89; --text-secondary: #9aa5ce;
--accent: #7aa2f7; --accent: #7aa2f7;
--border: #414868; --border: #414868;
} }