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

fix: migrate all components to theme-aware CSS variables

Browse Source 
Replace ~150 hardcoded Tailwind color classes (bg-zinc-*, text-zinc-*,
border-white/*, text-cyan-*, bg-cyan-*) with CSS custom properties
(--pc-*) across all 17 components.

Add @theme block in index.css for Tailwind v4 theme-aware utility
classes (bg-pc-elevated, text-pc-text, border-pc-border, etc.).

Add --pc-hover, --pc-hover-strong, --pc-separator variables per theme
(white/alpha for dark/OLED, black/alpha for light).

Theme switcher (dark/light/OLED) now actually works — all UI elements
respond to theme changes in real-time.

Fixes #55
This commit is contained in:
Nicolas Varrot
2026-02-13 00:29:50 +00:00
parent 62663e1ac9
commit b60c0ce3c4
17 changed files with 184 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ErrorBoundary.tsx
View File

@@ -40,30 +40,30 @@ 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-[var(--pc-bg-base)] text-zinc-300 p-6">
<div className="h-dvh flex items-center justify-center bg-[var(--pc-bg-base)] text-pc-text 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">
<h1 className="text-xl font-semibold text-pc-text">
{t('error.title')}
</h1>
<p className="text-sm text-zinc-400">
<p className="text-sm text-pc-text-secondary">
{t('error.description')}
</p>
{this.state.error && (
<pre className="mt-3 p-3 rounded-lg bg-zinc-800/60 text-xs text-red-400 text-left overflow-auto max-h-32">
<pre className="mt-3 p-3 rounded-lg bg-pc-elevated/60 text-xs text-red-400 text-left overflow-auto max-h-32">
{this.state.error.message}
</pre>
)}
<div className="flex gap-3 justify-center pt-2">
<button
onClick={this.handleRetry}
className="px-4 py-2 rounded-lg bg-zinc-700 hover:bg-zinc-600 text-sm font-medium transition-colors"
className="px-4 py-2 rounded-lg bg-pc-elevated hover:bg-pc-elevated text-sm font-medium transition-colors"
>
{t('error.retry')}
</button>
<button
onClick={this.handleReload}
className="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-sm font-medium transition-colors"
className="px-4 py-2 rounded-lg bg-[var(--pc-accent)] hover:bg-[var(--pc-accent-light)] text-sm font-medium transition-colors"
>
{t('error.reload')}
</button>