| --- |
| title: Themes |
| description: 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. |
|
|
| --- |
| |
| |
|
|
| 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. |
|
|
| --- |
| |
| |
|
|
| OpenCode liefert mehrere eingebaute Themes mit. |
|
|
| | Name | Description | |
| | ---------------------- | ---------------------------------------------------------------------------- | |
| | `system` | Adapts to your terminal’s background color | |
| | `tokyonight` | Based on the [Tokyonight](https://github.com/folke/tokyonight.nvim) theme | |
| | `everforest` | Based on the [Everforest](https://github.com/sainnhe/everforest) theme | |
| | `ayu` | Based on the [Ayu](https://github.com/ayu-theme) dark theme | |
| | `catppuccin` | Based on the [Catppuccin](https://github.com/catppuccin) theme | |
| | `catppuccin-macchiato` | Based on the [Catppuccin](https://github.com/catppuccin) theme | |
| | `gruvbox` | Based on the [Gruvbox](https://github.com/morhetz/gruvbox) theme | |
| | `kanagawa` | Based on the [Kanagawa](https://github.com/rebelot/kanagawa.nvim) theme | |
| | `nord` | Based on the [Nord](https://github.com/nordtheme/nord) theme | |
| | `matrix` | Hacker-style green on black theme | |
| | `one-dark` | Based on the [Atom One](https://github.com/Th3Whit3Wolf/one-nvim) Dark theme | |
|
|
| Und es kommen laufend weitere dazu. |
|
|
| --- |
| |
| |
|
|
| 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 |
|
|
| --- |
| |
| |
|
|
| Du kannst ein Theme ueber `/theme` auswaehlen oder direkt in der [Konfiguration](/docs/config) setzen. |
|
|
| ```json title="opencode.json" {3} |
| { |
| "$schema": "https://opencode.ai/config.json", |
| "theme": "tokyonight" |
| } |
| ``` |
|
|
| --- |
| |
| |
|
|
| OpenCode unterstuetzt ein flexibles JSON-basiertes Theme-System. |
| Damit lassen sich Themes einfach erstellen und anpassen. |
|
|
| --- |
| |
| |
|
|
| Themes werden aus mehreren Verzeichnissen in folgender Reihenfolge geladen, wobei spaetere Verzeichnisse fruehere ueberschreiben: |
|
|
| 1. **Eingebaute Themes** - Diese sind im Binary eingebettet |
| 2. **Benutzer-Config-Verzeichnis** - Definiert in `~/.config/opencode/themes/*.json` oder `$XDG_CONFIG_HOME/opencode/themes/*.json` |
| 3. **Projekt-Root-Verzeichnis** - Definiert in `<project-root>/.opencode/themes/*.json` |
| 4. **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. |
|
|
| --- |
| |
| |
|
|
| Um ein eigenes Theme zu erstellen, lege eine JSON-Datei in einem der Theme-Verzeichnisse an. |
|
|
| Fuer benutzerweite Themes: |
|
|
| ```bash no-frame |
| mkdir -p ~/.config/opencode/themes |
| vim ~/.config/opencode/themes/my-theme.json |
| ``` |
|
|
| Und fuer projektspezifische Themes: |
|
|
| ```bash no-frame |
| mkdir -p .opencode/themes |
| vim .opencode/themes/my-theme.json |
| ``` |
|
|
| --- |
| |
| |
|
|
| 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 |
|
|
| --- |
| |
| |
|
|
| Der `defs`-Abschnitt ist optional und erlaubt es dir, wiederverwendbare Farben zu definieren, die im Theme referenziert werden koennen. |
|
|
| --- |
| |
| |
|
|
| 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 |
|
|
| --- |
| |
| |
|
|
| Hier ist ein Beispiel fuer ein eigenes Theme: |
|
|
| ```json title="my-theme.json" |
| { |
| "$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" |
| } |
| } |
| } |
| ``` |
|
|
