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

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

/themeコマンドは、Claude Codeが自分の出力に使う配色を切り替えます。プロンプトのアクセント色、差分表示、成功・エラーなどのステータス色が対象です。ターミナルアプリ自体の背景や配色スキームは変わりません。そちらはターミナルアプリ側の設定です。

autoを選ぶと、Claude Codeがターミナルの背景の明暗を検出し、ターミナルがOSの外観設定に追従するたびにテーマも切り替わります。ダーク・ライトを固定したいときは、プリセットを個別に選びます。

プリセットのアクセント色だけが、普段のターミナルの配色から浮いて見えるなら、プリセットを作り直す必要はありません。気になるトークンだけを上書きすれば足ります。

気になる色だけ変えるカスタムテーマの作り方

/themeの一覧には、組み込みプリセット、自分で作ったカスタムテーマ、導入済みプラグインが配るテーマが並びます。作成は対話形式でもファイルの直接編集でも行えます。/themeの選択肢全体はthemeコマンドで配色と色覚多様性対応テーマを設定するで扱っています。

JSONファイルの書き方

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

色の値は#rrggbb、#rgb、rgb(r,g,b)、ansi256(n)、ansi:<name>の5通りです。ansi:<name>の<name>は16色のANSI標準色名で、redやcyanBrightが例です。ライト系のターミナルで使う前提の例として、"base": "light"を明示したテーマを置きます。アクセントと、差分の追加行・削除行の背景だけを、明るい背景に合わせて淡い色に変えています。色の値は筆者が選んだ一例です。

{
  "name": "Paper",
  "base": "light",
  "overrides": {
    "claude": "#7c3aed",
    "diffAdded": "#dcfce7",
    "diffRemoved": "#fee2e2"
  }
}

このJSONをプラグインのthemes/に置いてclaude plugin validateをかけると、v2.1.285ではValidation passedになりました。ただし後述のとおり、validateはテーマの中身までは検査しないので、色が意図どおりかは/themeで切り替えて目で確かめます。

もう1つの例では、アクセント、Plan modeの色、差分の背景、自分の発言の背景を1つのテーマで変えています。

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

dark-daltonizedとlight-daltonized、dark-ansiとlight-ansiも土台に選べます。daltonizedは色覚特性に配慮した配色、ansiはターミナルのANSIパレットだけを使う配色です。実際の見え方は/themeのプレビューで確かめます。

思った色にならないときの切り分け

ファイルを作ったのに色が変わらない、または想定と違う色になる。そんなときは、症状ごとに原因が分かれます。

書き間違いは、手元のclaude(v2.1.285)のclaude plugin validateでも検出されませんでした。プラグインのテーマフォルダにoverridesのerrorをeror、successの値をnot-a-colorとしたdracula.jsonを置いて検証しています。結果は次のとおりです。テーマファイルの中身については何も報告されず、Validation passedで終わりました。

claude plugin validate pb

Validating plugin manifest: .../pb/.claude-plugin/plugin.json
 
⚠ Found 1 warning:
 
  ❯ author: No author information provided. Consider adding author details for plugin attribution
 
✔ Validation passed with warnings

このコマンドが見ているのはマニフェストで、テーマファイルの色やトークン名の検査は行われないと考えられます。themesのパスが存在するか、プラグインの外を指していないかは、v2.1.283以降のclaude plugin validateが検査します。トークン名や色の書き間違いを見つける手段は、目で見るプレビューが中心です。

表示が崩れる、読みにくいといった症状の切り分けには、claude --safe-modeが使えます。claude --helpには、CLAUDE.mdやフック、MCPサーバーなどと並んでcustom themesを無効にして起動するとあります。管理者の設定は効いたままで、認証やモデル選択、権限は通常どおりです。ただしテーマ以外のカスタマイズもまとめて無効になり、色が変わらない症状の確認にはなりません。この状態で表示が正常なら、原因はテーマを含む自分のカスタマイズのどれかです。

よく使うカラートークン

overridesに書けるトークンは、/themeの編集画面でも同じ名前でプレビューしながら選べます。下の表は用途別の一覧です。

発言の背景のうち、userMessageBackground・bashMessageBackgroundColor・memoryBackgroundColorは通常の描画とフルスクリーンの両方で塗られます。フルスクリーン専用なのは、ホバー用と選択用の2つだけです。フルスクリーン用の設定だと思い込むと、通常の画面でも背景が変わります。

差分の色を変えるときは、diffAddedとdiffRemovedだけでなく、編集を拒否したあとに出る薄い差分のdiffAddedDimmedとdiffRemovedDimmedも確認します。通常の差分だけ変えると、拒否後の表示だけ元の配色に戻り、見た目が食い違います。

入力欄まわりは、モードごとに別のトークンが割り当てられています。planMode、autoAccept、bashBorderを別の色にしておくと、いまどのモードにいるかを色で見分けやすくなります。

claude・warning・permission・promptBorder・inactive・fastModeの6つは、スピナーのアニメーションに使う明るい色としてclaudeShimmerのようなShimmer付きのペアを持ちます。ペアも合わせて上書きすると、スピナーの色の組み合わせを保てます。アクセントを紫に寄せるなら、次のように2つ並べて書きます。

{
  "name": "Violet",
  "base": "dark",
  "overrides": {
    "claude": "#8b5cf6",
    "claudeShimmer": "#c4b5fd"
  }
}

shimmer側は、スピナーのアニメーションのグラデーションで、より明るい色として使われるトークンです。ここで例に挙げた2つの値は、ベースより明るい側を選んだ筆者の一例です。どの程度の明るさが適切かは公式ページに指定がないので、/themeのプレビューで決めます。

サブエージェントとパラレルタスクは、8色(red・blue・green・yellow・purple・orange・pink・cyan)のどれかでトランスクリプトに表示されます。トークン名は<color>_FOR_SUBAGENTS_ONLYです。サブエージェント定義にcolor: blueとあれば、blue_FOR_SUBAGENTS_ONLYの値で描かれます。

プロンプト入力のultrathinkは7色のレインボーで表示されます。rainbow_<color>とrainbow_<color>_shimmer(<color>はred・orange・yellow・green・blue・indigo・violet)で個別に上書きできます。

プラグインでテーマを配る

チームで同じ配色を使いたいなら、~/.claude/themes/へファイルを配るより、プラグインに載せる方法があります。配布の手順とテーマの選び方はプラグインテーマでClaude Codeの配色をチームに配布するにまとまっています。ここでは、手元で確かめたclaude plugin validateの出力と設定値の書き分けに絞ります。プラグインそのものの作り方はClaude Codeプラグイン(Plugins)完全ガイドにあります。

プラグインで配られたテーマをtheme設定の値にするときは、custom:<plugin-name>:<slug>の形で書きます。個人用のcustom:<slug>とは書式が違うので、settings.jsonで既定にするときは書き分けます。

マニフェストで場所を指定するキーはexperimental.themesです。指定すると既定のthemes/フォルダの走査が置き換わります。トップレベルのthemesキーも今は読み込まれますが、claude plugin validateは警告を出します。v2.1.285で"themes": "./themes/"と書いたマニフェストを検証すると、次のメッセージが出ました。

claude plugin validate pa

⚠ Found 2 warnings:
 
  ❯ themes: 'themes' is an experimental component; declare it under 'experimental.themes' instead of at the top level. Top-level still loads for now but will be removed in a future release.
  ❯ author: No author information provided. Consider adding author details for plugin attribution
 
✔ Validation passed with warnings

「今は読み込まれるが将来のリリースで削除される」と明記されているので、新規に作るならexperimental.themesで書いておくほうが安全です。experimentalの下の項目は、マニフェストの形が今後変わる可能性があるとされています。

テーマ設定の保存先とステータスライン

/configのメニューからテーマを変えると、ユーザー設定の~/.claude/settings.jsonに書き込まれます。ファイルが無ければ、最初にテーマを変えたときに作られます。

画面下部に出るモデル名・作業ディレクトリ・Gitブランチなどは、テーマのトークンではなくstatusLineの領域です。配色を整えたうえで表示内容を変えたいときは、Claude Code statuslineの設定と表示項目の選び方を参照してください。/themeの一覧のキー操作はClaude Codeショートカット一覧にもあります。

まとめ

ターミナル本体の配色はそのままにして、浮いて見える色だけをoverridesで上書きします。ライト系のターミナルならbaseを明示します。