fix(ui): theme the created-key box so it follows dark mode

[yuneng-berri]

TLDR

Problem this solves:

• Created key is unreadable in dark mode
• Key box has a hardcoded light background

How it solves it:

• Use the bg-muted and text-foreground theme tokens
• Drop the inline styles that ignore the theme

User Flow

Before: an admin on the dark theme creates a virtual key and cannot read the key they were just told to save

1. They open http://localhost:4000/ui/?page=api-keys and switch the dashboard to the dark theme
2. They click "Create New Key", fill in the form, and submit
3. The "Save your Key" dialog opens with the key sitting in a near-white box
4. The key characters render in the dark theme's light text color on that near-white box, so the key is washed out and unreadable
5. Their only option is copying blind with "Copy Virtual Key", or switching back to the light theme to read it

After: the same dialog shows the key at full contrast on the dark theme

1. They open http://localhost:4000/ui/?page=api-keys and switch the dashboard to the dark theme
2. They click "Create New Key", fill in the form, and submit
3. The "Save your Key" dialog opens with the key sitting in a muted box that matches the dark theme
4. The key characters render at full contrast and are readable
5. The light theme is unchanged, and the same dialog in the Add Agent wizard picks up the fix too

Relevant issues

Linear ticket

Pre-Submission checklist

• I have added meaningful tests
• The handful of test files covering my change pass locally
• 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

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

Setup: run the proxy with python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml --detailed_debug --reload --use_v2_migration_resolver, run the dashboard with npm run dev in ui/litellm-dashboard, open http://localhost:3000/?page=api-keys, and switch the dashboard to the dark theme

Before (aae36f4)

1. Click "Create New Key", pick a model, and submit
2. Observe the "Save your Key" dialog: the key sits in a near-white box and the characters are washed out to the point of being unreadable

After (b94a1b8)

1. Click "Create New Key", pick a model, and submit
2. Observe the "Save your Key" dialog: the box matches the dark theme and the key reads at full contrast
3. Switch back to the light theme and repeat, confirming it looks the same as before this change

Type

🐛 Bug Fix

Caveats (if any)

• Other hardcoded backgrounds remain in the logs drawer

[greptile-apps]

Greptile Summary

This PR replaces the created-key box’s hardcoded light styling with semantic theme tokens so virtual keys remain readable in dark mode.

• Uses bg-muted and text-foreground while preserving the existing spacing and wrapping behavior.
• Adds a focused regression test confirming the key box uses theme classes rather than inline styling.

Confidence Score: 5/5

The PR appears safe to merge, with the theme-token replacement preserving the component’s existing layout and wrapping behavior.

The semantic color tokens are defined for both themes, the equivalent spacing and wrapping utilities are available, and the component’s existing callers remain compatible with the updated presentation.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx	Replaces hardcoded inline presentation styles with defined semantic theme utilities while preserving key wrapping and layout.
ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx	Adds a focused assertion that the key container uses the muted theme token and no inline style.

_{Reviews (1): Last reviewed commit: "fix(ui): theme the created-key box so it..." | Re-trigger Greptile}