molecule-ai/molecule-core
35
0
Fork 2
Code Issues 16 Pull Requests 2 Actions 49 Packages Projects Releases Wiki Activity

Merge pull request #2627 from Molecule-AI/fix/canvas-chat-agent-prose-brightness

Browse Source 
fix(canvas): brighten agent chat prose body in dark mode
This commit is contained in:
Hongming Wang 2026-05-03 20:29:33 +00:00 committed by GitHub
commit c8e422f6c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
canvas/src/components/tabs/ChatTab.tsx
View File

@ -796,12 +796,14 @@ function MyChatPanel({ workspaceId, data }: Props) {
className={`prose prose-sm max-w-none [&>p]:mb-1 [&>p:last-child]:mb-0 ${
msg.role === "user"
? "prose-invert"
// Agent bubbles use bg-zinc-700 in dark mode; without
// prose-invert the Tailwind Typography plugin keeps
// its default DARK body color → unreadable dark-on-dark.
// Light mode keeps default prose colors against the
// warm surface-card bg.
: "dark:prose-invert"
// Agent bubbles in dark mode: invert prose AND brighten
// the body/heading/bold/code tokens. prose-invert's
// default `--tw-prose-invert-body: zinc-300` lands at
// ~5.3:1 against bg-zinc-700 — passes AA but reads
// washed out next to the user bubble's crisp
// white-on-blue (~10:1). Push body to zinc-100 so the
// agent text matches that crispness.
: "dark:prose-invert dark:[--tw-prose-invert-body:theme(colors.zinc.100)] dark:[--tw-prose-invert-headings:theme(colors.white)] dark:[--tw-prose-invert-bold:theme(colors.white)] dark:[--tw-prose-invert-code:theme(colors.zinc.100)]"
}`}
>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>