Cheat Sheet – Resalta la pestaña activa en VS Code

Actualizado: 23 de mayo de 2025
Ámbito recomendado: User Settings

1. ¿Para qué sirve?

Destaca de un vistazo la pestaña del archivo que estás editando cuando tienes muchas abiertas.

2. Configuración exprés (3 pasos)

Abre la paleta: Ctrl + Shift + P → Preferences: Open Settings (JSON).
Pega este bloque en tu settings.json (ajusta los colores a tu gusto):

"workbench.colorCustomizations": {
  // Si solo quieres que afecte al tema actual,
  // envuélvelo así: "[Default Dark+]": { ... }

  "tab.activeBackground": "#173d53",     // Fondo de la pestaña activa
  "tab.activeBorderTop": "#ffae00",      // Línea superior muy visible
  "tab.activeForeground": "#ffffff",     // Texto de la pestaña activa
  "tab.activeModifiedBorder": "#ffae00", // Borde si el archivo tiene cambios sin guardar
  "tab.inactiveBackground": "#1e1e1e",   // Fondo del resto de pestañas
  "tab.unfocusedActiveBorderTop": "#ffae00" // Cuando la ventana pierde el foco
}

3. ¿Dónde pongo la configuración?

Opción	Archivo	Cuándo usarla
User	`<config-dir>/User/settings.json`	Para que se aplique a todos tus proyectos.
Workspace	`.vscode/settings.json`	Solo para el proyecto abierto.
Default	Solo lectura	No se toca; sirve de referencia.

4. Tokens clave de color

Token	Efecto
`tab.activeBackground`	Fondo de la pestaña activa
`tab.activeBorderTop`	Borde superior (muy visible)
`tab.activeBorder`	Borde completo
`tab.activeForeground`	Color del texto de la pestaña activa
`tab.activeModifiedBorder`	Borde cuando el archivo tiene cambios sin guardar
`tab.inactiveBackground`	Fondo de pestañas inactivas

5. Extensiones útiles

ColorTabs – Colorea pestañas según expresiones regulares (tipo de archivo, ruta, etc.).
Peacock – Colorea el marco de la ventana para distinguir workspaces o instancias.

6. Buenas prácticas

Empieza con un borde (tab.activeBorderTop) si no quieres cambiar todo el fondo del tema.
Mantén contraste suficiente entre el color elegido y el fondo general del editor.
Documenta el cambio si trabajas en equipo para evitar confusiones.

7. Recursos

Documentación oficial: Theme Color Reference de VS Code.
Ejemplos de temas: explora el repositorio vscode-themes para inspirarte.

¡Listo! Con estos pasos tu pestaña activa destacará de forma clara y consistente.