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

34
src/index.css
View File

@@ -1,6 +1,23 @@
@import "tailwindcss";
@import "highlight.js/styles/base16/material-palenight.min.css";
@theme {
/* Theme-aware colors mapped to CSS custom properties */
--color-pc-base: var(--pc-bg-base);
--color-pc-surface: var(--pc-bg-surface);
--color-pc-elevated: var(--pc-bg-elevated);
--color-pc-input: var(--pc-bg-input);
--color-pc-code: var(--pc-bg-code);
--color-pc-border: var(--pc-border);
--color-pc-border-strong: var(--pc-border-strong);
--color-pc-text: var(--pc-text-primary);
--color-pc-text-secondary: var(--pc-text-secondary);
--color-pc-text-muted: var(--pc-text-muted);
--color-pc-text-faint: var(--pc-text-faint);
--color-pc-accent: var(--pc-accent);
--color-pc-accent-light: var(--pc-accent-light);
}
:root {
--pc-bg-base: #1e1e24;
--pc-bg-surface: #232329;
@@ -24,6 +41,9 @@
--pc-accent-rgb: 34,211,238;
--pc-user-bubble: rgba(34,211,238,0.06);
--pc-user-border: rgba(34,211,238,0.15);
--pc-hover: rgba(255,255,255,0.05);
--pc-hover-strong: rgba(255,255,255,0.08);
--pc-separator: rgba(255,255,255,0.05);
}
* {
@@ -61,12 +81,12 @@ textarea::-webkit-scrollbar:horizontal {
}
textarea::-webkit-scrollbar-thumb {
background: #3f3f46;
background: var(--pc-scrollbar-thumb);
border-radius: 2px;
}
textarea::-webkit-scrollbar-thumb:hover {
background: #52525b;
background: var(--pc-scrollbar-thumb-hover);
}
textarea {
@@ -118,7 +138,7 @@ html, body {
/* Markdown styles */
.markdown-body pre {
background: var(--pc-bg-code) !important;
border: 1px solid rgba(255,255,255,0.06);
border: 1px solid var(--pc-border);
border-radius: 12px;
padding: 16px;
overflow-x: auto;
@@ -136,7 +156,7 @@ html, body {
}
.markdown-body code {
background: rgba(255,255,255,0.07);
background: var(--pc-accent-glow);
padding: 2px 6px;
border-radius: 6px;
font-size: 0.85em;
@@ -149,12 +169,12 @@ html, body {
.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 blockquote { border-left: 3px solid var(--pc-accent-dim); 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: 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); }
.markdown-body th, .markdown-body td { border: 1px solid var(--pc-border); padding: 6px 12px; }
.markdown-body th { background: var(--pc-accent-glow); }
.markdown-body img { max-width: 100%; border-radius: 8px; }
/* Accessibility: respect reduced-motion preferences */