feat: theme switcher — dark, light, OLED modes with configurable accent colors

- Add ThemeContext with CSS custom properties for all base colors
- Three theme modes: Dark (default), Light, OLED Black
- Six accent colors: Cyan, Violet, Emerald, Amber, Rose, Blue
- Theme switcher dropdown in header (palette icon)
- Persisted in localStorage
- CSS variables replace hardcoded hex colors in index.css and components
- i18n support (EN/FR) for theme labels
This commit is contained in:
Nicolas Varrot
2026-02-12 23:51:01 +00:00
parent 5c35bdda32
commit b20bf41bf4
13 changed files with 347 additions and 24 deletions

View File

@@ -40,7 +40,7 @@ export class ErrorBoundary extends Component<Props, State> {
if (this.props.fallback) return this.props.fallback;
return (
<div className="h-dvh flex items-center justify-center bg-[#1e1e24] text-zinc-300 p-6">
<div className="h-dvh flex items-center justify-center bg-[var(--pc-bg-base)] text-zinc-300 p-6">
<div className="max-w-md w-full space-y-4 text-center">
<div className="text-4xl">💥</div>
<h1 className="text-xl font-semibold text-zinc-100">