OpenCode 中文社区

Appearance

5.6a 主题系统 ​

💡 一句话总结：自定义 OpenCode 的外观，打造个性化的工作环境。

学完你能做什么 ​

  • 理解主题配置结构
  • 能创建自定义主题
  • 能调整颜色和字体
  • 能使用预设主题

🎒 开始前的准备 ​

确保你已经完成以下事项：

  • [ ] 完成必修课程
  • [ ] 了解基本配置

核心思路 ​

主题组成 ​

  • 颜色方案
  • 字体设置
  • 界面布局
  • 代码高亮

配置结构 ​

基础主题 ​

yaml
theme:
  name: "我的主题"
  mode: "dark"  # dark, light, auto
  
  colors:
    primary: "#3B82F6"
    secondary: "#10B981"
    accent: "#F59E0B"
    
    background:
      primary: "#1E293B"
      secondary: "#334155"
      tertiary: "#475569"
    
    text:
      primary: "#F1F5F9"
      secondary: "#94A3B8"
      muted: "#64748B"
    
    semantic:
      success: "#22C55E"
      warning: "#F59E0B"
      error: "#EF4444"
      info: "#3B82F6"
  
  effects:
    blur: true
    shadows: true
    animations: true

代码高亮 ​

yaml
syntax:
  theme: "github-dark"
  
  custom:
    comment:
      color: "#6B7280"
      font_style: "italic"
    
    keyword:
      color: "#C084FC"
      font_weight: "bold"
    
    string:
      color: "#34D399"
    
    function:
      color: "#60A5FA"
    
    variable:
      color: "#F472B6"
    
    number:
      color: "#FBBF24"

字体配置 ​

yaml
fonts:
  ui:
    family: "Inter, system-ui, sans-serif"
    size: 14
    weight: 400
  
  editor:
    family: "JetBrains Mono, Fira Code, monospace"
    size: 14
    line_height: 1.6
  
  terminal:
    family: "JetBrains Mono, monospace"
    size: 13

预设主题 ​

深色主题 ​

yaml
themes:
  dark-default:
    name: "深色默认"
    colors:
      background: "#1E1E1E"
      sidebar: "#252526"
      accent: "#007ACC"

浅色主题 ​

yaml
themes:
  light-default:
    name: "浅色默认"
    colors:
      background: "#FFFFFF"
      sidebar: "#F3F3F3"
      accent: "#0066B8"

跟我做 ​

实战：创建个人主题 ​

yaml
theme:
  name: "程序员紫"
  mode: "dark"
  
  colors:
    primary: "#8B5CF6"
    secondary: "#A78BFA"
    accent: "#F472B6"
    
    background:
      primary: "#0F172A"
      secondary: "#1E293B"
      tertiary: "#334155"
    
    text:
      primary: "#E2E8F0"
      secondary: "#94A3B8"
    
    semantic:
      success: "#34D399"
      warning: "#FBBF24"
      error: "#F87171"
      info: "#60A5FA"
  
  fonts:
    ui:
      family: "Inter"
      size: 14
    
    editor:
      family: "JetBrains Mono"
      size: 14
      ligatures: true
  
  syntax:
    theme: "custom"
    custom:
      comment:
        color: "#64748B"
      keyword: "#C084FC"
      string: "#34D399"
      function: "#60A5FA"

检查点 ✅ ​

全部通过才能继续

  • [ ] 理解主题配置
  • [ ] 能创建主题
  • [ ] 能配置颜色
  • [ ] 能设置字体

本课小结 ​

你学会了：

  1. 主题配置结构
  2. 颜色方案设置
  3. 代码高亮配置
  4. 字体配置
  5. 创建自定义主题

下一课预告 ​

下一课我们将学习快捷键配置。

📚 更多完整模板：Prompt 模板库

微信群