Issue Station
Sign In
Tools hereToolbox

claude-code - 💡(How to fix) Fix Per-component UI color customization (e.g. user message foreground/background) [1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
anthropics/claude-code#50818•Fetched 2026-04-20 12:12:12
View on GitHub
Comments
0
Participants
1
Timeline
4
Reactions
0
Author
hrphrp
Participants
hrphrp
Timeline (top)
labeled ×4

Root Cause

A concrete pain point: on the default dark theme, the user message block renders with a light background and white/near-white foreground. In scrollback, previously-sent user messages are hard to read because the foreground and background are low-contrast. The rest of the UI is fine — only the user-message bubble needs adjustment.

Fix Action

Fix / Workaround

Current workaround

Code Example

{
  "uiColors": {
    "userMessage": {
      "foreground": "#1a1a1a",
      "background": "#e8f0fe"
    },
    "assistantMessage": { "foreground": "...", "background": "..." },
    "toolCall": { "foreground": "...", "background": "..." }
  }
}
RAW_BUFFERClick to expand / collapse

Problem

Claude Code's current theming is wholesale — /theme switches the entire palette (dark / light / ansi variants). There is no way to restyle a specific UI component independently.

A concrete pain point: on the default dark theme, the user message block renders with a light background and white/near-white foreground. In scrollback, previously-sent user messages are hard to read because the foreground and background are low-contrast. The rest of the UI is fine — only the user-message bubble needs adjustment.

Switching themes wholesale works around this but is a blunt instrument: it changes everything else too (assistant messages, tool output framing, accents), which may not be desired.

Proposed solution

Add granular component-level color overrides in settings.json, for example:

{
  "uiColors": {
    "userMessage": {
      "foreground": "#1a1a1a",
      "background": "#e8f0fe"
    },
    "assistantMessage": { "foreground": "...", "background": "..." },
    "toolCall": { "foreground": "...", "background": "..." }
  }
}

Accepted values could be hex, named ANSI colors, or the sentinel "default" / "inherit" to fall back to the active theme.

Why this is worth it

  • Accessibility — users with visual sensitivities often need per-element tuning, not a whole palette swap.
  • Scrollback readability — the transcript is a primary artifact for review, and the user-message bubble is the most-scanned element when looking back at what was asked.
  • Consistency with VS Code / terminal conventions — both expose per-component color tokens (workbench.colorCustomizations, ANSI slot overrides). Claude Code currently doesn't.

Related

  • Feature request for defaultSessionColor — anthropics/claude-code#50806 (related but different goal: per-session tinting vs. per-component styling)

Current workaround

Only the -ansi themes (dark-ansi, light-ansi) defer colors to the terminal palette, which lets users indirectly re-tint via their iTerm2 / terminal profile — but the terminal-color-to-UI-component mapping isn't documented, so this is guesswork and affects every other element that touches the same ANSI slot.

Environment

  • Claude Code CLI
  • macOS (iTerm2)
  • Default dark theme

extent analysis

TL;DR

Implementing granular component-level color overrides in settings.json is the most likely fix to address the issue of low-contrast user message blocks in the default dark theme.

Guidance

  • Introduce a uiColors section in settings.json to allow for per-component color customization, as proposed in the issue.
  • Define specific color overrides for the userMessage component, such as foreground and background, to improve contrast and readability.
  • Consider adding similar overrides for other components, like assistantMessage and toolCall, to provide a consistent user experience.
  • Test the new color overrides to ensure they are applied correctly and do not introduce any unintended visual issues.

Example

{
  "uiColors": {
    "userMessage": {
      "foreground": "#1a1a1a",
      "background": "#e8f0fe"
    }
  }
}

Notes

The proposed solution requires updates to the Claude Code CLI to support the new uiColors section in settings.json. The issue does not provide information on how to implement this change, so further guidance from the development team may be necessary.

Recommendation

Apply the proposed workaround by introducing granular component-level color overrides in settings.json, as this addresses the specific pain point of low-contrast user message blocks and provides a more flexible and accessible solution.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#docker error#permission error#memory optimization#batch processing#GPU compatibility

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING