Claude Media
themeコマンドで配色と色覚多様性対応テーマを設定する
Claude CodeTips

themeコマンドで配色と色覚多様性対応テーマを設定する

Claude Codeのthemeコマンドで選べる配色と、色覚多様性対応テーマ・自作カスタムテーマの作り方を解説します。

読了目安 約10分

themeコマンドでできること

/theme は、Claude Codeの配色を切り替えるコマンドです。ターミナルの背景に合わせる自動判定に加えて、ライト・ダークの基本テーマ、色覚多様性に配慮した専用テーマも選べます。さらにターミナル自体の配色をそのまま使うANSIテーマ、自分で色を組み立てるカスタムテーマまで用意されています。

/config のテーマピッカーからも同じ画面を開けます。デフォルトの配色が読みづらい、ターミナルのダークモードと合っていない、といった違和感があれば、まず /theme を開いて選び直すのが早道です。設定の変更はセッションをまたいで保持されるため、一度選べばそのつど選び直す必要はありません。

配色は見た目の好みだけの話ではありません。diffの追加行・削除行、成功・失敗のステータス表示、Planモードの強調色など、Claude Codeは色そのものに意味を持たせている箇所が多くあります。ターミナルの背景と衝突して読みにくい配色のまま使い続けると、これらの意味が伝わりにくくなります。作業に支障を感じたら、我慢せずに配色を変えてよい部分です。

用意されているテーマの種類

選べる選択肢は次の5系統です。

種類内容
auto内容ターミナルの明暗を検出し、OSの外観変更にも追随する
light / dark内容標準のライト・ダークテーマ
daltonized(色覚多様性対応)内容dark-daltonized / light-daltonized。色の区別が付きにくい配色を調整済み
ANSI内容dark-ansi / light-ansi。ターミナル自体のカラーパレットをそのまま使う
カスタムテーマ内容~/.claude/themes/ に置いたJSONファイル、またはプラグインが配布するテーマ

autoはターミナル側の外観設定(OSのダーク/ライト切り替えなど)が変わるたびに追随する仕組みです。ターミナルアプリの配色そのものはClaude Codeが制御しているわけではない点に注意してください。

カスタムテーマを作る手順

/theme の一覧末尾にあるNew custom theme… を選ぶと、対話形式でテーマを作成できます。

  1. /theme を実行し、New custom theme… を選ぶ
  2. テーマ名を入力する
  3. 上書きしたいカラートークンを個別に選び、色を指定する

既存のカスタムテーマをハイライトした状態で Ctrl+E を押すと、同じ画面で編集し直せます。

作成したテーマは ~/.claude/themes/ 配下にJSONファイルとして保存されます。ファイル名(拡張子を除いた部分)がそのままテーマのスラッグになり、選択すると custom:<slug> という値が設定として保存されます。

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

対話エディタとJSONの直接編集はどちらも同じファイルを操作しているので、途中で方法を切り替えても構いません。対話エディタでおおまかな配色を決めたあと、細かい調整だけJSONを直接編集する、といった使い方もできます。

JSONに書けるフィールドは3つだけです。name は /theme の一覧に表示される名前で、省略時はファイル名が使われます。base は土台にする組み込みテーマです。dark light dark-daltonized light-daltonized dark-ansi light-ansi のいずれかから選び、既定値は dark になっています。overrides は個別に上書きするトークンのマップです。

色の値は5つの形式で指定できます。#rrggbb #rgb rgb(r,g,b) ansi256(n)、そして赤や明るいシアンなど16種の標準ANSIカラー名を指す ansi:<name> です。存在しないトークン名や不正な値は無視されるだけなので、タイプミスで表示が壊れる心配はありません。

~/.claude/themes/ はファイル変更を監視しており、エディタで保存すれば実行中のセッションにもすぐ反映されます。例外は1つだけ: Claude Code起動時にこのフォルダ自体が存在しなかった場合、最初のテーマファイルを作ったあとに一度だけ再起動が必要です。それ以降の編集は再起動なしで反映されます。

設定できる主要なカラートークン

overrides に指定できるトークンは数十種類ありますが、実用上よく触るのは次のグループです。

グループ代表的なトークン用途
テキスト/アクセント代表的なトークンclaude text inactive用途ブランドアクセント色、標準テキスト、補助テキスト
ステータス代表的なトークンsuccess error warning用途成功・失敗・警告メッセージの色
入力欄/モード表示代表的なトークンpromptBorder planMode autoAccept用途入力欄の枠色、Planモード・自動承認モードの強調色
diff描画代表的なトークンdiffAdded diffRemoved用途差分表示での追加行・削除行の背景色
フルスクリーン代表的なトークンuserMessageBackground用途フルスクリーン表示時の自分の発言の背景

/theme の対話エディタでは、これらのトークンをリアルタイムプレビュー付きで確認しながら選べます。JSONを手書きする場合よりも試行錯誤しやすいので、初めてカスタムテーマを作るなら対話エディタから始めるのがおすすめです。

サブエージェントを並列実行しているときの表示色も上書きできます。それぞれのサブエージェントは red blue green yellow purple orange pink cyan のいずれかの色で区別されます。対応するトークン名は <色>_FOR_SUBAGENTS_ONLY という形式です。並列タスクが多い作業で見分けが付きにくいと感じたら、この系統のトークンを調整すると改善します。

settings.jsonで直接指定する方法

/theme を開かず、設定ファイルに直接書く方法もあります。

{
  "theme": "custom:dracula"
}

theme キーの既定値は dark です。組み込みの選択肢は auto dark light dark-daltonized light-daltonized dark-ansi light-ansi の7種類です。加えて自作カスタムテーマの custom:<slug>、プラグイン配布テーマの custom:<plugin-name>:<slug> も指定できます。チーム全体で同じ配色を共有したい場合は、この設定をリポジトリの .claude/settings.json にコミットしておくと全員に反映されます。

色覚多様性に配慮したいときの選択

dark-daltonized / light-daltonized は、色の区別が付きにくい人でも成功・失敗・警告といった意味の違いを見分けやすいよう配色を調整したテーマです。diffの追加行・削除行や、ステータス表示の赤緑の区別が主な調整対象になります。

チームでペアプログラミングをする、画面共有をしながら作業するといった場面では、自分だけでなく相手にとっての見やすさも関わってきます。個人の好みではなくアクセシビリティの選択肢として用意されている点が、他の配色オプションとの違いです。

ANSIテーマ(dark-ansi / light-ansi)はやや性格が異なり、Claude Code独自の配色を使わず、ターミナルアプリ側のカラーパレット設定をそのまま反映します。すでにターミナルで色覚多様性対応やコントラスト調整を済ませている場合は、こちらを選ぶとその設定を引き継げます。

使い分け早見表

状況おすすめのテーマ理由
OSのダーク/ライト切り替えに自動追随したいおすすめのテーマauto理由ターミナルの外観変更を検出して切り替わる
色の区別のしやすさを優先したいおすすめのテーマdark-daltonized / light-daltonized理由意味の違いを配色で見分けやすい
ターミナル側の配色設定をそのまま使いたいおすすめのテーマdark-ansi / light-ansi理由Claude Code独自の色を使わずターミナルのパレットに従う
ブランドカラーや個人の好みに合わせたいおすすめのテーマカスタムテーマ理由トークン単位で自由に上書きできる
チーム全員で同じ配色にしたいおすすめのテーマsettings.jsonでのtheme指定理由設定ファイルをコミットして共有できる

テーマ機能の広がり

自動テーマ(Auto)はv2.1.111で追加され、ターミナルのダーク/ライトモードに合わせて選べるようになりました。カスタムテーマの作成・切り替え機能はその後のv2.1.118で加わり、/theme からの対話作成と ~/.claude/themes/ への直接編集の両方に対応しています。プラグインがテーマを配布できる仕組みも同時期に整備されました。

テーマを選ぶときに迷いやすい点

配色を頻繁に切り替えて試すこと自体に制約はありません。/theme は選択するたびに即座に画面へ反映されるので、実際の作業画面を見ながら比較して決められます。1つに決め打ちせず、しばらく使ってみて違和感があれば別のテーマに変える、という試行錯誤がしやすい設計です。

autoとカスタムテーマのどちらを選ぶべきか迷う場合は、まず解決したい問題を切り分けると判断しやすくなります。ターミナルの明暗に追随させたいだけならauto、そのうえで特定の色だけ変えたいなら「autoに近いテーマをbaseにしたカスタムテーマ」を作るのが早道です。baseフィールドにautoは指定できず、組み込みテーマ6種(dark light dark-daltonized light-daltonized dark-ansi light-ansi)のいずれかを起点に選びます。

daltonizedテーマとカスタムテーマは競合しません。base: "dark-daltonized" を指定したうえで、overrides で個別の色をさらに調整することもできます。色覚多様性への配慮を保ちながら、ブランドカラーなど特定のアクセントだけ変更したい場合に使える組み合わせです。どのbaseを選んでも、上書きしていないトークンは元のテーマの色がそのまま使われます。

複数のマシンで同じテーマを使うには

カスタムテーマのJSONファイルは ~/.claude/themes/ に置かれるだけのローカルファイルです。別のマシンでも同じ配色を使いたい場合は、このファイルを設定ファイルと同じようにdotfilesリポジトリなどで管理し、コピーするか同期する運用になります。クラウド経由で自動的に同期される仕組みは用意されていません。

チームで配色を統一したい場合は、個々人が ~/.claude/themes/ にファイルを置く運用よりも、プラグインとしてテーマを配布するほうが管理しやすくなります。プラグインなら、インストールした時点で /theme の一覧に自動的に表示されるため、各自がファイルをコピーする手間がかかりません。更新が必要になったときも、プラグインを更新するだけで全員に行き渡ります。

よくある質問

カスタムテーマを削除するには

~/.claude/themes/ 配下から該当するJSONファイルを削除するだけです。ファイルを消せば /theme の一覧からも消えます。

overridesに書いたトークン名を間違えたらどうなるか

存在しないトークン名は無視されます。エラーにはならず、該当箇所は base で指定した組み込みテーマの色がそのまま使われます。

daltonizedテーマとANSIテーマは併用できるか

base フィールドにはdark-daltonizedのような値を1つだけ指定します。ANSIテーマをベースにしつつdaltonized相当の調整を加えたい場合の指定は base: "dark-ansi" です。そのうえで overrides に必要な色を個別に書けば、ベースを保ったまま部分的に上書きできます。

プラグインが配布するテーマはどこに置かれるか

プラグイン側の themes/ ディレクトリに含まれます。インストールしたプラグインのテーマは /theme の一覧に自動的に表示され、custom:<plugin-name>:<slug> の形式で参照されます。

まとめ

/theme はauto・light/dark・daltonized・ANSI・カスタムテーマの5系統から配色を選べるコマンドです。色の区別のしやすさを優先するならdaltonizedテーマ、ターミナル側の設定を引き継ぐならANSIテーマ、自分だけの配色を作るならカスタムテーマが選択肢になります。カスタムテーマは~/.claude/themes/のJSONファイルとして管理でき、Ctrl+Eで対話編集もできるので、まずは/themeから試すのが手早い方法です。

キーボード操作もあわせて調整したい場合はClaude Codeショートカット一覧を参考にしてください。プラグイン経由でのテーマ配布は、Claude Codeプラグイン完全ガイドで扱っています。settings.jsonの他の設定項目はClaude Code設定ガイドを参照してください。

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

関連する記事

Claude Code をもっと見る →