テーマ

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

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

• Locations
• Selecting a Theme
• Creating a Custom Theme
• Theme Format
• Color Tokens
• Color Values
• Tips

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. 必要なすべての色を使用してテーマを定義します (Color Tokens を参照)。

{
  "$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",
    "scrollbarThumb": "#555566",
    "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",
    "thinkingMax": "#ff0088",
    "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 個の必須トークンをすべて定義する必要があります。 thinkingMax はオプションであり、thinkingXhigh に戻ります。 scrollbarThumb はオプションであり、selectedBg に戻ります。

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

すべてのテーマでは、必要な 51 個のカラー トークンをすべて定義する必要があります。 thinkingMax と scrollbarThumb は、既存のテーマとの互換性を保つためのオプションです。省略した場合は、それぞれ thinkingXhigh と selectedBg が使用されます。

思考レベルを示すエディターの境界線の色 (微妙なものから目立つものまでの視覚的な階層):

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

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

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

• 0-15: 基本的な ANSI カラー (端末に依存)
• 16-231: 6×6×6 RGB 立方体 (16 + 36×R + 6×G + B ここで R、G、B は 0 ～ 5)
• 232-255: グレースケールランプ

Pi は 24 ビット RGB カラーを使用します。最新の端末のほとんどはこれをサポートしています (iTerm2、Kitty、WezTerm、Windows Terminal、VS Code)。 256 色のみをサポートする古い端末の場合、pi は最も近い近似値に戻ります。

トゥルーカラーのサポートを確認します。

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

暗い端末: コントラストの高い、明るく飽和した色を使用します。

明るい端末: コントラストが低く、暗く落ち着いた色を使用します。

色の調和: 基本パレット (Nord、Gruvbox、Tokyo Night) から始めて、vars で定義し、一貫して参照します。

テスト: さまざまなメッセージ タイプ、ツールの状態、マークダウン コンテンツ、および折り返された長いテキストを使用してテーマを確認します。

VS コード: 正確な色を得るには、terminal.integrated.minimumContrastRatio から 1 に設定します。

組み込みテーマを参照してください。

• dark.json
• light.json