shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ChatInput.tsx
View File

@@ -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">

2
src/components/ErrorBoundary.tsx
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">

6
src/components/Header.tsx
View File

@@ -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" />

2
src/components/KeyboardShortcuts.tsx
View File

@@ -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 */}

4
src/components/LoginScreen.tsx
View File

@@ -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')}

4
src/components/Sidebar.tsx
View File

@@ -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

95
src/components/ThemeSwitcher.tsx Normal file
View File

@@ -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>
);
}

6
src/components/ToolCall.tsx
View File

@@ -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)} />