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

@@ -74,7 +74,7 @@ export default function App() {
// Still checking stored credentials
if (authenticated === null) {
return (
<div className="h-dvh flex items-center justify-center bg-[#1e1e24] text-zinc-500">
<div className="h-dvh flex items-center justify-center bg-[var(--pc-bg-base)] text-zinc-500">
<div className="animate-pulse text-sm">Connecting</div>
</div>
);
@@ -87,7 +87,7 @@ export default function App() {
return (
<ToolCollapseProvider>
<div className="h-dvh flex overflow-x-hidden bg-[#1e1e24] text-zinc-300 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.02),transparent_50%),radial_gradient(ellipse_at_bottom_right,rgba(99,102,241,0.04),transparent_50%)]" role="application" aria-label="PinchChat">
<div className="h-dvh flex overflow-x-hidden bg-[var(--pc-bg-base)] text-zinc-300 bg-[radial-gradient(ellipse_at_top,rgba(255,255,255,0.02),transparent_50%),radial_gradient(ellipse_at_bottom_right,rgba(99,102,241,0.04),transparent_50%)]" role="application" aria-label="PinchChat">
<Sidebar
sessions={sessions}
activeSession={activeSession}