Cómo Crear un Tema para VS Code

Los temas de VS Code son más potentes de lo que la mayoría de desarrolladores imagina. Bajo el capó, un tema es un único archivo JSON que mapea tokens con nombres a colores hex. Controla los tokens correctos y puedes cambiar el aspecto de cada píxel del editor.

Esta guía explica cómo funciona el sistema de tokens y cómo usar ThemeLab para diseñar un tema sin tocar el JSON directamente.

1. Entiende los dos grupos de tokens

Los temas de VS Code se dividen en dos sistemas distintos:

Colores del Workbench

Controlan el chrome de la UI — sidebar, barra de actividad, pestañas, barra de estado, paneles. Claves como sideBar.background, activityBar.foreground.

Tokens TextMate / Semánticos

Controlan el resaltado de sintaxis dentro del editor — keywords, strings, comentarios, funciones. Usan selectores de scope como keyword.control.

2. Estructura mínima de un tema JSON

{
  "name": "Mi Tema",
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "sideBar.background": "#252526",
    "activityBar.background": "#333333",
    "statusBar.background": "#007acc"
  },
  "tokenColors": [
    {
      "scope": "comment",
      "settings": { "foreground": "#6a9955" }
    },
    {
      "scope": "keyword",
      "settings": { "foreground": "#569cd6", "fontStyle": "bold" }
    }
  ]
}

3. Grupos de tokens clave

  1. Superficie del editor: editor.background, editor.foreground, editor.lineHighlightBackground
  2. Sidebar + explorador: sideBar.background, sideBarTitle.foreground
  3. Pestañas: tab.activeBackground, tab.inactiveBackground, tab.activeForeground
  4. Barra de actividad: activityBar.background, activityBarBadge.background
  5. Barra de estado: statusBar.background, statusBar.foreground
  6. Sintaxis — comentarios: comment, comment.block
  7. Sintaxis — keywords: keyword.control, storage.type
  8. Sintaxis — strings: string.quoted

4. Diseña visualmente con ThemeLab

En lugar de editar JSON y recargar VS Code para ver los cambios, ThemeLab renderiza una simulación completa de VS Code en el navegador. Elige colores, ve el resultado al instante en todo el interfaz y exporta el JSON terminado con un clic.

Diseña tu tema en ThemeLab →

5. Instala tu tema en VS Code

  1. Abre VS Code → Ctrl+Shift+P → Preferences: Open Settings (JSON)
  2. Añade "workbench.colorCustomizations" con tus tokens — o bien
  3. Coloca tu JSON exportado en ~/.vscode/extensions/mi-tema/ con un package.json válido
  4. Recarga VS Code y selecciona tu tema desde Preferences: Color Theme

Construido por un desarrollador, para desarrolladores

ThemeLab fue construido por Joe Hunter como demostración de lo que React moderno es capaz de hacer — una simulación de VS Code completamente reactiva sin dependencias nativas. Si te interesa trabajar con Joe, su portfolio está en joehunter.es.