テーマ
組み込みのテーマを選択するか、独自のテーマを定義します。
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 にはいくつかの組み込みテーマが付属しています。
| Name | Description |
|---|---|
system | Adapts to your terminal’s background color |
tokyonight | Based on the Tokyonight theme |
everforest | Based on the Everforest theme |
ayu | Based on the Ayu dark theme |
catppuccin | Based on the Catppuccin theme |
catppuccin-macchiato | Based on the Catppuccin theme |
gruvbox | Based on the Gruvbox theme |
kanagawa | Based on the Kanagawa theme |
nord | Based on the Nord theme |
matrix | Hacker-style green on black theme |
one-dark | Based 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.
{ "$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で定義
複数のディレクトリに同じ名前のテーマが含まれている場合は、優先度の高いディレクトリのテーマが使用されます。
テーマの作成
カスタム テーマを作成するには、テーマ ディレクトリの 1 つに JSON ファイルを作成します。
ユーザー全体のテーマの場合:
mkdir -p ~/.config/opencode/themesvim ~/.config/opencode/themes/my-theme.jsonそしてプロジェクト固有のテーマについても。
mkdir -p .opencode/themesvim .opencode/themes/my-theme.jsonJSON形式
テーマは、以下をサポートする柔軟な 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 のデフォルトの背景色を使用します
例
カスタム テーマの例を次に示します。
{ "$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" } }}