fix: improve user message visibility with distinctive theme-aware colors

[Githubguy132010]

Context

Fixes #5738

User messages in chat history were difficult to distinguish from AI responses after a recent change muted the styling. This made it hard to skim through conversations and identify user input visually.

Implementation

The root cause was commit 8b01f57172 which changed user message styling from distinctive inverted colors to muted sidebar colors, making user messages blend in with AI responses.

This fix updates the user message styling in ChatRow.tsx to use VSCode's theme-aware input validation colors:

Before (muted, blends with UI):

bg-vscode-sideBar-background text-vscode-foreground

After (distinctive, theme-aware):

bg-vscode-inputValidation-infoBackground text-vscode-inputValidation-infoForeground border-vscode-inputValidation-infoBorder

This provides:

• Distinctive visual appearance for user messages
• Theme-aware colors that work in both light and dark themes
• Subtle border for additional visual separation

Screenshots

before	after
User messages blended with sidebar background	User messages have distinctive info-colored background and border

How to Test

1. Open Kilo Code extension
2. Start a conversation with the AI
3. Send several messages back and forth
4. Observe that your user messages now have a distinctive background color that makes them easy to identify when skimming through the chat history

Get in Touch

Discord: thomas07374

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0d0db89

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
kilo-code	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[lambertjosh]

Thanks @Githubguy132010 - I am checking with our designer, but I agree user input can be more distinctive. While I'm doing that, can you add the kilocode_change comments back to the changed lines? To minimize merge conflicts we like to keep them as targeted as possible.

Here is a screenshot for others to see of one theme, but in general for the handful I tested it is blue'ish:

[Githubguy132010]

Thanks @Githubguy132010 - I am checking with our designer, but I agree user input can be more distinctive. While I'm doing that, can you add the kilocode_change comments back to the changed lines? To minimize merge conflicts we like to keep them as targeted as possible.

Here is a screenshot for others to see of one theme, but in general for the handful I tested it is blue'ish:

@lambertjosh I added back the markers as requested.

[halyna-hlynska]

@Githubguy132010 @lambertjosh just a small suggestion from my side. I agree we need to make user messages more distinctive, but the current bright blue feels a bit too strong. It competes with primary action colors (which are also blue) and draws too much attention.

I’d suggest something more subtle instead. The goal is for user messages to remain clearly distinguishable without overpowering the rest of the UI.

In the updated version, I used a softer grey-ish background for user messages. This keeps them visually separated from agent responses and doesn’t compete with primary actions like “Run”.

Here's link to the Figma design with updated version

And here's a screenshot

[Githubguy132010]

@halyna-hlynska I agree your design is much better. I will implement your design from the screenshot tomorrow and push a commit.