테마

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

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

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

터미널 요구 사항

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

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

truecolor 지원이 없으면 테마가 감소된 색상 정확도로 표시되거나 가장 가까운 256색 근사치로 대체될 수 있습니다.

내장 테마

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

이름	설명
`system`	terminal 배경 색상에 맞춰 자동으로 조정됨
`tokyonight`	Tokyonight 테마 기반
`everforest`	Everforest 테마 기반
`ayu`	Ayu 다크 테마 기반
`catppuccin`	Catppuccin 테마 기반
`catppuccin-macchiato`	Catppuccin 테마 기반
`gruvbox`	Gruvbox 테마 기반
`kanagawa`	Kanagawa 테마 기반
`nord`	Nord 테마 기반
`matrix`	검은 배경에 녹색 텍스트의 해커 스타일 테마
`one-dark`	Atom One Dark 테마 기반

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

시스템 테마

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

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

시스템 테마는 다음과 같은 사용자에게 적합합니다:

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

테마 사용

/theme 명령어로 테마 선택기를 불러와 테마를 선택할 수 있습니다. 또는 tui.json에서 지정할 수 있습니다.

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

사용자 정의 테마

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

계층 구조

테마는 다음 순서대로 여러 디렉토리에서 로드되며, 나중 디렉토리가 이전 디렉토리를 덮어씁니다:

내장 테마 (Built-in themes) - 바이너리에 내장되어 있습니다.
사용자 설정 디렉토리 (User config directory) - ~/.config/opencode/themes/*.json 또는 $XDG_CONFIG_HOME/opencode/themes/*.json에 정의됩니다.
프로젝트 루트 디렉토리 (Project root directory) - <project-root>/.opencode/themes/*.json에 정의됩니다.
현재 작업 디렉토리 (Current working directory) - ./.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" - 터미널의 기본 배경색 사용

예제

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

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