테마

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"
  }
}

네 가지 형식이 지원됩니다.

• 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