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.

Hierarchie

Themes werden aus mehreren Verzeichnissen in folgender Reihenfolge geladen, wobei spaetere Verzeichnisse fruehere ueberschreiben:

Eingebaute Themes - Diese sind im Binary eingebettet
Benutzer-Config-Verzeichnis - Definiert in ~/.config/opencode/themes/*.json oder $XDG_CONFIG_HOME/opencode/themes/*.json
Projekt-Root-Verzeichnis - Definiert in <project-root>/.opencode/themes/*.json
Aktuelles Arbeitsverzeichnis - Definiert in ./.opencode/themes/*.json

Wenn mehrere Verzeichnisse ein Theme mit demselben Namen enthalten, wird das Theme aus dem Verzeichnis mit der hoeheren Prioritaet verwendet.

Theme erstellen

Um ein eigenes Theme zu erstellen, lege eine JSON-Datei in einem der Theme-Verzeichnisse an.

Fuer benutzerweite Themes:

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

Und fuer projektspezifische Themes:

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

JSON-Format

Themes nutzen ein flexibles JSON-Format mit Unterstuetzung fuer:

Hex-Farben: "#ffffff"
ANSI-Farben: 3 (0-255)
Farbreferenzen: "primary" oder eigene Definitionen
Dunkel/Hell-Varianten: {"dark": "#000", "light": "#fff"}
Keine Farbe: "none" - Nutzt die Standardfarbe des Terminals oder transparent

Farbdefinitionen

Der defs-Abschnitt ist optional und erlaubt es dir, wiederverwendbare Farben zu definieren, die im Theme referenziert werden koennen.

Terminal-Standardwerte

Der spezielle Wert "none" kann fuer jede Farbe verwendet werden, um die Standardfarbe des Terminals zu erben. Das ist besonders nuetzlich, um Themes zu erstellen, die nahtlos mit deinem Terminal-Farbschema verschmelzen:

"text": "none" - Nutzt die Standard-Vordergrundfarbe des Terminals
"background": "none" - Nutzt die Standard-Hintergrundfarbe des Terminals

Beispiel

Hier ist ein Beispiel fuer ein eigenes 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"
    }
  }
}