7 - Tema de color y tema de ícono de archivo

Tema de color

En el primer concepto vimos como cambiar rápidamente el "Tema de color" que trae VSCode con el objetivo de mostrar un tema claro y no el oscuro que trae por defecto.

Para hacer que aparezca el cuadro de selección de tema podemos hacerlo de tres formas:

  1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda:

    tema de color vscode
  2. También podemos acceder desde el menú de barra seleccionando (Archivo -> Preferencias -> Tema de Color):

    tema de color desde el menú de opciones vscode
  3. Mediante las teclas (Ctrl + K, Ctrl + T):

    tema de color con el atajo de teclado de vscode

Cuando se abre el panel con los "Temas de color" mediante las teclas de flechas o el mouse podemos ir seleccionando cada uno y ver como se actualiza en tiempo real la interfaz de VSCode:

selección de tema de color vscode

Si seleccionamos "Dark + (Default dark)":

selección de tema de color vscode

Disponemos una lista limitada de "temas de color" pero podemos descargar de la tienda de complementas de VSCode otros creados por la comunidad.

La búsqueda de temas también la podemos hacer desde el mismo VSCode seleccionando la opción "Instalar temas de color adicionales...":

seleción de tema de color vscode

Cuando elegimos esta opción aparece un diálogo a la izquierda donde podemos navegar por los distintos temas disponibles para su instalación:

seleción de tema de color vscode

Podemos ver que aparecen seleccionados todos los complementos de tipo "tema de color" debido a que en el cuadro de entrada de datos está filtrado por dicha categoría: "category:themes"

Podemos ordenar los "Temas de color" por diferentes criterios (Número de instalaciones, clasificación, por nombre etc.), para hacer esta actividad presionamos el botón de la parte superior derecha:

ordenar tema de color vscode

Veremos más adelante que hay otros complementos que podemos instalar en VSCode.

Probemos de descargar un tema de color muy popular llamado "Dracula":

instalar tema de color vscode

Presionemos el botón de "Instalar", luego de esto en unos pocos segundos lo tendremos instalado y solo nos falta ir al cuadro de selección de temas para su activación:

instalar tema de color vscode

Para administrar todos los complementos instalados en VSCode debemos seleccionar el ícono de "Extensiones" (Ctrl + Shift + X):

administración de temas de color instalados vscode

La existencia de tantos "Temas de color" puede parecer algo banal, pero pensemos que un programados pasa miles de horas con la vista puesta en el editor de texto.

Tema de ícono de archivo

En forma muy similar a los "Tema de color" se administran los "Temas de ícono de archivo".

Para hacer que aparezca el cuadro de selección de "Tema de ícono de archivo" lo podemos hacer de dos formas:

  1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda:

    tema de ícono de archivo vscode
  2. También podemos acceder desde el menú de barra seleccionando (Archivo -> Preferencias -> Tema de ícono de archivo):

    tema de ícono de archivo desde el menú de opciones vscode

Cuando se abre el panel con los "Temas de ícono de archivo" mediante las teclas de flechas o el mouse podemos ir seleccionando cada uno y ver como se actualiza en tiempo real la interfaz de VSCode:

tema de ícono de archivo selección vscode

Igual que los temas de color, la comunidad ha desarrollado "Temas de ícono de archivo" que podemos instalar dando los mismos pasos visto anteriormente:

tema de ícono de archivo instalación selección vscode

A medida que seleccionamos un "Tema de ícono de archivo" podemos ver en una pestaña quién es el creador, la cantidad de descargar, sus características etc.:

tema de ícono de archivo instalación selección vscode

Juego para memorizar los atajos de teclado en VSCode (hasta lo visto en este concepto)