コンテンツにスキップ

テーマ

組み込みのテーマを選択するか、独自のテーマを定義します。

OpenCode を使用すると、いくつかの組み込みテーマから 1 つを選択したり、terminal のテーマに適合するテーマを使用したり、独自のカスタム テーマを定義したりできます。

デフォルトでは、OpenCode は独自の opencode テーマを使用します。


terminal要件

テーマをフルカラー パレットで正しく表示するには、terminal が truecolor (24 ビット カラー) をサポートしている必要があります。最新のterminal のほとんどはデフォルトでこれをサポートしていますが、有効にする必要がある場合があります。

  • サポートを確認してください: echo $COLORTERM を実行します - truecolor または 24bit が出力されるはずです
  • トゥルーカラーを有効にする: shell プロファイルで環境変数 COLORTERM=truecolor を設定します。
  • terminal の互換性: terminal エミュレータが 24 ビット カラーをサポートしていることを確認してください (iTerm2、Alacritty、Kitty、Windows terminal、および GNOME terminal の最新バージョンなどのほとんどの最新のterminalはサポートしています)。

トゥルーカラーのサポートがないと、テーマの色の精度が低下したり、最も近い 256 色の近似値に戻ったりする可能性があります。


組み込みのテーマ

OpenCode にはいくつかの組み込みテーマが付属しています。

NameDescription
systemAdapts to your terminal’s background color
tokyonightBased on the Tokyonight theme
everforestBased on the Everforest theme
ayuBased on the Ayu dark theme
catppuccinBased on the Catppuccin theme
catppuccin-macchiatoBased on the Catppuccin theme
gruvboxBased on the Gruvbox theme
kanagawaBased on the Kanagawa theme
nordBased on the Nord theme
matrixHacker-style green on black theme
one-darkBased on the Atom One Dark theme

さらに、新しいテーマも常に追加されています。


システムテーマ

system テーマは、terminal のカラースキームに自動的に適応するように設計されています。固定色を使用する従来のテーマとは異なり、system テーマは次のようになります。

  • グレー スケールを生成: terminal の背景色に基づいてカスタム グレー スケールを作成し、最適なコントラストを確保します。
  • ANSI カラーを使用: 構文の強調表示と UI 要素に標準の ANSI カラー (0 ~ 15) を利用し、terminal のカラー パレットを尊重します。
  • terminal のデフォルトを維持: テキストと背景の色に none を使用して、terminal のネイティブの外観を維持します。

システム テーマは、次のようなユーザーを対象としています。

  • OpenCode をterminal の外観と一致させたい
  • カスタムterminal のカラースキームを使用する
  • すべてのterminalアプリケーションにわたって一貫した外観を好む

テーマの使用

テーマを選択するには、/theme コマンドでテーマ選択を表示します。または、config.

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

カスタムテーマ

OpenCode は、ユーザーがテーマを簡単に作成およびカスタマイズできる柔軟な JSON ベースのテーマ システムをサポートしています。


階層

テーマは複数のディレクトリから次の順序でロードされ、後のディレクトリが前のディレクトリをオーバーライドします。

  1. 組み込みテーマ - これらはバイナリに埋め込まれています
  2. ユーザー設定ディレクトリ - ~/.config/opencode/themes/*.json または $XDG_CONFIG_HOME/opencode/themes/*.json で定義されます
  3. プロジェクトのルート ディレクトリ - <project-root>/.opencode/themes/*.json で定義されます。
  4. 現在の作業ディレクトリ - ./.opencode/themes/*.json で定義

複数のディレクトリに同じ名前のテーマが含まれている場合は、優先度の高いディレクトリのテーマが使用されます。


テーマの作成

カスタム テーマを作成するには、テーマ ディレクトリの 1 つに 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 形式を使用します。

  • 16 進数の色: "#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"
}
}
}