5.3 主题配置

OpenCode支持丰富的主题系统，可以自定义TUI界面的配色方案，打造个性化的开发环境。

内置主题列表

OpenCode内置了多款流行的配色主题：

主题名称	风格	说明
system	系统	跟随系统配色（默认）
tokyonight	深色	Tokyo Night主题，柔和的蓝紫色调
tokyonight-storm	深色	Tokyo Night Storm变体
tokyonight-moon	深色	Tokyo Night Moon变体
everforest	深色	Everforest主题，自然绿色调
everforest-light	浅色	Everforest浅色版本
ayu	深色	Ayu Dark主题
ayu-light	浅色	Ayu Light主题
catppuccin	深色	Catppuccin Mocha，柔和色调
catppuccin-frappe	深色	Catppuccin Frappe变体
catppuccin-macchiato	深色	Catppuccin Macchiato变体
catppuccin-latte	浅色	Catppuccin Latte浅色版
gruvbox	深色	Gruvbox Dark主题，复古色调
gruvbox-light	浅色	Gruvbox Light主题
dracula	深色	Dracula经典主题
nord	深色	Nord主题，极光色调
solarized	深色	Solarized Dark
solarized-light	浅色	Solarized Light
onedark	深色	One Dark Pro主题
monokai	深色	Monokai经典主题

终端要求

为了正确显示主题颜色，终端需要支持True Color（24位色彩）。

检查终端支持

# 运行以下命令检查True Color支持
echo $COLORTERM
# 应输出: truecolor 或 24bit

推荐终端

• macOS: iTerm2, Kitty, Alacritty, Warp
• Windows: Windows Terminal, Alacritty
• Linux: Kitty, Alacritty, GNOME Terminal, Konsole

启用True Color

确保终端环境变量正确设置：

# 添加到 ~/.bashrc 或 ~/.zshrc
export COLORTERM=truecolor
export TERM=xterm-256color

配置方法

方式1：配置文件

在 opencode.json 中设置主题：

{
  "theme": "tokyonight"
}

方式2：TUI界面切换

在TUI界面中使用快捷键或命令：

# 使用斜杠命令
/theme tokyonight

# 或打开主题选择器
按 Ctrl+T

方式3：环境变量

export OPENCODE_THEME=catppuccin

主题预览

使用 /theme 命令不带参数可以预览所有可用主题：

/theme
# 将显示主题列表，支持实时预览

自定义主题创建

可以通过JSON配置创建自定义主题：

基本结构

{
  "theme": {
    "custom": {
      "name": "my-theme",
      "colors": {
        "background": "#1a1b26",
        "foreground": "#c0caf5",
        "cursor": "#c0caf5",
        "selection": "#33467c",
        "comment": "#565f89",
        "red": "#f7768e",
        "orange": "#ff9e64",
        "yellow": "#e0af68",
        "green": "#9ece6a",
        "cyan": "#7dcfff",
        "blue": "#7aa2f7",
        "purple": "#bb9af7",
        "pink": "#ff007c"
      },
      "ui": {
        "border": "#3b4261",
        "borderFocus": "#7aa2f7",
        "statusBar": "#1f2335",
        "statusBarText": "#737aa2",
        "sidebar": "#1f2335",
        "sidebarText": "#a9b1d6",
        "input": "#1a1b26",
        "inputText": "#c0caf5",
        "inputPlaceholder": "#565f89"
      },
      "syntax": {
        "keyword": "#bb9af7",
        "string": "#9ece6a",
        "number": "#ff9e64",
        "function": "#7aa2f7",
        "variable": "#c0caf5",
        "type": "#7dcfff",
        "class": "#ff9e64",
        "constant": "#ff9e64",
        "operator": "#89ddff"
      }
    }
  }
}

颜色配置说明

基础颜色 (colors)

属性	说明
background	主背景色
foreground	主前景色/文字颜色
cursor	光标颜色
selection	选中文本背景色
comment	注释颜色
red/orange/yellow/...	基础调色板颜色

UI颜色 (ui)

属性	说明
border	边框颜色
borderFocus	聚焦时的边框颜色
statusBar	状态栏背景
sidebar	侧边栏背景
input	输入框背景

语法高亮颜色 (syntax)

属性	说明
keyword	关键字颜色
string	字符串颜色
number	数字颜色
function	函数名颜色
variable	变量名颜色
type	类型名颜色

使用自定义主题

{
  "theme": "custom"
}

主题继承

可以基于现有主题进行修改：

{
  "theme": {
    "extends": "tokyonight",
    "overrides": {
      "colors": {
        "background": "#0d0d0d"
      },
      "ui": {
        "borderFocus": "#ff0000"
      }
    }
  }
}

主题与终端配色

为获得最佳效果，建议终端配色与OpenCode主题保持一致。许多主题提供对应的终端配色文件：

• Tokyo Night
• Catppuccin
• Gruvbox
• Nord

下一步

接下来了解OpenCode的权限系统，控制工具的执行权限。