forked from molecule-ai/molecule-core
026c81acf0
User screenshot showed pale lavender user bubbles with hard-to-read white text and a nearly-invisible agent bubble blending into the dark panel. Root causes: 1. Tailwind v4 defaults `dark:` to `prefers-color-scheme: dark`. Our ThemeProvider writes `data-theme="dark"` on <html> so user toggle wins over OS — but `dark:` classes elsewhere in the codebase weren't tracking it. Added `@custom-variant dark` to re-bind the variant. 2. `bg-accent` themes lighter in dark mode (--color-accent: #6883e8), dropping white-text contrast to ~3:1 (fails WCAG AA). Switched user bubble to solid blue-600/500 so it stays ~5:1 in both modes. 3. `bg-surface-card` (#1a1d23) was only ~7% lighter than the panel bg (#0e1014), making agent bubbles disappear. Bumped to zinc-700 in dark; light mode keeps the warm surface-card tint. 4. System (error) bubble's /10 overlay was nearly invisible; raised to /25 in dark with stronger border + ink for readability. Sub-tab + textarea polish included: low-contrast `text-ink-soft` → `text-ink-mid`, focus-visible rings on tabs, dark variants on textarea. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| __tests__ | ||
| api/buildinfo | ||
| blog/2026-04-20-chrome-devtools-mcp | ||
| orgs | ||
| pricing | ||
| globals.css | ||
| icon.png | ||
| layout.tsx | ||
| page.tsx | ||
