fix(canvas): brighten agent chat prose body in dark mode
User feedback: chat-bubble agent text still washed out after #2618 + #2623. Looked at the actual rendered colors and the issue was Tailwind Typography's `prose-invert` defaults — body text ships at zinc-300, which lands at ~5.3:1 against bg-zinc-700. Passes AA but visibly duller than the user bubble's crisp white-on-blue (~10:1). Override the prose CSS variables on the agent bubble in dark mode: - body → zinc-100 (was zinc-300) - headings / bold → white - inline code → zinc-100 That brings agent body text to ~13:1 against bg-zinc-700, matching the user bubble's brightness so both sides of the conversation read at the same crispness. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
79590eb861
commit
c37596fc26
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user