Claude Code ガイド

Appearance

原文（日本語に翻訳） ​

[VSCode] メッセージアクションボタンの背景色が正しくない問題を修正

原文（英語） ​

[VSCode] Fixed message action buttons having incorrect background colors

概要 ​

VS Code拡張のメッセージアクションボタン（「Apply」「Reject」などの操作ボタン）の背景色が正しく表示されない問題が修正されました。以前は、テーマの設定や環境によってボタンの背景色がおかしく表示され、視認性が低下したり、UIが乱れて見えたりする問題がありました。v2.1.21では、VS Codeのテーマカラーに適切に従うようになり、どのテーマでも統一された見た目でボタンが表示されます。

基本的な使い方 ​

この修正は自動的に適用されるため、特別な設定や操作は不要です。VS Code拡張を使用する際、メッセージアクションボタンが正しい背景色で表示されます。

# Claude Codeがコード変更を提案した場合
[提案されたコード変更]

[Apply] [Reject] [Edit]
# ↑ これらのボタンがテーマに合った背景色で表示される

実践例 ​

コード変更の適用/却下 ​

Claudeがコード変更を提案した際、アクションボタンが見やすくなります：

> src/utils.tsのエラーハンドリングを改善して

# Claudeが変更を提案
[提案: try-catchブロックを追加]

# v2.1.21以降: ボタンが正しい背景色で表示
[Apply]  # 緑系の背景色（テーマに応じて）
[Reject] # グレー系の背景色
[Edit]   # 青系の背景色

# v2.1.20以前: 背景色が正しくなく、視認性が低い場合があった

ダークテーマでの使用 ​

ダークテーマを使用している場合も、適切なコントラストでボタンが表示されます：

# ダークテーマ（Dark+、Monokai、Nord など）
[Apply] [Reject] [Edit]
# → 暗い背景に適した明るい色調のボタン

ライトテーマでの使用 ​

ライトテーマでも視認性が確保されます：

# ライトテーマ（Light+、Solarized Light など）
[Apply] [Reject] [Edit]
# → 明るい背景に適した暗い色調のボタン

カスタムテーマでの使用 ​

カスタムテーマやサードパーティテーマでも、VS Codeのテーマカラーに従います：

# カスタムテーマ（Dracula、One Dark Pro、GitHub Theme など）
[Apply] [Reject] [Edit]
# → テーマで定義されたアクションボタンの色が適用される

複数のアクションボタン ​

複数の選択肢がある場合も、それぞれのボタンが適切に区別されます：

> いくつかのリファクタリング案を提示して

[案1: クラス化] [案2: 関数分割] [案3: インターフェース抽出] [却下]
# すべてのボタンが明確に表示され、どれが選択可能かが分かりやすい

注意点 ​

  • この修正はv2.1.21で適用されました
  • VS Code拡張専用の修正です（CLI版には該当しません）
  • どのテーマでも一貫した動作が保証されます
  • この問題により以前のバージョンでボタンが見づらかった場合、v2.1.21へのアップデートで改善されます
  • ハイコントラストテーマにも対応しています
  • ボタンのホバー時の色も適切に設定されています
  • VS Codeのテーマを変更した際も、ボタンの色が自動的に調整されます

関連情報 ​