7418andClaude Opus 4.6
4da188bfe5
Theme system:
- Two-layer architecture: mode (light/dark/system via next-themes) + theme family (color palette via CSS variables)
- 12 theme families: Default, GitHub, Rosé Pine, Tokyo Night, Everforest, Nord, Kanagawa, Night Owl, Poimandres, Vesper, Horizon, SynthWave '84
- Per-family code block highlighting for Prism, HLJS, and Shiki (no more generic oneLight/oneDark fallback)
- Anti-FOUC: synchronous script in <head> reads localStorage and sets data-theme-family before paint
- Theme JSON files in themes/ directory, auto-discovered by server-side loader
- OKLCH color space for all values; CSS specificity html[data-theme-family] beats :root
UI changes:
- NavRail: moved Settings to bottom (replacing theme toggle), removed light/dark toggle button
- Settings: merged General controls into one card with dividers; Appearance section with live Shiki code preview
- Replaced hardcoded blue-500/blue-600 with primary/primary-foreground across 19 components
- Appearance settings: pill mode selector (light/dark/system), theme family dropdown, live code preview
New files:
- src/lib/theme/{types,loader,render-css,context,code-themes}.ts — core theme infrastructure
- src/components/layout/ThemeFamilyProvider.tsx — client context provider
- src/components/settings/AppearanceSection.tsx — appearance settings UI
- src/hooks/useAppTheme.ts — combined theme hook
- themes/*.json — 12 theme family definitions
- docs/handover/theme-system.md — handover documentation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
81 lines
3.1 KiB
JSON
81 lines
3.1 KiB
JSON
{
|
|
"id": "rose-pine",
|
|
"label": "Rosé Pine",
|
|
"order": 2,
|
|
"description": "All natural pine, faux fur and a bit of soho vibes",
|
|
"codeTheme": {
|
|
"light": "duotoneLight",
|
|
"dark": "duotoneSea"
|
|
},
|
|
"shikiTheme": {
|
|
"light": "rose-pine-dawn",
|
|
"dark": "rose-pine"
|
|
},
|
|
"light": {
|
|
"background": "oklch(0.970 0.011 71.9)",
|
|
"foreground": "oklch(0.460 0.063 289.6)",
|
|
"card": "oklch(0.987 0.011 76.6)",
|
|
"cardForeground": "oklch(0.460 0.063 289.6)",
|
|
"popover": "oklch(0.987 0.011 76.6)",
|
|
"popoverForeground": "oklch(0.460 0.063 289.6)",
|
|
"primary": "oklch(0.696 0.106 23.0)",
|
|
"primaryForeground": "oklch(0.970 0.011 71.9)",
|
|
"secondary": "oklch(0.939 0.015 64.3)",
|
|
"secondaryForeground": "oklch(0.460 0.063 289.6)",
|
|
"muted": "oklch(0.939 0.015 64.3)",
|
|
"mutedForeground": "oklch(0.673 0.027 298.4)",
|
|
"accent": "oklch(0.950 0.010 58.2)",
|
|
"accentForeground": "oklch(0.460 0.063 289.6)",
|
|
"destructive": "oklch(0.599 0.107 2.7)",
|
|
"border": "oklch(0.892 0.006 31.1)",
|
|
"input": "oklch(0.892 0.006 31.1)",
|
|
"ring": "oklch(0.696 0.106 23.0)",
|
|
"chart1": "oklch(0.696 0.106 23.0)",
|
|
"chart2": "oklch(0.629 0.066 210.1)",
|
|
"chart3": "oklch(0.617 0.074 305.7)",
|
|
"chart4": "oklch(0.755 0.146 69.7)",
|
|
"chart5": "oklch(0.491 0.077 228.0)",
|
|
"sidebar": "oklch(0.970 0.011 71.9)",
|
|
"sidebarForeground": "oklch(0.460 0.063 289.6)",
|
|
"sidebarPrimary": "oklch(0.696 0.106 23.0)",
|
|
"sidebarPrimaryForeground": "oklch(0.970 0.011 71.9)",
|
|
"sidebarAccent": "oklch(0.939 0.015 64.3)",
|
|
"sidebarAccentForeground": "oklch(0.460 0.063 289.6)",
|
|
"sidebarBorder": "oklch(0.892 0.006 31.1)",
|
|
"sidebarRing": "oklch(0.696 0.106 23.0)"
|
|
},
|
|
"dark": {
|
|
"background": "oklch(0.213 0.025 291.1)",
|
|
"foreground": "oklch(0.909 0.030 290.0)",
|
|
"card": "oklch(0.271 0.042 289.2)",
|
|
"cardForeground": "oklch(0.909 0.030 290.0)",
|
|
"popover": "oklch(0.271 0.042 289.2)",
|
|
"popoverForeground": "oklch(0.909 0.030 290.0)",
|
|
"primary": "oklch(0.836 0.054 21.1)",
|
|
"primaryForeground": "oklch(0.213 0.025 291.1)",
|
|
"secondary": "oklch(0.309 0.036 291.0)",
|
|
"secondaryForeground": "oklch(0.909 0.030 290.0)",
|
|
"muted": "oklch(0.309 0.036 291.0)",
|
|
"mutedForeground": "oklch(0.538 0.044 291.4)",
|
|
"accent": "oklch(0.251 0.026 287.6)",
|
|
"accentForeground": "oklch(0.909 0.030 290.0)",
|
|
"destructive": "oklch(0.698 0.156 4.2)",
|
|
"border": "oklch(0.372 0.036 291.1)",
|
|
"input": "oklch(0.372 0.036 291.1)",
|
|
"ring": "oklch(0.836 0.054 21.1)",
|
|
"chart1": "oklch(0.836 0.054 21.1)",
|
|
"chart2": "oklch(0.822 0.054 209.6)",
|
|
"chart3": "oklch(0.776 0.095 305.0)",
|
|
"chart4": "oklch(0.843 0.110 74.6)",
|
|
"chart5": "oklch(0.528 0.079 227.7)",
|
|
"sidebar": "oklch(0.213 0.025 291.1)",
|
|
"sidebarForeground": "oklch(0.909 0.030 290.0)",
|
|
"sidebarPrimary": "oklch(0.836 0.054 21.1)",
|
|
"sidebarPrimaryForeground": "oklch(0.213 0.025 291.1)",
|
|
"sidebarAccent": "oklch(0.251 0.026 287.6)",
|
|
"sidebarAccentForeground": "oklch(0.909 0.030 290.0)",
|
|
"sidebarBorder": "oklch(0.372 0.036 291.1)",
|
|
"sidebarRing": "oklch(0.836 0.054 21.1)"
|
|
}
|
|
}
|