Themes

Waehle ein eingebautes Theme oder erstelle eins.

Mit OpenCode kannst du ein eingebautes Theme waehlen, ein an dein Terminal angepasstes Theme nutzen oder ein eigenes Theme definieren.

Standardmaessig verwendet OpenCode das opencode-Theme.

Terminal-Anforderungen

Damit Themes mit voller Farbpalette korrekt angezeigt werden, muss dein Terminal truecolor (24-Bit-Farben) unterstuetzen. Die meisten modernen Terminals koennen das bereits, eventuell musst du es aber aktivieren:

Support pruefen: Fuehre echo $COLORTERM aus - erwartet ist truecolor oder 24bit
Truecolor aktivieren: Setze in deinem Shell-Profil COLORTERM=truecolor
Terminal-Kompatibilitaet: Stelle sicher, dass dein Terminal-Emulator 24-Bit-Farben unterstuetzt

Ohne truecolor werden Farben weniger exakt dargestellt oder auf eine 256-Farben-Naeherung reduziert.

Eingebaute Themes

OpenCode liefert mehrere eingebaute Themes mit.

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

Und es kommen laufend weitere dazu.

System-Theme

Das system-Theme passt sich automatisch an das Farbschema deines Terminals an. Im Gegensatz zu Themes mit festen Farben gilt beim system-Theme:

Generiert Graustufen: Basierend auf deiner Terminal-Hintergrundfarbe fuer guten Kontrast
Nutzt ANSI-Farben: Verwendet Standardfarben (0-15), die dein Terminalschema respektieren
Behaelt Terminal-Defaults: Verwendet none fuer Text und Hintergruende

Das System-Theme ist ideal fuer Nutzer, die:

OpenCode optisch ans Terminal anpassen wollen
eigene Terminal-Farbschemata nutzen
ein konsistentes Erscheinungsbild in Terminal-Apps bevorzugen

Theme verwenden

Du kannst ein Theme ueber /theme auswaehlen oder direkt in der Konfiguration setzen.

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

Eigene Themes

OpenCode unterstuetzt ein flexibles JSON-basiertes Theme-System. Damit lassen sich Themes einfach erstellen und anpassen.

Hierarchy

Themes are loaded from multiple directories in the following order where later directories override earlier ones:

Built-in themes - These are embedded in the binary
User config directory - Defined in ~/.config/opencode/themes/*.json or $XDG_CONFIG_HOME/opencode/themes/*.json
Project root directory - Defined in the <project-root>/.opencode/themes/*.json
Current working directory - Defined in ./.opencode/themes/*.json

If multiple directories contain a theme with the same name, the theme from the directory with higher priority will be used.

Creating a theme

To create a custom theme, create a JSON file in one of the theme directories.

For user-wide themes:

mkdir -p ~/.config/opencode/themes
vim ~/.config/opencode/themes/my-theme.json

And for project-specific themes.

mkdir -p .opencode/themes
vim .opencode/themes/my-theme.json

JSON format

Themes use a flexible JSON format with support for:

Hex colors: "#ffffff"
ANSI colors: 3 (0-255)
Color references: "primary" or custom definitions
Dark/light variants: {"dark": "#000", "light": "#fff"}
No color: "none" - Uses the terminal’s default color or transparent

Color definitions

The defs section is optional and it allows you to define reusable colors that can be referenced in the theme.

Terminal defaults

The special value "none" can be used for any color to inherit the terminal’s default color. This is particularly useful for creating themes that blend seamlessly with your terminal’s color scheme:

"text": "none" - Uses terminal’s default foreground color
"background": "none" - Uses terminal’s default background color

Example

Here’s an example of a custom theme:

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