Temas

Instalar y configurar temas visuales

Visual Studio Code incluye varios temas predeterminados que cubren las necesidades básicas de personalización visual. Los temas principales son Dark+ (tema oscuro por defecto), Light+ (tema claro) y High Contrast (diseñado para mejorar la accesibilidad). Estos temas proporcionan una base sólida, pero la verdadera personalización comienza cuando exploramos las opciones disponibles en el Marketplace.

Cambiar entre temas disponibles

Para cambiar el tema activo, utiliza el atajo de teclado Ctrl+K Ctrl+T, que abre directamente el selector de temas. Alternativamente, puedes acceder a través de Settings > Color Theme desde el menú de configuración. El selector muestra una vista previa en tiempo real de cada tema mientras navegas por las opciones, permitiendo evaluar cómo se verá tu código antes de aplicar el cambio.

// El tema seleccionado se guarda automáticamente en settings.json
{
    "workbench.colorTheme": "Dark+ (default dark)"
}

Explorar temas en el Marketplace

El Marketplace de extensiones contiene miles de temas organizados en la categoría Themes. Para acceder, abre la vista de extensiones (Ctrl+Shift+X) y filtra por "Category: Themes" o busca directamente términos como "theme" o "color theme". Cada tema muestra capturas de pantalla, número de descargas y valoraciones de la comunidad.

Los temas más populares incluyen opciones como Material Theme, que replica el diseño de Material Design de Google, One Dark Pro, inspirado en el tema de Atom, y Dracula, conocido por su paleta de colores vibrante y alta legibilidad. Estos temas han sido adoptados por millones de desarrolladores y reciben actualizaciones regulares.

Diferencias entre tipos de temas

Es importante distinguir entre Color Themes y File Icon Themes. Los Color Themes modifican los colores del editor, la interfaz y el resaltado de sintaxis, mientras que los File Icon Themes solo cambian los iconos que aparecen junto a los archivos en el explorador. Al instalar extensiones de temas, verifica que estés seleccionando el tipo correcto según tus necesidades de personalización.

Vista previa antes de instalar

Antes de instalar un tema, utiliza la función de vista previa disponible en muchas extensiones. Esta característica te permite ver cómo se verá tu código actual con el nuevo tema sin necesidad de instalarlo permanentemente. Simplemente haz clic en el tema desde el selector y observa los cambios en tiempo real.

// Ejemplo de cómo se ve el código con diferentes temas
function calcularTotal(precio, impuesto) {
    const total = precio * (1 + impuesto);
    return total.toFixed(2);
}

Temas optimizados para desarrollo

Algunos temas están específicamente diseñados para mejorar la experiencia de programación. Estos temas priorizan el syntax highlighting efectivo, utilizando colores que facilitan la distinción entre diferentes elementos del código como variables, funciones, comentarios y palabras clave. Busca temas que mencionen características como "mejor contraste", "reducción de fatiga visual" o "optimizado para programación".

Configuración automática por horario

Visual Studio Code permite configurar el cambio automático de tema según la hora del día. Esta funcionalidad sincroniza el tema con la configuración del sistema operativo o permite establecer horarios personalizados. Para activarla, busca "Auto Dark Mode" en la configuración o utiliza la opción "window.autoDetectColorScheme".

// Configuración para cambio automático de tema
{
    "window.autoDetectColorScheme": true,
    "workbench.preferredDarkColorTheme": "One Dark Pro",
    "workbench.preferredLightColorTheme": "Light+ (default light)"
}

La instalación de temas sigue el mismo proceso que cualquier extensión: busca, instala y activa. Una vez instalado, el tema aparecerá en tu selector de temas y se mantendrá disponible incluso después de reiniciar VS Code. Se pueden tener múltiples temas instalados y cambiar entre ellos según el proyecto o la tarea.

Personalización avanzada de colores

Modificar colores del tema activo

Si un tema es casi perfecto pero tiene algún color que no convence, VS Code permite sobrescribir colores individuales sin necesidad de crear un tema nuevo. La propiedad workbench.colorCustomizations en settings.json acepta valores hexadecimales para cada elemento de la interfaz:

{
  "workbench.colorCustomizations": {
    "editor.background": "#1a1a2e",
    "sideBar.background": "#16213e",
    "activityBar.background": "#0f3460",
    "statusBar.background": "#533483",
    "editor.lineHighlightBackground": "#1a1a3e"
  }
}

Para modificar colores específicos de un tema concreto sin afectar a los demás, se usa la sintaxis con el nombre del tema entre corchetes:

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

Personalizar el resaltado de sintaxis

Los colores del syntax highlighting se controlan con la propiedad editor.tokenColorCustomizations. Cada token (palabra clave, string, función, variable) puede ajustarse individualmente:

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

Las personalizaciones de color se aplican inmediatamente y se pueden revertir eliminando las entradas correspondientes del archivo settings.json.

Contexto histórico: del Turbo Pascal azul al Dracula

Los temas visuales en editores de código tienen una larga historia. En los años ochenta, Turbo Pascal popularizó el icónico fondo azul con texto amarillo, que se convirtió en sinónimo de entorno de desarrollo profesional durante una década. Con la llegada de Windows y los editores gráficos, los fondos blancos se impusieron por influencia de los procesadores de texto. La revolución llegó en 2013, cuando Solarized propuso una paleta científicamente estudiada para reducir la fatiga visual, y poco después aparecieron Monokai, Dracula y One Dark, cada uno con su propia filosofía cromática. Visual Studio Code heredó esta tradición y la amplificó al permitir instalar temas de la comunidad con un solo clic, lo que ha dado lugar a un ecosistema con más de diez mil temas disponibles en el Marketplace.

Atajos de teclado adicionales

Más allá del atajo principal, existen combinaciones que facilitan la gestión de temas:

• Ctrl + K Ctrl + T: abre el selector de Color Theme.
• Ctrl + Shift + P y luego Preferences: File Icon Theme: abre el selector de iconos de archivo.
• Ctrl + Shift + P y Preferences: Product Icon Theme: cambia los iconos de la interfaz (botones, barra lateral).
• Ctrl + K Ctrl + S: abre el editor de atajos, útil para asignar un tema favorito a un shortcut personalizado.
• Ctrl + ,: abre Settings, donde puedes buscar workbench.colorTheme y cambiarlo directamente con autocompletado.

Ejemplo paso a paso: adoptar One Dark Pro con cambio automático

Imagina que quieres configurar Visual Studio Code para usar One Dark Pro de noche y GitHub Light durante el día, siguiendo la configuración del sistema:

1. Abre el panel de extensiones con Ctrl + Shift + X e instala One Dark Pro.
2. Busca también GitHub Theme y haz clic en Install; este paquete incluye variantes claras y oscuras.
3. Pulsa Ctrl + , para abrir Settings y busca window.autoDetectColorScheme.
4. Activa la casilla para que VS Code siga el modo de color del sistema operativo.
5. Busca workbench.preferredDarkColorTheme y selecciona One Dark Pro.
6. Busca workbench.preferredLightColorTheme y selecciona GitHub Light Default.
7. Cambia el modo de color del sistema (en Windows, Configuración > Personalización > Colores) para verificar que VS Code responde correctamente.
8. Guarda los cambios y disfruta de un entorno que se adapta automáticamente a la iluminación del entorno.

Tabla comparativa de temas populares

| Tema | Estilo | Autor | Descargas aprox. | Destacado por | |------|--------|-------|--------------------|----------------| | Dark+ | Oscuro estándar | Microsoft | Incluido | Compatibilidad total | | One Dark Pro | Oscuro suave | binaryify | 9 M | Inspirado en Atom | | Dracula Official | Oscuro vibrante | Dracula Theme | 6 M | Paleta púrpura icónica | | Material Theme | Oscuro material | Equinusocio | 8 M | Diseño Material de Google | | Night Owl | Oscuro nocturno | Sarah Drasner | 3 M | Accesibilidad y daltonismo | | GitHub Theme | Claro / oscuro | GitHub | 5 M | Idéntico a github.com | | Solarized Light | Claro científico | Ryan Olson | 2 M | Reducción de fatiga visual |

Errores comunes al personalizar temas

Hay varios errores frecuentes al instalar o personalizar temas:

• Instalar demasiados temas a la vez: aunque no consumen muchos recursos, saturan el selector y dificultan encontrar tus favoritos.
• Modificar workbench.colorCustomizations sin usar el nombre del tema: los cambios se aplican a todos los temas, lo que provoca resultados inesperados al cambiarlos.
• Elegir temas sin contraste suficiente: algunos temas estéticamente atractivos tienen ratios de contraste inferiores al mínimo recomendado (WCAG AA), lo que dificulta la lectura durante sesiones largas.
• Ignorar el File Icon Theme: un buen conjunto de iconos como Material Icon Theme puede mejorar tanto la productividad como la estética general del editor.
• No sincronizar el tema con Settings Sync: al trabajar en varios equipos, acabas con configuraciones incoherentes entre máquinas.

Mejores prácticas en equipos

En equipos de desarrollo, los temas son una elección personal, pero existen prácticas que mejoran la colaboración:

• Documentar en el README.md del proyecto el tema recomendado para que las capturas de código en la documentación sean coherentes entre colaboradores.
• Usar Settings Sync con cuenta de GitHub para que cada persona conserve sus temas al cambiar de equipo.
• Evitar personalizar demasiado los colores en settings.json cuando se hacen capturas para documentación, ya que otros lectores no verán lo mismo.
• Al preparar sesiones de pair programming o streaming, elegir un tema de alto contraste y una fuente grande para que todos los espectadores puedan seguir el código con comodidad.
• En entornos con luz natural cambiante (oficinas con grandes ventanales), activar el cambio automático de tema mejora notablemente la comodidad visual a lo largo del día.