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
2026-02-12 23:51:01 +00:00
parent 5c35bdda32
commit b20bf41bf4
13 changed files with 347 additions and 24 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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}
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -214,7 +214,7 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled, sessionKey

  return (
    <div
-      className="border-t border-white/8 bg-[#1a1a20]/60 backdrop-blur-xl p-4"
+      className="border-t border-white/8 bg-[var(--pc-bg-input)]/60 backdrop-blur-xl p-4"
      role="form"
      aria-label={t('chat.inputLabel')}
      onDragOver={handleDragOver}
@@ -222,7 +222,7 @@ export function ChatInput({ onSend, onAbort, isGenerating, disabled, sessionKey
      onDrop={handleDrop}
    >
      <div className="max-w-4xl mx-auto">
-        <div className={`rounded-3xl border bg-[#232329]/40 p-3 shadow-[0_0_0_1px_rgba(255,255,255,0.03)] transition-colors ${isDragOver ? 'border-cyan-400/40 bg-cyan-400/5' : 'border-white/8'}`}>
+        <div className={`rounded-3xl border bg-[var(--pc-bg-surface)]/40 p-3 shadow-[0_0_0_1px_rgba(255,255,255,0.03)] transition-colors ${isDragOver ? 'border-cyan-400/40 bg-cyan-400/5' : 'border-white/8'}`}>
          {/* File previews */}
          {files.length > 0 && (
            <div className="flex flex-wrap gap-2 mb-3 px-1">
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -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">
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -3,6 +3,7 @@ import { Menu, Sparkles, LogOut, Volume2, VolumeOff, Cpu, Bot, Download } from '
 import type { ConnectionStatus, Session, ChatMessage } from '../types';
 import { useT } from '../hooks/useLocale';
 import { LanguageSelector } from './LanguageSelector';
+import { ThemeSwitcher } from './ThemeSwitcher';
 import { sessionDisplayName } from '../lib/sessionName';
 import { messagesToMarkdown, downloadFile } from '../lib/exportChat';

@@ -32,7 +33,7 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,

  return (
    <>
-    <header className="h-14 border-b border-white/8 bg-[#232329]/90 backdrop-blur-xl flex items-center px-4 gap-3 shrink-0" role="banner">
+    <header className="h-14 border-b border-white/8 bg-[var(--pc-bg-surface)]/90 backdrop-blur-xl flex items-center px-4 gap-3 shrink-0" role="banner">
      <button onClick={onToggleSidebar} aria-label={t('header.toggleSidebar')} className="lg:hidden p-2 rounded-2xl hover:bg-white/5 text-zinc-400 transition-colors">
        <Menu size={20} />
      </button>
@@ -76,6 +77,7 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
            <Download size={16} />
          </button>
        )}
+        <ThemeSwitcher />
        <LanguageSelector />
        {status === 'connected' ? (
          <div className="flex items-center gap-2 rounded-2xl border border-white/8 bg-zinc-800/30 px-3 py-1.5">
@@ -113,7 +115,7 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
        const opacity = Math.max(0.35, Math.min(1, pct / 100));
        const barStyle = { width: `${pct}%`, backgroundColor: `rgba(56, 189, 248, ${opacity})` };
        return (
-          <div className="px-4 py-1.5 bg-[#232329]/60 border-b border-white/8 flex items-center gap-3">
+          <div className="px-4 py-1.5 bg-[var(--pc-bg-surface)]/60 border-b border-white/8 flex items-center gap-3">
            {activeSessionData?.model && (
              <span className="inline-flex items-center gap-1 text-[10px] text-zinc-500 shrink-0" title={`Model: ${activeSessionData.model}${activeSessionData.agentId ? ` · Agent: ${activeSessionData.agentId}` : ''}`}>
                <Cpu className="h-2.5 w-2.5" />
--- a/src/components/KeyboardShortcuts.tsx
+++ b/src/components/KeyboardShortcuts.tsx
@@ -56,7 +56,7 @@ export function KeyboardShortcuts({ open, onClose }: Props) {

      {/* Modal */}
      <div
-        className="relative w-full max-w-md mx-4 rounded-3xl border border-white/8 bg-[#1e1e24]/95 backdrop-blur-xl shadow-2xl animate-fade-in"
+        className="relative w-full max-w-md mx-4 rounded-3xl border border-white/8 bg-[var(--pc-bg-base)]/95 backdrop-blur-xl shadow-2xl animate-fade-in"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
--- a/src/components/LoginScreen.tsx
+++ b/src/components/LoginScreen.tsx
@@ -37,7 +37,7 @@ export function LoginScreen({ onConnect, error, isConnecting }: Props) {
  };

  return (
-    <div className="h-dvh flex items-center justify-center 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%)]">
+    <div className="h-dvh flex items-center justify-center 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%)]">
      <div className="w-full max-w-md mx-4">
        {/* Logo */}
        <div className="flex flex-col items-center gap-3 mb-8">
@@ -50,7 +50,7 @@ export function LoginScreen({ onConnect, error, isConnecting }: Props) {
        </div>

        {/* Form */}
-        <form onSubmit={handleSubmit} className="rounded-2xl border border-white/8 bg-[#232329]/80 backdrop-blur-xl p-6 space-y-5 shadow-2xl shadow-black/30">
+        <form onSubmit={handleSubmit} className="rounded-2xl border border-white/8 bg-[var(--pc-bg-surface)]/80 backdrop-blur-xl p-6 space-y-5 shadow-2xl shadow-black/30">
          <div className="space-y-2">
            <label htmlFor="gateway-url" className="block text-xs font-medium text-zinc-400 uppercase tracking-wider">
              {t('login.gatewayUrl')}
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -142,7 +142,7 @@ export function Sidebar({ sessions, activeSession, onSwitch, onDelete, open, onC
  return (
    <>
      {open && <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden" onClick={onClose} />}
-      <aside role="navigation" aria-label="Sessions" className={`fixed lg:relative top-0 left-0 h-full bg-[#1e1e24]/95 border-r border-white/8 z-50 transform ${dragging ? '' : 'transition-transform'} lg:translate-x-0 ${open ? 'translate-x-0' : '-translate-x-full'} flex flex-col backdrop-blur-xl`} style={{ width: `${width}px` }}>
+      <aside role="navigation" aria-label="Sessions" className={`fixed lg:relative top-0 left-0 h-full bg-[var(--pc-bg-base)]/95 border-r border-white/8 z-50 transform ${dragging ? '' : 'transition-transform'} lg:translate-x-0 ${open ? 'translate-x-0' : '-translate-x-full'} flex flex-col backdrop-blur-xl`} style={{ width: `${width}px` }}>
        <div className="h-14 flex items-center justify-between px-4 border-b border-white/8">
          <div className="flex items-center gap-2">
            <div className="relative">
@@ -337,7 +337,7 @@ export function Sidebar({ sessions, activeSession, onSwitch, onDelete, open, onC
      {confirmDelete && (
        <>
          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[70]" onClick={() => setConfirmDelete(null)} />
-          <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[80] w-72 bg-[#1e1e24] border border-white/10 rounded-2xl p-5 shadow-2xl">
+          <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[80] w-72 bg-[var(--pc-bg-base)] border border-white/10 rounded-2xl p-5 shadow-2xl">
            <p className="text-sm text-zinc-300 mb-4">{t('sidebar.deleteConfirm')}</p>
            <div className="flex gap-2 justify-end">
              <button
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,95 @@
+import { useState, useRef, useEffect } from 'react';
+import { Palette, Sun, Moon, Monitor, Check } from 'lucide-react';
+import { useTheme, type ThemeName, type AccentColor } from '../contexts/ThemeContext';
+import { useT } from '../hooks/useLocale';
+
+import type { TranslationKey } from '../lib/i18n';
+
+const themeOptions: { value: ThemeName; icon: typeof Sun; labelKey: TranslationKey }[] = [
+  { value: 'dark', icon: Moon, labelKey: 'theme.dark' },
+  { value: 'light', icon: Sun, labelKey: 'theme.light' },
+  { value: 'oled', icon: Monitor, labelKey: 'theme.oled' },
+];
+
+const accentOptions: { value: AccentColor; color: string }[] = [
+  { value: 'cyan', color: '#22d3ee' },
+  { value: 'violet', color: '#8b5cf6' },
+  { value: 'emerald', color: '#10b981' },
+  { value: 'amber', color: '#f59e0b' },
+  { value: 'rose', color: '#f43f5e' },
+  { value: 'blue', color: '#3b82f6' },
+];
+
+export function ThemeSwitcher() {
+  const { theme, accent, setTheme, setAccent } = useTheme();
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 rounded-2xl border border-[var(--pc-border)] bg-[var(--pc-bg-elevated)]/30 px-2.5 py-1.5 text-xs text-[var(--pc-text-muted)] hover:text-[var(--pc-text-secondary)] hover:bg-[var(--pc-bg-elevated)]/50 transition-colors"
+        title={t('theme.title')}
+      >
+        <Palette size={14} />
+      </button>
+      {open && (
+        <div className="absolute right-0 top-full mt-2 z-50 w-52 rounded-2xl border border-[var(--pc-border-strong)] bg-[var(--pc-bg-surface)] backdrop-blur-xl shadow-2xl p-3 animate-fade-in">
+          <div className="text-[10px] uppercase tracking-wider text-[var(--pc-text-faint)] font-semibold mb-2">
+            {t('theme.mode')}
+          </div>
+          <div className="flex gap-1.5 mb-3">
+            {themeOptions.map(opt => {
+              const Icon = opt.icon;
+              const active = theme === opt.value;
+              return (
+                <button
+                  key={opt.value}
+                  onClick={() => setTheme(opt.value)}
+                  className={`flex-1 flex flex-col items-center gap-1 py-2 rounded-xl border text-xs transition-all ${
+                    active
+                      ? 'border-[var(--pc-accent)]/40 bg-[var(--pc-accent)]/10 text-[var(--pc-accent-light)]'
+                      : 'border-[var(--pc-border)] text-[var(--pc-text-muted)] hover:bg-[var(--pc-bg-elevated)]/50'
+                  }`}
+                >
+                  <Icon size={16} />
+                  <span>{t(opt.labelKey)}</span>
+                </button>
+              );
+            })}
+          </div>
+          <div className="text-[10px] uppercase tracking-wider text-[var(--pc-text-faint)] font-semibold mb-2">
+            {t('theme.accent')}
+          </div>
+          <div className="flex gap-2 justify-center">
+            {accentOptions.map(opt => (
+              <button
+                key={opt.value}
+                onClick={() => setAccent(opt.value)}
+                className="relative h-7 w-7 rounded-full border-2 transition-all flex items-center justify-center"
+                style={{
+                  backgroundColor: opt.color,
+                  borderColor: accent === opt.value ? opt.color : 'transparent',
+                  boxShadow: accent === opt.value ? `0 0 8px ${opt.color}40` : 'none',
+                }}
+                title={opt.value}
+              >
+                {accent === opt.value && <Check size={14} className="text-white drop-shadow" />}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/ToolCall.tsx
+++ b/src/components/ToolCall.tsx
@@ -280,7 +280,7 @@ export function ToolCall({ name, input, result }: { name: string; input?: Record
              <div className="group/tc-block relative">
                <HighlightedPre
                  text={inputStr}
-                  className="text-xs bg-[#1a1a20]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 font-mono"
+                  className="text-xs bg-[var(--pc-bg-input)]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 font-mono"
                  wrap={wrap}
                />
                <WrapToggle wrap={wrap} onToggle={() => setWrap(!wrap)} />
@@ -299,7 +299,7 @@ export function ToolCall({ name, input, result }: { name: string; input?: Record
                      <div className="group/tc-block relative">
                        <HighlightedPre
                          text={imageData.remaining}
-                          className="text-xs bg-[#1a1a20]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 font-mono mb-2"
+                          className="text-xs bg-[var(--pc-bg-input)]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 font-mono mb-2"
                          wrap={wrap}
                        />
                        <WrapToggle wrap={wrap} onToggle={() => setWrap(!wrap)} />
@@ -312,7 +312,7 @@ export function ToolCall({ name, input, result }: { name: string; input?: Record
                  <div className="group/tc-block relative">
                    <HighlightedPre
                      text={result}
-                      className="text-xs bg-[#1a1a20]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 max-h-64 overflow-y-auto font-mono"
+                      className="text-xs bg-[var(--pc-bg-input)]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 max-h-64 overflow-y-auto font-mono"
                      wrap={wrap}
                    />
                    <WrapToggle wrap={wrap} onToggle={() => setWrap(!wrap)} />
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,183 @@
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+
+export type ThemeName = 'dark' | 'light' | 'oled';
+export type AccentColor = 'cyan' | 'violet' | 'emerald' | 'amber' | 'rose' | 'blue';
+
+interface ThemeContextValue {
+  theme: ThemeName;
+  accent: AccentColor;
+  setTheme: (t: ThemeName) => void;
+  setAccent: (a: AccentColor) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: 'dark',
+  accent: 'cyan',
+  setTheme: () => {},
+  setAccent: () => {},
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+const STORAGE_KEY = 'pinchchat-theme';
+
+interface StoredTheme {
+  theme: ThemeName;
+  accent: AccentColor;
+}
+
+const themes: Record<ThemeName, Record<string, string>> = {
+  dark: {
+    '--pc-bg-base': '#1e1e24',
+    '--pc-bg-surface': '#232329',
+    '--pc-bg-elevated': '#27272a',
+    '--pc-bg-input': '#1a1a20',
+    '--pc-bg-sidebar': 'rgba(30,30,36,0.95)',
+    '--pc-bg-code': '#1a1a20',
+    '--pc-border': 'rgba(255,255,255,0.08)',
+    '--pc-border-strong': 'rgba(255,255,255,0.1)',
+    '--pc-text-primary': '#d4d4d8',
+    '--pc-text-secondary': '#a1a1aa',
+    '--pc-text-muted': '#71717a',
+    '--pc-text-faint': '#52525b',
+    '--pc-scrollbar-thumb': '#52525b',
+    '--pc-scrollbar-track': '#27272a',
+    '--pc-scrollbar-thumb-hover': '#71717a',
+    '--pc-user-bubble': 'rgba(34,211,238,0.06)',
+    '--pc-user-border': 'rgba(34,211,238,0.15)',
+  },
+  light: {
+    '--pc-bg-base': '#f4f4f5',
+    '--pc-bg-surface': '#ffffff',
+    '--pc-bg-elevated': '#e4e4e7',
+    '--pc-bg-input': '#ffffff',
+    '--pc-bg-sidebar': 'rgba(255,255,255,0.95)',
+    '--pc-bg-code': '#f4f4f5',
+    '--pc-border': 'rgba(0,0,0,0.08)',
+    '--pc-border-strong': 'rgba(0,0,0,0.12)',
+    '--pc-text-primary': '#18181b',
+    '--pc-text-secondary': '#3f3f46',
+    '--pc-text-muted': '#71717a',
+    '--pc-text-faint': '#a1a1aa',
+    '--pc-scrollbar-thumb': '#a1a1aa',
+    '--pc-scrollbar-track': '#e4e4e7',
+    '--pc-scrollbar-thumb-hover': '#71717a',
+    '--pc-user-bubble': 'rgba(34,211,238,0.08)',
+    '--pc-user-border': 'rgba(34,211,238,0.25)',
+  },
+  oled: {
+    '--pc-bg-base': '#000000',
+    '--pc-bg-surface': '#0a0a0a',
+    '--pc-bg-elevated': '#141414',
+    '--pc-bg-input': '#0a0a0a',
+    '--pc-bg-sidebar': 'rgba(0,0,0,0.95)',
+    '--pc-bg-code': '#0a0a0a',
+    '--pc-border': 'rgba(255,255,255,0.06)',
+    '--pc-border-strong': 'rgba(255,255,255,0.08)',
+    '--pc-text-primary': '#d4d4d8',
+    '--pc-text-secondary': '#a1a1aa',
+    '--pc-text-muted': '#71717a',
+    '--pc-text-faint': '#3f3f46',
+    '--pc-scrollbar-thumb': '#3f3f46',
+    '--pc-scrollbar-track': '#0a0a0a',
+    '--pc-scrollbar-thumb-hover': '#52525b',
+    '--pc-user-bubble': 'rgba(34,211,238,0.05)',
+    '--pc-user-border': 'rgba(34,211,238,0.12)',
+  },
+};
+
+const accents: Record<AccentColor, Record<string, string>> = {
+  cyan: {
+    '--pc-accent': '#22d3ee',
+    '--pc-accent-light': '#67e8f9',
+    '--pc-accent-dim': 'rgba(34,211,238,0.3)',
+    '--pc-accent-glow': 'rgba(34,211,238,0.1)',
+    '--pc-accent-rgb': '34,211,238',
+  },
+  violet: {
+    '--pc-accent': '#8b5cf6',
+    '--pc-accent-light': '#a78bfa',
+    '--pc-accent-dim': 'rgba(139,92,246,0.3)',
+    '--pc-accent-glow': 'rgba(139,92,246,0.1)',
+    '--pc-accent-rgb': '139,92,246',
+  },
+  emerald: {
+    '--pc-accent': '#10b981',
+    '--pc-accent-light': '#34d399',
+    '--pc-accent-dim': 'rgba(16,185,129,0.3)',
+    '--pc-accent-glow': 'rgba(16,185,129,0.1)',
+    '--pc-accent-rgb': '16,185,129',
+  },
+  amber: {
+    '--pc-accent': '#f59e0b',
+    '--pc-accent-light': '#fbbf24',
+    '--pc-accent-dim': 'rgba(245,158,11,0.3)',
+    '--pc-accent-glow': 'rgba(245,158,11,0.1)',
+    '--pc-accent-rgb': '245,158,11',
+  },
+  rose: {
+    '--pc-accent': '#f43f5e',
+    '--pc-accent-light': '#fb7185',
+    '--pc-accent-dim': 'rgba(244,63,94,0.3)',
+    '--pc-accent-glow': 'rgba(244,63,94,0.1)',
+    '--pc-accent-rgb': '244,63,94',
+  },
+  blue: {
+    '--pc-accent': '#3b82f6',
+    '--pc-accent-light': '#60a5fa',
+    '--pc-accent-dim': 'rgba(59,130,246,0.3)',
+    '--pc-accent-glow': 'rgba(59,130,246,0.1)',
+    '--pc-accent-rgb': '59,130,246',
+  },
+};
+
+function applyVars(vars: Record<string, string>) {
+  const root = document.documentElement;
+  for (const [k, v] of Object.entries(vars)) {
+    root.style.setProperty(k, v);
+  }
+}
+
+function loadStored(): StoredTheme {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (parsed.theme in themes && parsed.accent in accents) return parsed;
+    }
+  } catch {}
+  return { theme: 'dark', accent: 'cyan' };
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [stored] = useState(loadStored);
+  const [theme, setThemeState] = useState<ThemeName>(stored.theme);
+  const [accent, setAccentState] = useState<AccentColor>(stored.accent);
+
+  const persist = useCallback((t: ThemeName, a: AccentColor) => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ theme: t, accent: a }));
+  }, []);
+
+  const setTheme = useCallback((t: ThemeName) => {
+    setThemeState(t);
+    applyVars(themes[t]);
+    persist(t, accent);
+  }, [accent, persist]);
+
+  const setAccent = useCallback((a: AccentColor) => {
+    setAccentState(a);
+    applyVars(accents[a]);
+    persist(theme, a);
+  }, [theme, persist]);
+
+  // Apply on mount
+  useEffect(() => {
+    applyVars({ ...themes[theme], ...accents[accent] });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <ThemeContext.Provider value={{ theme, accent, setTheme, setAccent }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,34 @@
@import "tailwindcss";
@import "highlight.js/styles/base16/material-palenight.min.css";

+:root {
+  --pc-bg-base: #1e1e24;
+  --pc-bg-surface: #232329;
+  --pc-bg-elevated: #27272a;
+  --pc-bg-input: #1a1a20;
+  --pc-bg-sidebar: rgba(30,30,36,0.95);
+  --pc-bg-code: #1a1a20;
+  --pc-border: rgba(255,255,255,0.08);
+  --pc-border-strong: rgba(255,255,255,0.1);
+  --pc-text-primary: #d4d4d8;
+  --pc-text-secondary: #a1a1aa;
+  --pc-text-muted: #71717a;
+  --pc-text-faint: #52525b;
+  --pc-scrollbar-thumb: #52525b;
+  --pc-scrollbar-track: #27272a;
+  --pc-scrollbar-thumb-hover: #71717a;
+  --pc-accent: #22d3ee;
+  --pc-accent-light: #67e8f9;
+  --pc-accent-dim: rgba(34,211,238,0.3);
+  --pc-accent-glow: rgba(34,211,238,0.1);
+  --pc-accent-rgb: 34,211,238;
+  --pc-user-bubble: rgba(34,211,238,0.06);
+  --pc-user-border: rgba(34,211,238,0.15);
+}
+
 * {
  scrollbar-width: thin;
-  scrollbar-color: #52525b #27272a;
+  scrollbar-color: var(--pc-scrollbar-thumb) var(--pc-scrollbar-track);
 }

 /* WebKit scrollbar styling (Chrome, Safari, Edge) */
@@ -17,12 +42,12 @@
 }

 ::-webkit-scrollbar-thumb {
-  background: #52525b;
+  background: var(--pc-scrollbar-thumb);
  border-radius: 3px;
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: #71717a;
+  background: var(--pc-scrollbar-thumb-hover);
 }

 /* Textarea-specific: even thinner scrollbar, no horizontal scroll */
@@ -53,8 +78,8 @@ textarea {

 html, body {
  margin: 0;
-  background: #1e1e24;
-  color: #d4d4d8;
+  background: var(--pc-bg-base);
+  color: var(--pc-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
@@ -92,7 +117,7 @@ html, body {

 /* Markdown styles */
 .markdown-body pre {
-  background: #1a1a20 !important;
+  background: var(--pc-bg-code) !important;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px;
@@ -119,14 +144,14 @@ html, body {

 /* Override highlight.js theme bg to match */
 .hljs {
-  background: #1a1a20 !important;
+  background: var(--pc-bg-code) !important;
 }

 .markdown-body p { margin: 4px 0; }
 .markdown-body ul, .markdown-body ol { margin: 4px 0; padding-left: 20px; }
 .markdown-body blockquote { border-left: 3px solid rgba(34,211,238,0.4); padding-left: 12px; margin: 8px 0; opacity: 0.8; }
 .markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 12px 0 4px; }
-.markdown-body a { color: #67e8f9; text-decoration: underline; }
+.markdown-body a { color: var(--pc-accent-light); text-decoration: underline; }
 .markdown-body table { border-collapse: collapse; margin: 8px 0; display: block; overflow-x: auto; max-width: 100%; }
 .markdown-body th, .markdown-body td { border: 1px solid rgba(255,255,255,0.08); padding: 6px 12px; }
 .markdown-body th { background: rgba(255,255,255,0.04); }
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -102,6 +102,14 @@ const en = {

  // Export
  'header.export': 'Export conversation as Markdown',
+
+  // Theme
+  'theme.title': 'Theme',
+  'theme.mode': 'Mode',
+  'theme.accent': 'Accent',
+  'theme.dark': 'Dark',
+  'theme.light': 'Light',
+  'theme.oled': 'OLED',
 } as const;

 const fr: Record<keyof typeof en, string> = {
@@ -187,6 +195,13 @@ const fr: Record<keyof typeof en, string> = {
  'shortcuts.generalSection': 'Général',

  'header.export': 'Exporter la conversation en Markdown',
+
+  'theme.title': 'Thème',
+  'theme.mode': 'Mode',
+  'theme.accent': 'Accent',
+  'theme.dark': 'Sombre',
+  'theme.light': 'Clair',
+  'theme.oled': 'OLED',
 };

 export type TranslationKey = keyof typeof en;
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,12 +2,15 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import { ErrorBoundary } from './components/ErrorBoundary'
+import { ThemeProvider } from './contexts/ThemeContext'
 import './index.css'

 ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ErrorBoundary>
+      <ThemeProvider>
        <App />
+      </ThemeProvider>
    </ErrorBoundary>
  </React.StrictMode>,
 )