fix(ui): make playground chat bubbles theme-aware

[yuneng-berri]

TLDR

Problem this solves:

• Playground chat bubbles stay white in dark mode
• Message text is dark-on-white, so it is unreadable
• The MCP-events placeholder bubble has the same three fills

How it solves it:

• Swap the inline hex fills for theme tokens
• Assistant bubble becomes bg-card over border-border
• User bubble becomes the info tint, matching sibling surfaces

User Flow

Before: someone using the Playground in dark mode cannot read any of the conversation, so the page is unusable for them

1. They open the account menu at https://litellm-domain/ui/ and pick the Dark theme
2. They go to https://litellm-domain/ui/?page=llm-playground, choose a model, and send a message
3. Their own message and the model's reply come back inside two near-white cards on the dark page
4. The text in both cards is drawn in the dark theme's light foreground, so on those white cards it is invisible: only the model badge and the latency row are legible
5. They have to switch back to the Light theme to read anything they just sent or received

After: the same conversation is readable in dark mode, and light mode looks exactly as it did

1. They open the account menu at https://litellm-domain/ui/ and pick the Dark theme
2. They go to https://litellm-domain/ui/?page=llm-playground, choose a model, and send a message
3. Their own message and the model's reply come back inside two dark cards that sit on the dark page
4. Both messages are readable, the user card keeps its blue tint, and the latency row still reads TTFT, total latency and token counts
5. Switching to the Light theme shows the same white and pale-blue cards the page has always had

Relevant issues

Linear ticket

Pre-Submission checklist

• I have added meaningful tests
• The handful of test files covering my change pass locally, e.g. uv run pytest tests/test_litellm/<your_test_file>.py -v. Leave the suites (make test-unit-*, make test-unit) to CI: it finishes in ~15 minutes where a laptop takes an hour or more
• My PR passes all required CI/CD checks (e.g., lint, schema.d.ts sync check, etc.)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

Shared setup, run once against a proxy started from the branch under test:

curl -s -X POST http://localhost:4000/model/new \
  -H "Authorization: Bearer sk-1234" -H "Content-Type: application/json" \
  -d "{\"model_name\":\"claude-sonnet-5\",\"litellm_params\":{\"model\":\"anthropic/claude-sonnet-5\",\"api_key\":\"$ANTHROPIC_API_KEY\"}}"

Before (aae36f4)

1. Open http://localhost:4000/ui/, click the account menu in the top right, and pick Dark
2. Go to http://localhost:4000/ui/?page=llm-playground
3. Pick claude-sonnet-5 under Select Model, type any message, and hit send
4. Screenshot the reply: both bubbles render as white cards and neither message body is readable
5. Switch the account menu back to Light and screenshot again for the baseline

After (dc7b195)

1. Open http://localhost:4000/ui/, click the account menu in the top right, and pick Dark
2. Go to http://localhost:4000/ui/?page=llm-playground
3. Pick claude-sonnet-5 under Select Model, type the same message, and hit send
4. Screenshot the reply: both bubbles are dark, both message bodies are readable, and the user bubble keeps its blue tint
5. Switch the account menu back to Light and screenshot again: the cards look the same as the Before baseline

Type

🐛 Bug Fix

Caveats (if any)

• Only the playground bubbles; no wider dark-mode audit
• Light mode keeps the same colour family, at token weights

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[greptile-apps]

Greptile Summary

The PR replaces fixed light-colored Playground chat-bubble styles with semantic theme tokens so messages and the MCP-events placeholder adapt to light and dark themes.

• Uses paired card background, foreground, and border tokens for assistant bubbles.
• Preserves the user bubble’s blue tint with info-token opacity utilities.
• Adds parameterized coverage for user and assistant bubble and avatar classes.

Confidence Score: 5/5

The PR appears safe to merge because the new classes reference defined theme tokens with compatible light- and dark-theme contrast.

The change is limited to presentation utilities, uses semantic token and opacity patterns already supported by the dashboard’s Tailwind pipeline, and adds focused regression coverage without weakening existing tests.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.tsx	Replaces fixed bubble, border, and avatar colors with registered semantic tokens that provide readable light- and dark-theme combinations.
ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx	Applies the same theme-aware card, foreground, border, and muted tokens to the temporary MCP-events assistant bubble.
ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.test.tsx	Adds focused parameterized assertions that both roles use the intended semantic surface and avatar classes instead of inline colors.

_{Reviews (1): Last reviewed commit: "fix(ui): make playground chat bubbles th..." | Re-trigger Greptile}