Claude Code Chat Colors

by Micha Kaufman · BETA

Blue for your prompts. Green for the answers that matter.

Claude Code Chat Colors makes coding conversations easier to follow by introducing two levels of visual clarity. Your prompts stand out with blue borders and subtle blue backgrounds, while Claude's main written responses are marked with green borders. At a glance, you can see who said what and follow the conversation naturally.

Just as importantly, the green border helps you spot Claude's actual explanations, conclusions, and recommendations amid the surrounding activity. Intermediate steps such as Thinking, Bash commands, and other tool operations remain visible but are not highlighted as main responses. This makes long, tool-heavy conversations easier to scan without hiding useful technical details.

Supports both Light and Dark themes. Styling is applied automatically after installation.

See the difference

Blue highlights your prompts. Green highlights Claude's main answers. Thinking, Bash commands and other tool activity remain visible without being mistaken for Claude's primary responses.

Light Theme — Before & After

Dark Theme — Before & After

Enhanced styling — Actual screenshots

Light Theme

Dark Theme

This is an independent, unofficial extension; it is not affiliated with or endorsed by Anthropic or Microsoft.

Installation

1. Install the official Claude Code extension in VS Code.
2. Install Claude Code Chat Colors from the Marketplace, or use Extensions → … → Install from VSIX… for a downloaded .vsix.
3. The styling is applied automatically when this extension activates. No manual Apply command is required. If an already-open Claude Code chat does not update, run Developer: Reload Window from the Command Palette (Ctrl+Shift+P, or Cmd+Shift+P on macOS).

To build from source instead, install Node.js and run npm install, npm test, and npm run package from the extension folder. The resulting .vsix can be installed manually.

Switching between appearances

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and choose:

• Claude Chat Colors: Apply Styling — enables the saved preference and applies blue/green styling.
• Claude Chat Colors: Restore Original Styling — disables the saved preference and removes the custom CSS block, restoring Claude Code's original styling.
• Claude Chat Colors: Check Compatibility — reports the installed Claude Code version and whether the expected stylesheet and patch markers can be read. This is a structural check, not a guarantee that future Claude Code UI changes are supported.

Reload the VS Code window if an already-open chat still shows the previous appearance. Your Apply/Restore preference persists across restarts. You can also switch the claudeChatColors.enabled setting in VS Code Settings.

Commands missing? Check that Claude Code Chat Colors is Enabled in the Extensions panel (Ctrl+Shift+X); disabled extensions cannot provide commands. Re-enable it and reload the window if needed.

Disable and uninstall

Before clicking Disable: run Claude Chat Colors: Restore Original Styling and reload the window, then disable the extension. VS Code does not provide a reliable pre-disable cleanup hook, so disabling directly can leave the CSS styling behind. If you only want the original colors, use the Restore command or turn off claudeChatColors.enabled instead.

Before uninstalling: the safest method is to run Restore Original Styling, reload, and then uninstall. The extension also supplies a vscode:uninstall cleanup script that attempts to remove its marked CSS after complete uninstallation, generally when VS Code next starts. Cleanup is best-effort and can fail in unusual installations or when filesystem permissions prevent access.

Normal VS Code shutdown and restart never trigger restoration. The extension does not restore styling in deactivate(). If enabled, it reapplies styling when VS Code starts. Following a Claude Code update, reload once or twice if necessary.

Compatibility, safety and limitations

BETA — Claude Code updates may break styling. This extension modifies Claude Code's installed webview/index.css file. It does not use an officially supported VS Code styling API. Internal changes to Claude Code or VS Code can make the stylesheet path or CSS selectors incompatible.

To reduce risk, the extension:

• Changes only its uniquely marked CSS block and refuses malformed/duplicate markers.
• Avoids rewriting an unchanged patch, uses a temporary file for replacement, and stores a recovery copy when available.
• Coordinates simultaneous local writes from multiple VS Code windows.
• Leaves original CSS unchanged when the target cannot be read or validated.

These precautions cannot guarantee compatibility, prevent all crashes or filesystem errors, or make uninstall cleanup work in every environment. A stale lock after an interrupted write, custom extension paths, remote extension hosts, or insufficient permissions may require manual recovery. If the stylesheet was replaced by a Claude Code update, the extension attempts to reapply its styling at the next VS Code startup. Existing webviews may need a reload.

If automatic cleanup fails, re-enable or reinstall this extension and run Restore Original Styling. As a last resort, remove only the block between /* CLAUDE_CHAT_COLORS_START */ and /* CLAUDE_CHAT_COLORS_END */ from Claude Code's installed CSS, or reinstall Claude Code.

Support

For bug reports, contact Micha Kaufman via the publisher information on the Marketplace listing. Include your operating system, VS Code version, Claude Code version, and the message shown by Check Compatibility. A support URL may be added in a future release.

License

Copyright © 2026 Micha Kaufman. All rights reserved.

Free for personal and commercial use. Modification, redistribution and resale are not permitted without prior written permission. See the bundled LICENSE.txt file for complete terms.