¿Cansado de Dracula y Gruvbox? Así Puedes Crear Tu Propio Tema de VS Code

Todo desarrollador tiene un setup. Un fondo de pantalla con el que lleva meses, una paleta de terminal que ha ajustado a su gusto, una estética de escritorio que es inconfundiblemente suya. Y luego está VS Code — corriendo Dracula o One Dark Pro como todo el mundo en internet.

No hay nada malo con los temas populares. Pero llega un momento en que miras tu pantalla y piensas: esto no se siente mío. Ese sentimiento merece atención. Un tema que has diseñado tú mismo es uno que disfrutarás mirando todo el día.

Por qué los desarrolladores no construyen sus propios temas

La barrera es la fricción técnica. Construir un tema de VS Code de la manera convencional significa escribir JSON crudo, aprender cientos de nombres de tokens y recargar el editor constantemente solo para ver un cambio de color. La mayoría de desarrolladores decide que no vale la pena y vuelve al marketplace.

Eso es exactamente la brecha que ThemeLab fue construido para cerrar.

Empieza desde tu paleta, no desde cero

El mejor punto de partida para un tema personal es una paleta de colores que ya te guste. Tal vez sacada de tu fondo de pantalla, de un sistema de diseño con el que trabajas, o de un color de marca al que vuelves siempre. Elige 4-6 colores — un fondo, un primer plano, un color de acento y 2-3 resaltados de sintaxis — y tienes suficiente para construir algo coherente.

Diseñalo visualmente en ThemeLab

Abre ThemeLab y verás una simulación en vivo del interfaz de VS Code — barra de título, barra de actividad, barra lateral, editor, barra de estado, todo. Cada control de color está etiquetado con el token de VS Code al que corresponde. Haz clic en Background, elige tu base oscura. Haz clic en Keyword, añade tu color de acento. Observa cómo todo el interfaz se actualiza al instante.

No estás adivinando qué clave JSON hace qué. Estás pintando una interfaz que puedes ver en tiempo real.

Consejos para un tema que se sienta premium

• Mantén el contraste alto entre fondo y primer plano — como mínimo WCAG AA.
• Desatura ligeramente los colores de sintaxis — los tonos muy saturados cansan rápido.
• Usa la misma familia de tono para los comentarios — una versión apagada del color de fondo funciona bien.
• Cadenas cálidas, palabras clave frías — el contraste mejora la legibilidad sin choque de colores.
• Revisa la barra lateral — los colores del árbol de archivos a menudo se descuidan pero definen la personalidad del tema.

Exporta e instala en 60 segundos

Cuando tu tema tenga el aspecto correcto, haz clic en Export en ThemeLab. Obtendrás un archivo theme.json válido — el mismo formato usado por las extensiones publicadas de VS Code. Para instalarlo:

• Crea una carpeta: ~/.vscode/extensions/mi-tema-0.0.1/
• Añade un package.json mínimo apuntando a tu archivo de tema
• Coloca tu theme.json en una subcarpeta themes/
• Recarga VS Code y selecciona tu tema desde Preferences: Color Theme

Eso es todo. Tu nombre en el selector de temas. Tus colores en tu pantalla.

El efecto r/unixporn

Hay una razón por la que las publicaciones de estética de workspace dominan las comunidades de desarrolladores. Tu entorno refleja cómo trabajas. Un tema que construiste tú mismo, ajustado a tu paleta, combinado con tu fondo de pantalla — eso no es vanidad. Es apropiarte de tus herramientas.

Y cuando compartas una captura de tu setup, se verá diferente al de cualquier otra persona. Porque lo es.