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

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