한국어
문서
테마

테마

내장 테마를 선택하거나 직접 정의하세요.

OpenCode에서는 여러 내장 테마 중에서 선택하거나, 터미널 테마에 맞게 조정되는 테마를 사용하거나, 직접 커스텀 테마를 정의할 수 있습니다.

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

터미널 요구사항

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

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

Truecolor 지원 없이는 테마가 색상 정확도가 낮게 표시되거나 가장 가까운 256색 근사치로 대체될 수 있습니다.

내장 테마

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

이름설명
system터미널의 배경색에 맞게 조정
tokyonightTokyonight (opens in a new tab) 테마 기반
everforestEverforest (opens in a new tab) 테마 기반
ayuAyu (opens in a new tab) 다크 테마 기반
catppuccinCatppuccin (opens in a new tab) 테마 기반
catppuccin-macchiatoCatppuccin (opens in a new tab) 테마 기반
gruvboxGruvbox (opens in a new tab) 테마 기반
kanagawaKanagawa (opens in a new tab) 테마 기반
nordNord (opens in a new tab) 테마 기반
matrix해커 스타일 검정 바탕에 녹색 테마
one-darkAtom One (opens in a new tab) 다크 테마 기반

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

시스템 테마

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

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

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

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

테마 사용하기

/theme 명령으로 테마 선택기를 열어 테마를 선택할 수 있습니다. 또는 설정에서 지정할 수 있습니다.

opencode.json
{
  "$schema": "https://opencode.ai/config.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 형식을 사용합니다:

  • 16진수 색상: "#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"
    }
  }
}
모델키 바인딩