[Bug]: provider badge initials are invisible on light accent colors
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 23k
- Forks
- 5.9k
- Avg merge
- 11h 14m
- Merged PRs (30d)
- 357
Description
Before submitting
- I searched existing issues and did not find a duplicate.
- I included enough detail to reproduce or investigate the problem.
Area
apps/web
Steps to reproduce
- Open Settings → Providers and edit a provider instance (for example Codex).
- Set a custom accent color to white
#ffffff(any light color reproduces it). - Look at the provider icon in the sidebar, the model picker, or Settings → Usage.
Expected behavior
The account badge keeps its initials readable for every accent color. A light accent should get dark text, a dark accent should get light text.
Actual behavior
The badge always paints its initials in white (text-white in apps/web/src/components/chat/ProviderInstanceIcon.tsx), so with a white or light accent the initials disappear. In the screenshot below Codex has a white accent and shows no "CO", while Claude's orange accent still shows "CL".
The mobile badge has the same hardcoded white text in apps/mobile/src/components/ProviderIcon.tsx.

Impact
Cosmetic issue
Version or commit
0.0.40-nightly
Environment
macOS desktop app, dark theme
Screenshots, recordings, or supporting files
See the screenshot above.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with apps/web/src/components/chat/ProviderInstanceIcon.tsx and apps/mobile/src/components/ProviderIcon.tsx, focusing on the hardcoded text-white styling and how each badge receives its accent color. Reproduce the issue with a white or light accent in the provider settings, sidebar, model picker, and Usage views. Done means provider initials remain readable across light and dark accent colors on web and mobile.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100