콘텐츠로 이동

Themes

Select a built-in theme or define your own.

opencode를 사용하면 여러 내장 테마 중 하나에서 선택할 수 있으며 terminal 테마에 적응하는 테마를 사용하거나 사용자 정의 테마를 정의 할 수 있습니다.

기본적으로 opencode는 자체 opencode 테마를 사용합니다.


끝 필요조건

자신의 풀 컬러 팔레트로 올바르게 표시하려면 terminal을 지원해야합니다 ** truecolor** (24 비트 색상). 대부분의 현대 terminal은 기본적으로 이것을 지원합니다, 그러나 당신은 그것을 가능하게 할 필요가 있을지도 모릅니다:

-체크 지원: echo $COLORTERM - 그것은 truecolor 또는 24bit를 출력해야 합니다

  • ** truecolor 사용 가능**: shell 프로파일에서 환경 변수 COLORTERM=truecolor를 설정
  • **Terminal 호환성 **: terminal 에뮬레이터 지원 24 비트 색상 (iTerm2, Alacritty, Kitty, Windows Terminal 및 GNOME Terminal의 최신 버전)

truecolor 지원 없이, 테마는 감소된 색깔 정확도로 나타날지도 모릅니다 또는 가장 가까운 256 색깔 대류로 뒤떨어질지도 모릅니다.


내장 테마

opencode는 여러 내장 테마와 함께 제공됩니다.

이름설명
systemterminal 배경 색상에 맞춰 자동으로 조정됨
tokyonightTokyonight 테마 기반
everforestEverforest 테마 기반
ayuAyu 다크 테마 기반
catppuccinCatppuccin 테마 기반
catppuccin-macchiatoCatppuccin 테마 기반
gruvboxGruvbox 테마 기반
kanagawaKanagawa 테마 기반
nordNord 테마 기반
matrix검은 배경에 녹색 텍스트의 해커 스타일 테마
one-darkAtom One Dark 테마 기반

그리고 더, 우리는 끊임없이 새로운 테마를 추가하고 있습니다.


시스템 테마

system 테마는 terminal의 색깔 계획에 자동적으로 적응시키기 위하여 디자인됩니다. 고정 색상을 사용하는 전통적인 테마와 달리, system 테마:

  • ** 회색 가늠자 **: terminal의 배경 색상을 기반으로 사용자 정의 회색 가늠자를 만들고 최적의 대조를 보장합니다.
  • ** ANSI 색상 사용 ** : terminal의 색상 팔레트를 존중하는 구문 강조 및 UI 요소에 대한 표준 ANSI 색상 (0-15).
  • ** terminal 기본 사항**: none 텍스트 및 배경 색상을 사용하여 terminal의 네이티브 외관을 유지합니다.

시스템 테마는 사용자를위한 것입니다 :

  • opencode가 terminal의 외관과 일치해야 합니다.
  • 사용자 정의 terminal 색상 구성
  • 모든 terminal 응용 분야의 일관된 모습

테마 사용

테마를 /theme 명령어로 선택하여 테마를 선택할 수 있습니다. 또는 config에서 지정할 수 있습니다.

opencode.json
{
"$schema": "https://opencode.ai/config.json",
"theme": "tokyonight"
}

사용자 정의 테마

opencode는 사용자가 쉽게 테마를 만들 수 있도록 유연한 JSON 기반 테마 시스템을 지원합니다.


Hierarchy의

테마는 다음과 같은 순서에서 여러 디렉토리에서로드됩니다. 나중에 감독은 이전 것을 무시합니다.

1.Built-in themes - 이것은 바이너리에 내장되어 있습니다. 2. **사용자 설정 디렉토리 ** - ~/.config/opencode/themes/*.json 또는 $XDG_CONFIG_HOME/opencode/themes/*.json에서 정의 3. ** 루트 디렉토리 ** - <project-root>/.opencode/themes/*.json에서 정의 4. **현재 작업 디렉토리 ** - ./.opencode/themes/*.json에서 정의

여러 디렉토리가 같은 이름을 가진 테마를 포함한다면, 더 높은 우선 순위를 가진 디렉토리의 테마가 사용됩니다.


테마 만들기

사용자 정의 테마를 만들려면 테마 디렉토리 중 하나에서 JSON 파일을 만듭니다.

사용자 넓은 테마:

Terminal window
mkdir -p ~/.config/opencode/themes
vim ~/.config/opencode/themes/my-theme.json

프로젝트 별 테마.

Terminal window
mkdir -p .opencode/themes
vim .opencode/themes/my-theme.json

JSON 형식

테마는 유연한 JSON 형식을 사용하여 지원:

-Hex 색상: "#ffffff"

  • ** ANSI 색상**: 3 (0-255)
  • ** 색상 참조 ** : "primary" 또는 사용자 정의 정의
  • ** 어두운 / 조명 변형 ** : {"dark": "#000", "light": "#fff"}
  • ** 색상 없음 ** : "none" - terminal의 기본 색상 또는 투명 사용

색상 정의

defs 단면도는 선택적이고 당신은 주제에서 참조될 수 있는 재사용할 수 있는 색깔을 정의할 수 있습니다.


terminal 기본값

특별한 가치 "none"는 terminal의 기본 색깔을 상속하기 위하여 어떤 색깔든지를 위해 사용될 수 있습니다. 이것은 특히 당신의 terminal의 색깔 계획과 이음새가 없는 혼합 테마 창조를 위해 유용합니다:

  • "text": "none" - terminal의 기본 전경 색상 사용
  • "background": "none" - terminal의 기본 배경 색상 사용

예제

사용자 정의 테마의 예입니다 :

my-theme.json
{
"$schema": "https://opencode.ai/theme.json",
"defs": {
"nord0": "#2E3440",
"nord1": "#3B4252",
"nord2": "#434C5E",
"nord3": "#4C566A",
"nord4": "#D8DEE9",
"nord5": "#E5E9F0",
"nord6": "#ECEFF4",
"nord7": "#8FBCBB",
"nord8": "#88C0D0",
"nord9": "#81A1C1",
"nord10": "#5E81AC",
"nord11": "#BF616A",
"nord12": "#D08770",
"nord13": "#EBCB8B",
"nord14": "#A3BE8C",
"nord15": "#B48EAD"
},
"theme": {
"primary": {
"dark": "nord8",
"light": "nord10"
},
"secondary": {
"dark": "nord9",
"light": "nord9"
},
"accent": {
"dark": "nord7",
"light": "nord7"
},
"error": {
"dark": "nord11",
"light": "nord11"
},
"warning": {
"dark": "nord12",
"light": "nord12"
},
"success": {
"dark": "nord14",
"light": "nord14"
},
"info": {
"dark": "nord8",
"light": "nord10"
},
"text": {
"dark": "nord4",
"light": "nord0"
},
"textMuted": {
"dark": "nord3",
"light": "nord1"
},
"background": {
"dark": "nord0",
"light": "nord6"
},
"backgroundPanel": {
"dark": "nord1",
"light": "nord5"
},
"backgroundElement": {
"dark": "nord1",
"light": "nord4"
},
"border": {
"dark": "nord2",
"light": "nord3"
},
"borderActive": {
"dark": "nord3",
"light": "nord2"
},
"borderSubtle": {
"dark": "nord2",
"light": "nord3"
},
"diffAdded": {
"dark": "nord14",
"light": "nord14"
},
"diffRemoved": {
"dark": "nord11",
"light": "nord11"
},
"diffContext": {
"dark": "nord3",
"light": "nord3"
},
"diffHunkHeader": {
"dark": "nord3",
"light": "nord3"
},
"diffHighlightAdded": {
"dark": "nord14",
"light": "nord14"
},
"diffHighlightRemoved": {
"dark": "nord11",
"light": "nord11"
},
"diffAddedBg": {
"dark": "#3B4252",
"light": "#E5E9F0"
},
"diffRemovedBg": {
"dark": "#3B4252",
"light": "#E5E9F0"
},
"diffContextBg": {
"dark": "nord1",
"light": "nord5"
},
"diffLineNumber": {
"dark": "nord2",
"light": "nord4"
},
"diffAddedLineNumberBg": {
"dark": "#3B4252",
"light": "#E5E9F0"
},
"diffRemovedLineNumberBg": {
"dark": "#3B4252",
"light": "#E5E9F0"
},
"markdownText": {
"dark": "nord4",
"light": "nord0"
},
"markdownHeading": {
"dark": "nord8",
"light": "nord10"
},
"markdownLink": {
"dark": "nord9",
"light": "nord9"
},
"markdownLinkText": {
"dark": "nord7",
"light": "nord7"
},
"markdownCode": {
"dark": "nord14",
"light": "nord14"
},
"markdownBlockQuote": {
"dark": "nord3",
"light": "nord3"
},
"markdownEmph": {
"dark": "nord12",
"light": "nord12"
},
"markdownStrong": {
"dark": "nord13",
"light": "nord13"
},
"markdownHorizontalRule": {
"dark": "nord3",
"light": "nord3"
},
"markdownListItem": {
"dark": "nord8",
"light": "nord10"
},
"markdownListEnumeration": {
"dark": "nord7",
"light": "nord7"
},
"markdownImage": {
"dark": "nord9",
"light": "nord9"
},
"markdownImageText": {
"dark": "nord7",
"light": "nord7"
},
"markdownCodeBlock": {
"dark": "nord4",
"light": "nord0"
},
"syntaxComment": {
"dark": "nord3",
"light": "nord3"
},
"syntaxKeyword": {
"dark": "nord9",
"light": "nord9"
},
"syntaxFunction": {
"dark": "nord8",
"light": "nord8"
},
"syntaxVariable": {
"dark": "nord7",
"light": "nord7"
},
"syntaxString": {
"dark": "nord14",
"light": "nord14"
},
"syntaxNumber": {
"dark": "nord15",
"light": "nord15"
},
"syntaxType": {
"dark": "nord7",
"light": "nord7"
},
"syntaxOperator": {
"dark": "nord9",
"light": "nord9"
},
"syntaxPunctuation": {
"dark": "nord4",
"light": "nord0"
}
}
}