テーマ

pi はテーマを作成できます。セットアップ用のテーマを作るよう依頼してください。

テーマ

テーマは TUI の色を定義する JSON ファイルです。

目次

• 場所
• テーマの選択
• カスタムテーマの作成
• テーマ形式
• カラートークン
• カラー値
• ヒント

場所

Pi は次の場所からテーマを読み込みます：

• 組み込み：dark、light
• グローバル：~/.pi/agent/themes/*.json
• プロジェクト：.pi/themes/*.json（プロジェクトが信頼された後のみ）
• パッケージ：themes/ ディレクトリまたは package.json の pi.themes エントリ
• 設定：ファイルまたはディレクトリを含む themes 配列
• CLI：--theme <path>（繰り返し可能）

--no-themes で探索を無効化します。

テーマの選択

/settings または settings.json でテーマを選択：

{
  "theme": "my-theme"
}

初回実行時、pi はターミナルの背景を検出し、dark または light をデフォルトにします。

カスタムテーマの作成

1. テーマファイルを作成：

mkdir -p ~/.pi/agent/themes
vim ~/.pi/agent/themes/my-theme.json

2. すべての必須色を含めてテーマを定義（カラートークンを参照）：

{
  "$schema": "https://raw.githubusercontent.com/earendil-works/pi/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
  "name": "my-theme",
  "vars": {
    "primary": "#00aaff",
    "secondary": 242
  },
  "colors": {
    "accent": "primary",
    "border": "primary",
    "borderAccent": "#00ffff",
    "borderMuted": "secondary",
    "success": "#00ff00",
    "error": "#ff0000",
    "warning": "#ffff00",
    "muted": "secondary",
    "dim": 240,
    "text": "",
    "thinkingText": "secondary",
    "selectedBg": "#2d2d30",
    "userMessageBg": "#2d2d30",
    "userMessageText": "",
    "customMessageBg": "#2d2d30",
    "customMessageText": "",
    "customMessageLabel": "primary",
    "toolPendingBg": "#1e1e2e",
    "toolSuccessBg": "#1e2e1e",
    "toolErrorBg": "#2e1e1e",
    "toolTitle": "primary",
    "toolOutput": "",
    "mdHeading": "#ffaa00",
    "mdLink": "primary",
    "mdLinkUrl": "secondary",
    "mdCode": "#00ffff",
    "mdCodeBlock": "",
    "mdCodeBlockBorder": "secondary",
    "mdQuote": "secondary",
    "mdQuoteBorder": "secondary",
    "mdHr": "secondary",
    "mdListBullet": "#00ffff",
    "toolDiffAdded": "#00ff00",
    "toolDiffRemoved": "#ff0000",
    "toolDiffContext": "secondary",
    "syntaxComment": "secondary",
    "syntaxKeyword": "primary",
    "syntaxFunction": "#00aaff",
    "syntaxVariable": "#ffaa00",
    "syntaxString": "#00ff00",
    "syntaxNumber": "#ff00ff",
    "syntaxType": "#00aaff",
    "syntaxOperator": "primary",
    "syntaxPunctuation": "secondary",
    "thinkingOff": "secondary",
    "thinkingMinimal": "primary",
    "thinkingLow": "#00aaff",
    "thinkingMedium": "#00ffff",
    "thinkingHigh": "#ff00ff",
    "thinkingXhigh": "#ff0000",
    "bashMode": "#ffaa00"
  }
}

3. /settings でテーマを選択。

ホットリロード： 現在アクティブなカスタムテーマファイルを編集すると、pi は自動的に再読み込みし、即座に視覚的フィードバックを得られます。

テーマ形式

{
  "$schema": "https://raw.githubusercontent.com/earendil-works/pi/main/packages/coding-agent/src/modes/interactive/theme/theme-schema.json",
  "name": "my-theme",
  "vars": {
    "blue": "#0066cc",
    "gray": 242
  },
  "colors": {
    "accent": "blue",
    "muted": "gray",
    "text": "",
    ...
  }
}

• name は必須で、一意である必要があり、/ を含めてはいけません。
• vars は任意。再利用可能な色をここで定義し、colors で参照します。
• colors は 51 個すべての必須トークンを定義する必要があります。

$schema フィールドはエディターの自動補完と検証を有効にします。

カラートークン

すべてのテーマは 51 個すべてのカラートークンを定義する必要があります。任意の色はありません。

コア UI（11 色）

トークン	用途
accent	プライマリアクセント（ロゴ、選択項目、カーソル）
border	通常のボーダー
borderAccent	ハイライトされたボーダー
borderMuted	控えめなボーダー（エディター）
success	成功状態
error	エラー状態
warning	警告状態
muted	セカンダリテキスト
dim	第三レベルのテキスト
text	デフォルトテキスト（通常は ""）
thinkingText	思考ブロックのテキスト

背景とコンテンツ（11 色）

トークン	用途
selectedBg	選択行の背景
userMessageBg	ユーザーメッセージの背景
userMessageText	ユーザーメッセージのテキスト
customMessageBg	拡張メッセージの背景
customMessageText	拡張メッセージのテキスト
customMessageLabel	拡張メッセージのラベル
toolPendingBg	ツールボックス（保留中）
toolSuccessBg	ツールボックス（成功）
toolErrorBg	ツールボックス（エラー）
toolTitle	ツールタイトル
toolOutput	ツール出力テキスト

Markdown（10 色）

トークン	用途
mdHeading	見出し
mdLink	リンクテキスト
mdLinkUrl	リンク URL
mdCode	インラインコード
mdCodeBlock	コードブロックの内容
mdCodeBlockBorder	コードブロックのフェンス
mdQuote	引用ブロックのテキスト
mdQuoteBorder	引用ブロックのボーダー
mdHr	水平線
mdListBullet	リストの箇条書き

ツール Diff（3 色）

トークン	用途
toolDiffAdded	追加された行
toolDiffRemoved	削除された行
toolDiffContext	コンテキスト行

シンタックスハイライト（9 色）

トークン	用途
syntaxComment	コメント
syntaxKeyword	キーワード
syntaxFunction	関数名
syntaxVariable	変数
syntaxString	文字列
syntaxNumber	数値
syntaxType	型
syntaxOperator	演算子
syntaxPunctuation	句読点

思考レベルボーダー（6 色）

思考レベルを示すエディターボーダーの色（視覚的階層は控えめから目立つまで）：

トークン	用途
thinkingOff	思考オフ
thinkingMinimal	最小思考
thinkingLow	低思考
thinkingMedium	中思考
thinkingHigh	高思考
thinkingXhigh	超高思考

Bash モード（1 色）

トークン	用途
bashMode	Bash モードでのエディターボーダー（! プレフィックス）

HTML エクスポート（任意）

export セクションは /export HTML 出力の色を制御します。省略した場合、色は userMessageBg から派生します。

{
  "export": {
    "pageBg": "#18181e",
    "cardBg": "#1e1e24",
    "infoBg": "#3c3728"
  }
}

カラー値

4 つの形式がサポートされています：

形式	例	説明
Hex	"#ff0000"	6 桁の hex RGB
256 色	39	xterm 256 色パレットインデックス（0-255）
変数	"primary"	vars エントリへの参照
デフォルト	""	ターミナルのデフォルト色

256 色パレット

• 0-15：基本 ANSI 色（ターミナル依存）
• 16-231：6×6×6 RGB キューブ（R、G、B が 0-5 の 16 + 36×R + 6×G + B）
• 232-255：グレースケールランプ

ターミナル互換性

Pi は 24 ビット RGB 色を使用します。ほとんどのモダンターミナルがこれをサポートしています（iTerm2、Kitty、WezTerm、Windows Terminal、VS Code）。256 色のみをサポートする古いターミナルでは、pi は最も近い近似値にフォールバックします。

truecolor サポートを確認：

echo $COLORTERM  # Should output "truecolor" or "24bit"

ヒント

ダークターミナル： 明るく彩度の高い色を使い、コントラストを高くします。

ライトターミナル： 暗く落ち着いた色を使い、コントラストを低くします。

カラーハーモニー： ベースパレット（Nord、Gruvbox、Tokyo Night）から始め、vars で定義し、一貫して参照します。

テスト： さまざまなメッセージタイプ、ツール状態、Markdown コンテンツ、長い折り返しテキストでテーマを確認します。

VS Code： 正確な色のために terminal.integrated.minimumContrastRatio を 1 に設定します。

例

組み込みテーマを参照：

• dark.json
• light.json