Cómo Personalizar tu Tema de VS Code

No tienes por qué vivir con un tema exactamente como otra persona lo diseñó. VS Code tiene tres niveles de personalización de temas — desde un cambio rápido de un color hasta construir algo completamente tuyo. Así funciona cada uno.

Nivel 1 — Cambio rápido en settings.json

La forma más rápida. Abre los ajustes de VS Code (Ctrl+Shift+P → Preferences: Open User Settings (JSON)) y añade un bloque workbench.colorCustomizations:

{
  "workbench.colorCustomizations": {
    "editor.background": "#0d0d0d",
    "sideBar.background": "#111111",
    "statusBar.background": "#863bff",
    "activityBar.background": "#0d0d0d"
  }
}

Los cambios se aplican al instante. Esto sobreescribe el tema activo sin reemplazarlo — mantienes todo el resaltado de sintaxis y solo cambias lo que quieres.

💡 Estas sobreescrituras se apilan sobre cualquier tema instalado. Perfecto para arreglar una o dos cosas que no te gustan sin empezar desde cero.

Nivel 2 — Personalizar los colores de tokens de sintaxis

Para cambiar el aspecto del código dentro del editor, usa editor.tokenColorCustomizations:

{
  "editor.tokenColorCustomizations": {
    "comments": "#6a9955",
    "keywords": "#863bff",
    "strings": "#ce9178",
    "functions": "#dcdcaa",
    "variables": "#9cdcfe"
  }
}

Para un control más fino, usa la clave textMateRules para apuntar a scopes específicos:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "foreground": "#6a9955",
          "fontStyle": "italic"
        }
      }
    ]
  }
}

Nivel 3 — Construye un tema completo con ThemeLab

Si acumulas muchas sobreescrituras, has escrito efectivamente un tema. En ese punto es más limpio diseñar uno correctamente y exportar un archivo JSON independiente.

ThemeLab hace esto visual — ves el shell completo de VS Code reaccionar a cada cambio de color en tiempo real, sin adivinar cómo quedarán los tokens, viendo exactamente el aspecto del editor mientras diseñas.

Abre ThemeLab en el navegador
Ajusta los colores del chrome de UI y los tokens de sintaxis
Exporta theme.json
Colócalo en ~/.vscode/extensions/mi-tema/ con un package.json
Selecciónalo desde Preferences: Color Theme

Abrir ThemeLab →

Tokens de referencia más útiles

editor.background — lienzo principal del editor
editor.selectionBackground — color de la selección resaltada
editor.lineHighlightBackground — línea actual en el gutter
editorCursor.foreground — color del cursor
sideBar.background — panel del explorador de archivos
tab.activeBackground — pestaña actualmente abierta
statusBar.background — barra de información inferior
terminal.background — terminal integrado

Por Joe Hunter — ver la guía completa para crear un tema de VS Code para más información sobre el sistema de tokens.