Temas

Selecciona un tema integrado o define el tuyo.

Con OpenCode puedes seleccionar uno de los varios temas integrados, usar un tema que se adapte a tu tema de 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 admitir truecolor (color de 24 bits). La mayoria de los terminales modernos admiten esto por defecto, pero es posible que debas habilitarlo:

Verificar compatibilidad: Ejecuta echo $COLORTERM - deberia mostrar truecolor o 24bit
Habilitar truecolor: Establece la variable de entorno COLORTERM=truecolor en tu perfil de shell
Compatibilidad de terminal: Asegurate de que tu emulador de terminal admita color de 24 bits (la mayoria de los terminales modernos como iTerm2, Alacritty, Kitty, Windows Terminal y versiones recientes de GNOME Terminal lo hacen)

Sin compatibilidad con truecolor, los temas pueden aparecer con precision de color reducida o volver a la aproximacion de 256 colores mas cercana.

Temas integrados

OpenCode viene con varios temas integrados.

Nombre	Descripcion
`system`	Se adapta al color de fondo de tu terminal
`tokyonight`	Basado en el tema Tokyonight
`everforest`	Basado en el tema Everforest
`ayu`	Basado en el tema oscuro Ayu
`catppuccin`	Basado en el tema Catppuccin
`catppuccin-macchiato`	Basado en el tema Catppuccin
`gruvbox`	Basado en el tema Gruvbox
`kanagawa`	Basado en el tema Kanagawa
`nord`	Basado en el tema Nord
`matrix`	Tema verde estilo hacker sobre fondo negro
`one-dark`	Basado en el tema oscuro Atom One

Y mas, estamos constantemente agregando nuevos temas.

Tema del sistema

El tema system esta disenado para adaptarse automaticamente 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 optimo.
Usa colores ANSI: Aprovecha los colores ANSI estandar (0-15) para resaltado de sintaxis y elementos de la interfaz, que respetan la paleta de colores de tu terminal.
Preserva 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 de terminal personalizados
Prefieren un aspecto consistente en todas las aplicaciones de terminal

Usar un tema

Puedes seleccionar un tema abriendo la seleccion de tema con el comando /theme. O puedes especificarlo en tu configuracion.

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

Temas personalizados

OpenCode admite un sistema de temas flexible basado en JSON que permite a los usuarios crear y personalizar temas facilmente.

Jerarquia

Los temas se cargan desde varios directorios en el siguiente orden donde los directorios posteriores anulan los anteriores:

Temas integrados - Estos estan integrados en el binario
Directorio de configuracion de usuario - Definido en ~/.config/opencode/themes/*.json o $XDG_CONFIG_HOME/opencode/themes/*.json
Directorio raiz del proyecto - Definido en <raiz-del-proyecto>/.opencode/themes/*.json
Directorio de trabajo actual - Definido en ./.opencode/themes/*.json

Si varios directorios contienen un tema con el mismo nombre, se usara 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 en todo el sistema:

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

Y para temas especificos 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 hexadecimales: "#ffffff"
Colores ANSI: 3 (0-255)
Referencias de color: "primary" o definiciones personalizadas
Variantes oscuras/claras: {"dark": "#000", "light": "#fff"}
Sin color: "none" - Usa el color predeterminado del terminal o transparente

Definiciones de color

La seccion defs es opcional y te permite definir colores reutilizables que se pueden referenciar en el tema.

Valores predeterminados del terminal

El valor especial "none" se puede usar para cualquier color para heredar el color predeterminado del terminal. Esto es particularmente util para crear temas que se mezclan 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

Aqui hay un ejemplo de un tema personalizado:

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