Cómo Instalar y Personalizar Temas de VS Code

La apariencia de Visual Studio Code impacta directamente tu experiencia de programación. Un tema bien elegido reduce la fatiga visual durante sesiones largas, te ayuda a detectar errores de sintaxis más rápido y hace que tu espacio de trabajo se sienta únicamente tuyo. Aunque VS Code viene con opciones predeterminadas sólidas, comprender cómo instalar y personalizar temas transforma un editor genérico en un entorno de desarrollo personalizado.

Instalación de Temas desde el Marketplace de VS Code

El camino más rápido hacia una nueva apariencia comienza con el panel de Extensiones. Haz clic en el ícono de Extensiones en la barra lateral (o presiona Ctrl+Shift+X / Cmd+Shift+X) y busca “theme” para explorar las opciones disponibles. El VS Code Marketplace aloja miles de temas, desde diseños minimalistas hasta opciones vibrantes de alto contraste.

Cuando encuentres un tema que te llame la atención, haz clic en Install. VS Code lo agrega inmediatamente a tus temas disponibles. Cambia entre temas instalados usando la Paleta de Comandos (Ctrl+Shift+P / Cmd+Shift+P) y escribiendo “Preferences: Color Theme”. Esto muestra todos tus temas en una lista de vista previa—navega entre ellos con las flechas para ver cambios instantáneos en tu editor.

Los puntos de partida populares incluyen el tema oficial de GitHub para un resaltado de sintaxis familiar, o One Dark Pro para quienes vienen de Atom. Estos temas establecidos ofrecen esquemas de color pulidos que funcionan bien en diferentes tipos de archivos.

Comprendiendo la Arquitectura de Temas de VS Code

Los temas de VS Code controlan dos áreas distintas: colores del workbench (elementos de la interfaz como barras laterales, pestañas y barras de estado) y colores de sintaxis (resaltado de código). Esta separación significa que puedes mezclar elementos—manteniendo los colores de sintaxis de un tema mientras ajustas la interfaz según tus preferencias.

Cada tema es esencialmente una colección de definiciones de color almacenadas en JSON. Cuando seleccionas un tema, VS Code aplica estas reglas de color a diferentes elementos de la interfaz y tokens de código. Este enfoque modular hace que la personalización de VS Code sea notablemente flexible sin requerir que construyas temas desde cero.

Personalización de Temas a Través de Configuraciones

El verdadero poder de ajustar temas reside en las configuraciones de VS Code. En lugar de modificar archivos de tema directamente, sobrescribes colores específicos en tu settings.json. Este enfoque preserva tus personalizaciones a través de actualizaciones y hace que los cambios sean portables entre máquinas.

Personalizaciones de Color del Workbench

Para ajustar elementos de la interfaz, agrega un bloque workbench.colorCustomizations a tus configuraciones:

{
  "workbench.colorCustomizations": {
    "editor.background": "#1a1a1a",
    "sideBar.background": "#252525",
    "activityBar.background": "#2a2a2a"
  }
}

Estos cambios se aplican globalmente en todos los temas. Para dirigirte a un tema específico, envuelve tus personalizaciones entre corchetes con el nombre del tema:

{
  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "editor.background": "#1a1a1a"
    }
  }
}

Personalizaciones de Color de Tokens

Los ajustes de resaltado de sintaxis funcionan de manera similar a través de editor.tokenColorCustomizations. Puedes modificar categorías amplias como comentarios y cadenas de texto:

{
  "editor.tokenColorCustomizations": {
    "comments": "#608B4E",
    "strings": "#CE9178",
    "functions": "#DCDCAA"
  }
}

Para un control granular, usa ámbitos de TextMate bajo textMateRules. Esto te permite dirigirte a construcciones específicas del lenguaje:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "keyword.control",
        "settings": {
          "foreground": "#C586C0",
          "fontStyle": "italic"
        }
      }
    ]
  }
}

Estrategias Prácticas para Ajustar Temas

Comienza con un tema que esté correcto en un 80%, luego refina el 20% restante. Los ajustes comunes incluyen oscurecer fondos para mejor contraste, aclarar comentarios para mejorar la legibilidad, o agregar estilo en cursiva a palabras clave para jerarquía visual.

El comando “Developer: Inspect Editor Tokens and Scopes” de la Paleta de Comandos revela los nombres exactos de ámbito para cualquier elemento de código. Coloca el cursor sobre cualquier pieza de sintaxis, ejecuta este comando, y VS Code te muestra el ámbito de TextMate que necesitas dirigir en tus configuraciones.

Considera personalizaciones específicas del workspace para diferentes proyectos. Un tema de alto contraste podría funcionar bien para trabajo de frontend con mucho HTML anidado, mientras que un tema sutil se adapta a sesiones largas de Python. Las configuraciones de workspace de VS Code te permiten mantener estas preferencias por proyecto.

Comportamiento del Modo Claro y Oscuro

VS Code respeta la preferencia de tema de tu sistema por defecto. La configuración window.autoDetectColorScheme habilita el cambio automático entre temas claros y oscuros basado en la configuración de tu sistema operativo. Define tus temas preferidos para cada modo:

{
  "window.autoDetectColorScheme": true,
  "workbench.preferredDarkColorTheme": "One Dark Pro",
  "workbench.preferredLightColorTheme": "GitHub Light"
}

Esta configuración elimina el cambio manual de tema cuando te mueves entre diferentes condiciones de iluminación o momentos del día.

Conclusión

Los temas de VS Code ofrecen más que cambios cosméticos—son herramientas para crear un entorno de programación cómodo y productivo. Comienza con temas del marketplace para inspiración, luego usa las opciones de personalización integradas de VS Code para ajustar colores que no funcionan del todo para ti. La combinación de temas base de calidad y controles de personalización granular significa que nunca estás atascado con valores predeterminados que te ralentizan o cansan tus ojos. Tu configuración ideal está a solo unas configuraciones de distancia.

Preguntas Frecuentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.