Claude Media
Claude Codeカラーテーマの設定とカスタムテーマの作り方

Claude Codeカラーテーマの設定とカスタムテーマの作り方

Claude Codeの/themeコマンドでのテーマ切り替えと、~/.claude/themes/にJSONを置いて作るカスタムテーマの手順をまとめます。

テーマを変えると何が変わるか

/themeコマンドは、Claude Codeが自分の出力に使う配色を切り替えます。プロンプトのアクセントカラーや差分表示、ステータスバッジの色などが対象で、ターミナルアプリケーション自体の背景色や配色スキームは変わりません。ターミナル本体の見た目はターミナルアプリ側の設定が担っており、Claude Codeが制御できるのはあくまで自分が描画する範囲だけです。

autoオプションを選ぶと、ターミナルの背景が明るいか暗いかをClaude Codeが検出し、OSの外観設定が切り替わるたびに自動で追従します。手動でダーク・ライトを固定したい場合は、プリセットから個別に選べます。

普段使っているターミナルのテーマに寄せたいのに、組み込みプリセットのアクセント色だけ浮いて見える、というのがカスタムテーマを作る典型的な動機です。プリセットを丸ごと作り直す必要はなく、気になるトークンだけを上書きすれば済みます。

/themeでプリセットとカスタムテーマを選ぶ

/themeコマンド、または/configのテーマピッカーからテーマを選びます。一覧には組み込みのプリセットに加えて、自分で定義したカスタムテーマと、導入済みのプラグインが配布しているテーマが並びます。一覧の最後にある「New custom theme…」を選ぶと、名前を付けてから個別のカラートークンを上書きする対話形式でカスタムテーマを作成できます。一覧でカスタムテーマを選択した状態でCtrl+Eを押すと、編集画面をすぐに開けます。/themeコマンド自体が持つ選択肢の全体像はthemeコマンドで配色と色覚多様性対応テーマを設定するで整理しています。

カスタムテーマファイルを作る

各カスタムテーマは~/.claude/themes/配下のJSONファイル1つに対応します。ファイル名から.jsonを除いた部分がテーマのslugになり、選択すると設定としてcustom:<slug>が保存されます。ファイルには次の3つのフィールドを書けます。

フィールド内容
namestring内容/themeに表示される名前。省略時はファイル名のslugがそのまま使われる
basestring内容ベースにするプリセット。dark / light / dark-daltonized / light-daltonized / dark-ansi / light-ansiのいずれか。省略時はdark
overridesobject内容上書きしたい色トークン名と色の値のマップ。指定していないトークンはベースの値をそのまま使う

色の値は5種類の書き方に対応しています。Webでおなじみの16進数表記#rrggbbと省略形の#rgb、10進数で個別に指定するrgb(r,g,b)、ターミナルの256色パレットの番号をそのまま使うansi256(n)、そして標準的なANSI 16色の名前をそのまま書くansi:<name>(redcyanBrightなど)です。手元のターミナルテーマの配色に厳密に合わせたいならansi256ansi:系、汎用的なブランドカラーを指定したいなら16進数表記が使いやすい書き方になります。次の例はdarkプリセットをベースに、プロンプトのアクセント・エラー表示・成功表示の3色だけを上書きするテーマです。

{
  "name": "Dracula",
  "base": "dark",
  "overrides": {
    "claude": "#bd93f9",
    "error": "#ff5555",
    "success": "#50fa7b"
  }
}

baseにはdarklightの他に、色覚特性に配慮したdark-daltonizedlight-daltonized、そしてANSI標準の16色だけで構成するdark-ansilight-ansiも選べます。daltonized系は赤と緑の区別がつきにくい環境でも差分表示やステータス色を見分けやすくしたプリセットで、overridesを書く前の土台として先に試す価値があります。

複数のトークンをまとめて上書きする例も見ておきます。次のテーマはブランドのアクセント色、Plan modeの枠線、差分表示の背景、フルスクリーンモードでの自分の発言の背景色をまとめて変更しています。

{
  "name": "Midnight",
  "base": "dark",
  "overrides": {
    "claude": "#a78bfa",
    "planMode": "#38bdf8",
    "diffAdded": "#14532d",
    "diffRemoved": "#7f1d1d",
    "userMessageBackground": "#1e1b4b"
  }
}

このように用途別のトークンを1つのファイルにまとめて書けるので、「差分の色だけ変えたい」「フルスクリーンの背景だけ落ち着かせたい」といった要望を組み合わせて1つのカスタムテーマに集約できます。

Claude Codeは~/.claude/themes/を監視しており、ファイルの追加や変更を検知すると動いているセッションにもそのまま反映します。エディタで保存するだけで、再起動なしに次の描画から新しい色が使われます。例外は、Claude Code起動時点で~/.claude/themes/フォルダ自体が存在しなかった場合です。このときは最初のテーマファイルを作ったあと、1回だけ再起動が必要です。それ以降はフォルダが存在するので、変更は再起動なしに反映され続けます。

よく使うカラートークン

overridesに指定できるトークンは、/themeの対話編集画面でも同じ名前でプレビューしながら選べます。代表的なものを用途別にまとめます。

グループトークン制御対象
テキスト・アクセントトークンclaude制御対象スピナーやアシスタントのラベルに使う基本アクセント色
テキスト・アクセントトークンtext制御対象標準の前景テキスト
テキスト・アクセントトークンinactive制御対象ヒントやタイムスタンプなど補助的なテキスト
ステータストークンsuccess制御対象成功メッセージや通過したチェック
ステータストークンerror制御対象エラーメッセージと失敗
ステータストークンwarning制御対象警告メッセージとAuto modeの枠線
入力欄・モード表示トークンpromptBorder制御対象Manual modeでの入力欄の枠線
入力欄・モード表示トークンplanMode制御対象Plan modeのアクセントと枠線
入力欄・モード表示トークンautoAccept制御対象Accept-edits modeのアクセントと枠線
差分表示トークンdiffAdded / diffRemoved制御対象追加行・削除行の背景色
差分表示トークンdiffAddedWord / diffRemovedWord制御対象追加行・削除行内での単語単位のハイライト
フルスクリーン専用トークンuserMessageBackground制御対象フルスクリーンレンダリング時、自分の発言の背景
フルスクリーン専用トークンmemoryBackgroundColor制御対象フルスクリーンレンダリング時、#によるメモリー入力の背景
入力欄・モード表示トークンbashBorder制御対象!によるシェルコマンド入力時の入力欄の枠線
入力欄・モード表示トークンide制御対象IDE接続時のインジケーター色
入力欄・モード表示トークンfastMode制御対象Fast modeインジケーターの色
使用量メータートークンrate_limit_fill / rate_limit_empty制御対象/usage画面のメーターの塗りと空き部分
ラベルトークンbriefLabelYou / briefLabelClaude制御対象発言者ラベル「You」「Claude」の色

入力欄まわりのトークンは、いま自分がどのモードにいるかを色で判断する材料になります。Plan modeならplanMode、Accept-edits modeならautoAccept、シェルコマンドを直接打っているときはbashBorderというように、モードごとに別トークンが用意されているので、枠線の色を見ただけでどの操作モードかが分かるように配色を分けておくと事故を防ぎやすくなります。

claudewarningpermissionpromptBorderinactivefastModeの6つは、スピナーのアニメーションに使う明るい色としてclaudeShimmerのようなShimmerサフィックス付きのペアトークンを持ちます。ベースの色だけ変えてshimmer側を変えないと、アニメーションの色だけ浮いて見えることがあります。

サブエージェントはred_FOR_SUBAGENTS_ONLYのように、8色(red・blue・green・yellow・purple・orange・pink・cyan)に対応したトークンでトランスクリプト上の色分けを制御できます。プロンプト入力でultrathinkと打つと出る7色グラデーションも、rainbow_<color>rainbow_<color>_shimmerのトークン(redorangeyellowgreenblueindigoviolet)で個別に上書きできます。未知のトークン名や不正な色の値は黙って無視される仕様なので、タイプミスがあっても描画が壊れることはありません。

プラグインが配布するテーマも使える

/themeの一覧には、導入済みのプラグインが提供するテーマも自動的に並びます。組織やチームで共通のカラースキームを配りたい場合、各自の~/.claude/themes/にJSONを個別配置する代わりに、プラグイン経由でテーマを配布する方法もあります。マーケットプレイス経由でプラグインを入れておけば、テーマファイルを1つずつ手元にコピーする手間もかかりません。プラグインの作り方や配布の流れはClaude Codeプラグイン(Plugins)完全ガイドにまとめています。

ステータスラインと組み合わせる

画面下部に表示する情報(モデル名・作業ディレクトリ・Gitブランチなど)は、テーマの色トークンではなくstatusLineの領域です。テーマで配色を整えたうえで、表示する情報の中身を変えたい場合はカスタムstatusLineを設定します。設定方法はClaude Code statuslineの設定と表示項目の選び方で扱っています。

よくあるつまずき

overridesに書いたトークン名のスペルを間違えても、Claude Codeはエラーを出さず黙って無視します。色が反映されないときは、まず/themeの対話編集画面で同じトークンが一覧にあるか確認してください。一覧に無ければタイプミスの可能性が高いです。

初回だけ再起動が要ることを知らずに、ファイルを作ったのに色が変わらないと感じるケースもあります。~/.claude/themes/フォルダが最初から存在していたか、それとも今回のファイル作成で初めてできたかで挙動が変わる点を覚えておくと切り分けが早くなります。

ファイル名がそのままテーマのslugになる仕様のため、既存のカスタムテーマと同じファイル名で保存すると上書きになります。複数人でテーマファイルを共有するときは、ファイル名の衝突に注意してください。

baseを省略すると常にdarkから始まる点も見落としやすいところです。ライトテーマのターミナルで作業しているのに、baseを書かずにoverridesだけ書いてしまうと、ベース自体は暗い配色のままになり、上書きしていない部分だけ浮いて見えることがあります。ライト系のターミナルをベースにしたいときは"base": "light"を明示してください。

よくある質問

ダークモード・ライトモードは自動で切り替わる?

autoオプションを選んでいれば、ターミナルの背景が明るいか暗いかを検出して自動追従します。OSの外観設定を切り替えるたびにテーマも連動して変わります。

サブエージェントごとの色も変えられる?

変えられます。<color>_FOR_SUBAGENTS_ONLYという命名規則のトークンが8色分あり、overridesで個別に上書きできます。サブエージェント定義でcolor: blueと指定されていれば、blue_FOR_SUBAGENTS_ONLYの値で描画されます。

ultrathinkのレインボー表示も変えられる?

変えられます。rainbow_<color>rainbow_<color>_shimmerという名前のトークンが7色分あり、overridesに含めれば上書きできます。

テーマファイルを編集したら毎回再起動が必要?

必要ありません。~/.claude/themes/フォルダがすでに存在していれば、ファイルの保存だけで動いているセッションに反映されます。再起動が必要なのは、フォルダ自体が最初から無かった場合の初回だけです。

Ctrl+Eは何のショートカット?

/themeの一覧でカスタムテーマにカーソルを合わせた状態でCtrl+Eを押すと、そのテーマの編集画面をすぐに開けます。組み込みプリセットには使えないので、まず「New custom theme…」でカスタムテーマを1つ作ってから編集に進む流れになります。他のキー操作もあわせて確認したい場合はClaude Codeショートカット一覧にまとめています。

daltonized系のプリセットはどんな場面で選ぶ?

赤と緑の区別がつきにくい色覚特性がある場合や、差分表示やステータス色の判別を優先したい場合に選びます。overridesを書く前のベースとして使えるので、カスタムテーマを作る際の出発点にもなります。

テーマファイルはチームで共有できる?

できます。中身はただのJSONファイルなので、Gitなどで配布して各自の~/.claude/themes/に同じファイルを置けば同じテーマが使えます。組織単位で配りたい場合は、個別配布の代わりにプラグイン経由でテーマを提供する方法もあります。

overridesに書かなかったトークンはどうなる?

baseで指定したプリセットの値がそのまま使われます。全トークンを書き直す必要はなく、変えたい箇所だけをoverridesに足していく差分方式で運用できます。

まとめ

テーマ選びは/themeから始め、既存の配色に不満がある1点だけをoverridesで上書きするのが一番手早いやり方です。~/.claude/themes/にJSONを置くだけでカスタムテーマとして認識され、保存するたびに反映されます。色を変えてもターミナル本体の背景は変わらない点だけ、最初に押さえておいてください。ステータスラインの表示内容や、プラグイン経由でのテーマ配布まで含めて環境を整えたい場合は、それぞれの記事も合わせて参照してください。

この記事を共有:XはてブLinkedIn