Tema

pi dapat membuat tema. Mintalah untuk membuatkannya untuk pengaturan Anda.

Tema adalah file JSON yang menentukan warna untuk TUI.

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

Pi memuat tema dari:

• Bawaan: dark, light
• Global: ~/.pi/agent/themes/*.json
• Proyek: .pi/themes/*.json (hanya setelah proyek dipercaya)
• Paket: themes/ direktori atau pi.themes entri di package.json
• Pengaturan: themes array dengan file atau direktori
• CLI: --theme <path> (dapat diulang)

Nonaktifkan penemuan dengan --no-themes.

Pilih tema melalui /settings atau di settings.json:

{
  "theme": "my-theme"
}

Saat pertama kali dijalankan, pi mendeteksi latar belakang terminal Anda dan defaultnya adalah dark atau light.

1. Buat file tema:

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

2. Tentukan tema dengan semua warna yang diperlukan (lihat 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",
    "searchMatchBg": "#2d2d30",
    "searchMatchText": "",
    "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. Pilih tema melalui /settings.

Hot reload: Saat Anda mengedit file tema khusus yang sedang aktif, pi memuat ulang secara otomatis untuk mendapatkan masukan visual langsung.

{
  "$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 wajib diisi, harus unik, dan tidak boleh mengandung /.
• vars adalah opsional. Tentukan warna yang dapat digunakan kembali di sini, lalu referensikan di colors.
• colors harus mendefinisikan seluruh 51 token yang diperlukan. thinkingMax, scrollbarThumb, dan dua token sorotan pencarian bersifat opsional serta menggunakan fallback yang tercantum di bawah.

Bidang $schema mengaktifkan pelengkapan dan validasi otomatis editor.

Setiap tema harus menentukan 51 token warna yang diperlukan. Token opsional menjaga kompatibilitas dengan tema yang ada: thinkingMax menggunakan thinkingXhigh, scrollbarThumb dan searchMatchBg menggunakan selectedBg, serta searchMatchText menggunakan text sebagai fallback. Kecocokan pencarian lain memakai searchMatchText pada searchMatchBg dengan garis bawah; kecocokan saat ini membalik pasangan latar depan/latar belakang tersebut dan memakai teks tebal.

Warna batas editor menunjukkan tingkat berpikir (hierarki visual dari halus hingga menonjol):

Bagian export mengontrol warna untuk /export keluaran HTML. Jika dihilangkan, warna berasal dari userMessageBg.

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

Empat format yang didukung:

• 0-15: Warna dasar ANSI (tergantung terminal)
• 16-231: 6×6×6 kubus RGB (16 + 36×R + 6×G + B dengan R,G,B adalah 0-5)
• 232-255: Jalan skala abu-abu

Pi menggunakan warna RGB 24-bit. Kebanyakan terminal modern mendukung ini (iTerm2, Kitty, WezTerm, Windows Terminal, VS Code). Untuk terminal lama yang hanya mendukung 256 warna, pi kembali ke perkiraan terdekat.

Periksa dukungan warna asli:

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

Terminal gelap: Gunakan warna cerah dan jenuh dengan kontras lebih tinggi.

Terminal terang: Gunakan warna yang lebih gelap dan kalem dengan kontras lebih rendah.

Harmoni warna: Mulailah dengan palet dasar (Nord, Gruvbox, Tokyo Night), tentukan di vars, dan rujuk secara konsisten.

Pengujian: Periksa tema Anda dengan berbagai jenis pesan, status alat, konten penurunan harga, dan teks panjang.

Kode VS: Setel terminal.integrated.minimumContrastRatio ke 1 untuk warna yang akurat.

Lihat tema bawaan:

• dark.json
• light.json