Vai al contenuto
Requisiti del terminale

Temi

Con OpenCode puoi scegliere tra diversi temi integrati, usare un tema che si adatta al tema del tuo terminale oppure definire un tema personalizzato.

Per impostazione predefinita, OpenCode usa il tema opencode.

Per visualizzare correttamente i temi con l’intera palette, il terminale deve supportare truecolor (colore a 24 bit). La maggior parte dei terminali moderni lo supporta di default, ma potrebbe essere necessario abilitarlo:

  • Verifica supporto: esegui echo $COLORTERM - dovrebbe stampare truecolor o 24bit
  • Abilita truecolor: imposta la variabile d’ambiente COLORTERM=truecolor nel profilo della shell
  • Compatibilità del terminale: assicurati che l’emulatore supporti il colore a 24 bit (la maggior parte dei terminali moderni come iTerm2, Alacritty, Kitty, Windows Terminal e le versioni recenti di GNOME Terminal)

Senza truecolor, i temi potrebbero apparire con colori meno accurati oppure fare fallback alla migliore approssimazione a 256 colori.

OpenCode include diversi temi integrati.

NomeDescrizione
systemSi adatta al colore di sfondo del terminale
tokyonightBasato sul tema Tokyonight
everforestBasato sul tema Everforest
ayuBasato sul tema scuro Ayu
catppuccinBasato sul tema Catppuccin
catppuccin-macchiatoBasato sul tema Catppuccin
gruvboxBasato sul tema Gruvbox
kanagawaBasato sul tema Kanagawa
nordBasato sul tema Nord
matrixTema verde su nero in stile hacker
one-darkBasato sul tema Dark Atom One

E altri ancora: aggiungiamo costantemente nuovi temi.

Il tema system è progettato per adattarsi automaticamente allo schema colori del tuo terminale. A differenza dei temi tradizionali con colori fissi, il tema system:

  • Genera una scala di grigi: crea una scala di grigi personalizzata in base al colore di sfondo del terminale, garantendo un contrasto ottimale.
  • Usa colori ANSI: sfrutta i colori ANSI standard (0-15) per evidenziazione della sintassi ed elementi UI, rispettando la palette del terminale.
  • Preserva i default del terminale: usa none per testo e sfondo per mantenere l’aspetto nativo del terminale.

Il tema di sistema è pensato per chi:

  • Vuole che OpenCode corrisponda all’aspetto del terminale
  • Usa schemi colori personalizzati del terminale
  • Preferisce un aspetto coerente tra tutte le applicazioni da terminale

Puoi selezionare un tema aprendo la selezione temi con il comando /theme. In alternativa, puoi specificarlo in tui.json.

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

OpenCode supporta un sistema di temi flessibile basato su JSON che permette di creare e personalizzare temi facilmente.

I temi vengono caricati da più directory nel seguente ordine, dove le directory successive sovrascrivono le precedenti:

  1. Temi integrati - incorporati nel binario
  2. Directory di configurazione utente - in ~/.config/opencode/themes/*.json o $XDG_CONFIG_HOME/opencode/themes/*.json
  3. Directory root del progetto - in <project-root>/.opencode/themes/*.json
  4. Directory di lavoro corrente - in ./.opencode/themes/*.json

Se più directory contengono un tema con lo stesso nome, verrà usato il tema della directory con priorità più alta.

Per creare un tema personalizzato, crea un file JSON in una delle directory dei temi.

Per temi a livello utente:

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

E per temi specifici del progetto.

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

I temi usano un formato JSON flessibile che supporta:

  • Colori hex: "#ffffff"
  • Colori ANSI: 3 (0-255)
  • Riferimenti colore: "primary" o definizioni personalizzate
  • Varianti scuro/chiaro: {"dark": "#000", "light": "#fff"}
  • Nessun colore: "none" - usa il colore predefinito del terminale o trasparente

La sezione defs è opzionale e ti permette di definire colori riutilizzabili che possono essere referenziati nel tema.

Il valore speciale "none" può essere usato per qualunque colore per ereditare il colore predefinito del terminale. È particolarmente utile per creare temi che si fondono con lo schema colori del terminale:

  • "text": "none" - usa il colore del testo predefinito del terminale
  • "background": "none" - usa il colore di sfondo predefinito del terminale

Ecco un esempio di tema personalizzato:

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