Temas

Selecciona un tema integrado o define el tuyo propio.

Con OpenCode puedes seleccionar entre varios temas integrados, usar un tema que se adapte al tema de tu terminal, o definir tu propio tema personalizado.

Por defecto, OpenCode usa nuestro propio tema opencode.

Requisitos del terminal

Para que los temas se muestren correctamente con su paleta de colores completa, tu terminal debe soportar truecolor (color de 24 bits). La mayoría de los terminales modernos lo soportan por defecto, pero puede que necesites habilitarlo:

Verificar soporte: Ejecuta echo $COLORTERM - debería mostrar truecolor o 24bit
Habilitar truecolor: Establece la variable de entorno COLORTERM=truecolor en tu perfil de shell
Compatibilidad del terminal: Asegúrate de que tu emulador de terminal soporte color de 24 bits (la mayoría de los terminales modernos como iTerm2, Alacritty, Kitty, Windows Terminal y versiones recientes de GNOME Terminal lo hacen)

Sin soporte de truecolor, los temas pueden aparecer con precisión de color reducida o recurrir a la aproximación de 256 colores más cercana.

Temas integrados

OpenCode viene con varios temas integrados.

Nombre	Descripción
`system`	Se adapta al color de fondo de tu terminal
`tokyonight`	Basado en el tema Tokyonight (opens in a new tab)
`everforest`	Basado en el tema Everforest (opens in a new tab)
`ayu`	Basado en el tema oscuro Ayu (opens in a new tab)
`catppuccin`	Basado en el tema Catppuccin (opens in a new tab)
`catppuccin-macchiato`	Basado en el tema Catppuccin (opens in a new tab)
`gruvbox`	Basado en el tema Gruvbox (opens in a new tab)
`kanagawa`	Basado en el tema Kanagawa (opens in a new tab)
`nord`	Basado en el tema Nord (opens in a new tab)
`matrix`	Tema estilo hacker verde sobre negro
`one-dark`	Basado en el tema oscuro Atom One (opens in a new tab)

Y más, estamos añadiendo constantemente nuevos temas.

Tema del sistema

El tema system está diseñado para adaptarse automáticamente al esquema de colores de tu terminal. A diferencia de los temas tradicionales que usan colores fijos, el tema system:

Genera escala de grises: Crea una escala de grises personalizada basada en el color de fondo de tu terminal, asegurando un contraste óptimo.
Usa colores ANSI: Aprovecha los colores ANSI estándar (0-15) para resaltado de sintaxis y elementos de UI, que respetan la paleta de colores de tu terminal.
Preserva los valores predeterminados del terminal: Usa none para colores de texto y fondo para mantener la apariencia nativa de tu terminal.

El tema del sistema es para usuarios que:

Quieren que OpenCode coincida con la apariencia de su terminal
Usan esquemas de colores personalizados del terminal
Prefieren una apariencia consistente en todas las aplicaciones del terminal

Usar un tema

Puedes seleccionar un tema abriendo el selector de temas con el comando /theme. O puedes especificarlo en tu configuración.

opencode.json

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

Temas personalizados

OpenCode soporta un sistema de temas flexible basado en JSON que permite a los usuarios crear y personalizar temas fácilmente.

Jerarquía

Los temas se cargan desde múltiples directorios en el siguiente orden, donde los directorios posteriores sobrescriben a los anteriores:

Temas integrados - Estos están incrustados en el binario
Directorio de configuración del usuario - Definido en ~/.config/opencode/themes/*.json o $XDG_CONFIG_HOME/opencode/themes/*.json
Directorio raíz del proyecto - Definido en <project-root>/.opencode/themes/*.json
Directorio de trabajo actual - Definido en ./.opencode/themes/*.json

Si múltiples directorios contienen un tema con el mismo nombre, se usará el tema del directorio con mayor prioridad.

Crear un tema

Para crear un tema personalizado, crea un archivo JSON en uno de los directorios de temas.

Para temas a nivel de usuario:

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

Y para temas específicos del proyecto.

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

Formato JSON

Los temas usan un formato JSON flexible con soporte para:

Colores hex: "#ffffff"
Colores ANSI: 3 (0-255)
Referencias de color: "primary" o definiciones personalizadas
Variantes oscuro/claro: {"dark": "#000", "light": "#fff"}
Sin color: "none" - Usa el color predeterminado del terminal o transparente

Definiciones de color

La sección defs es opcional y te permite definir colores reutilizables que pueden ser referenciados en el tema.

Valores predeterminados del terminal

El valor especial "none" puede usarse para cualquier color para heredar el color predeterminado del terminal. Esto es particularmente útil para crear temas que se mezclen perfectamente con el esquema de colores de tu terminal:

"text": "none" - Usa el color de primer plano predeterminado del terminal
"background": "none" - Usa el color de fondo predeterminado del terminal

Ejemplo

Aquí hay un ejemplo de un tema personalizado:

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

Modelos Atajos de Teclado