테마

내장 테마를 선택하거나 자신만의 테마를 정의하세요.

OpenCode에서는 여러 내장 테마 중 하나를 선택하거나, 터미널 테마에 맞게 적응하는 테마를 사용하거나, 자신만의 사용자 정의 테마를 정의할 수 있습니다.

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

터미널 요구사항

테마가 전체 색상 팔레트로 올바르게 표시되려면 터미널이 truecolor(24비트 색상)를 지원해야 합니다. 대부분의 최신 터미널은 기본적으로 이를 지원하지만, 활성화해야 할 수도 있습니다:

지원 확인 : echo $COLORTERM을 실행하세요 - truecolor 또는 24bit가 출력되어야 합니다
truecolor 활성화 : 셸 프로필에서 환경 변수 COLORTERM=truecolor를 설정하세요
터미널 호환성 : 터미널 에뮬레이터가 24비트 색상을 지원하는지 확인하세요(iTerm2, Alacritty, Kitty, Windows Terminal, 최신 버전의 GNOME Terminal 같은 대부분의 최신 터미널은 지원합니다)

truecolor 지원이 없으면 테마가 낮은 색상 정확도로 표시되거나 가장 가까운 256색 근사값으로 폴백될 수 있습니다.

내장 테마

OpenCode에는 여러 내장 테마가 포함되어 있습니다.

이름	설명
`system`	터미널의 배경색에 적응
`tokyonight`	Tokyonight (opens in a new tab) 테마 기반
`everforest`	Everforest (opens in a new tab) 테마 기반
`ayu`	Ayu (opens in a new tab) 다크 테마 기반
`catppuccin`	Catppuccin (opens in a new tab) 테마 기반
`catppuccin-macchiato`	Catppuccin (opens in a new tab) 테마 기반
`gruvbox`	Gruvbox (opens in a new tab) 테마 기반
`kanagawa`	Kanagawa (opens in a new tab) 테마 기반
`nord`	Nord (opens in a new tab) 테마 기반
`matrix`	검은 배경에 녹색의 해커 스타일 테마
`one-dark`	Atom One (opens in a new tab) Dark 테마 기반

그리고 더 많은 테마가 있으며, 지속적으로 새로운 테마를 추가하고 있습니다.

System 테마

system 테마는 터미널의 색상 스킴에 자동으로 적응하도록 설계되었습니다. 고정 색상을 사용하는 전통적인 테마와 달리, system 테마는:

그레이 스케일 생성 : 터미널의 배경색을 기반으로 사용자 정의 그레이 스케일을 만들어 최적의 대비를 보장합니다.
ANSI 색상 사용 : 구문 강조와 UI 요소에 표준 ANSI 색상(0-15)을 활용하여 터미널의 색상 팔레트를 존중합니다.
터미널 기본값 유지 : 텍스트와 배경색에 none을 사용하여 터미널의 기본 외관을 유지합니다.

System 테마는 다음과 같은 사용자를 위한 것입니다:

OpenCode가 터미널의 외관과 일치하기를 원하는 사용자
사용자 정의 터미널 색상 스킴을 사용하는 사용자
모든 터미널 애플리케이션에서 일관된 외관을 선호하는 사용자

테마 사용하기

/theme 명령으로 테마 선택기를 띄워 테마를 선택할 수 있습니다. 또는 tui.json에서 지정할 수도 있습니다.

tui.json

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

사용자 정의 테마

OpenCode는 사용자가 테마를 쉽게 만들고 사용자 정의할 수 있는 유연한 JSON 기반 테마 시스템을 지원합니다.

계층

테마는 다음 순서로 여러 디렉토리에서 로드되며, 나중 디렉토리가 이전 디렉토리를 재정의합니다:

내장 테마 - 바이너리에 임베드되어 있습니다
사용자 설정 디렉토리 - ~/.config/opencode/themes/*.json 또는 $XDG_CONFIG_HOME/opencode/themes/*.json에 정의됨
프로젝트 루트 디렉토리 - <project-root>/.opencode/themes/*.json에 정의됨
현재 작업 디렉토리 - ./.opencode/themes/*.json에 정의됨

여러 디렉토리에 같은 이름의 테마가 있으면 우선순위가 높은 디렉토리의 테마가 사용됩니다.

테마 만들기

사용자 정의 테마를 만들려면 테마 디렉토리 중 하나에 JSON 파일을 만드세요.

사용자 전체 테마의 경우:

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

그리고 프로젝트별 테마의 경우.

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

JSON 형식

테마는 다음을 지원하는 유연한 JSON 형식을 사용합니다:

Hex 색상 : "#ffffff"
ANSI 색상 : 3(0-255)
색상 참조 : "primary" 또는 사용자 정의 정의
다크/라이트 변형 : {"dark": "#000", "light": "#fff"}
색상 없음 : "none" - 터미널의 기본 색상 또는 투명을 사용

색상 정의

defs 섹션은 선택 사항이며, 테마에서 참조할 수 있는 재사용 가능한 색상을 정의할 수 있습니다.

터미널 기본값

특수 값 "none"은 터미널의 기본 색상을 상속하기 위해 모든 색상에 사용할 수 있습니다. 이는 특히 터미널의 색상 스킴과 매끄럽게 어우러지는 테마를 만드는 데 유용합니다:

"text": "none" - 터미널의 기본 전경색을 사용
"background": "none" - 터미널의 기본 배경색을 사용

예시

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

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

모델 키 바인딩