Visual Studio Code convierte la edición y escritura de código nuevo en una experiencia divertida y sin complicaciones. El tema oscuro predeterminado de VS Code fue diseñado para ser más agradable a la vista que un fondo blanco áspero normal que puede causar fatiga después de largas horas de trabajo. Pero, ¿qué pasa si realmente no le gustan los colores oscuros en su pantalla mientras trabaja?
El beneficio del diseño modular de VS Code es que tiene una tremenda libertad para cambiar el tema oscuro original con muchas opciones de personalización diferentes que abarcan la gama de colores de pantalla, fuentes e incluso el aspecto del terminal integrado de VS Code.
Este artículo le dirá todo lo que necesita saber sobre el cambio de temas en VS Code.
Cómo cambiar el tema en el código VS
Cambiar el tema general en VS Code es rápido y fácil. Esto es lo que debe hacer:
- Abra VS Code.
- Seleccione "Archivo" ("Código" en macOS), seleccione "Preferencias", luego elija "Tema de color".
- VS Code le mostrará una selección de temas prediseñados para elegir en un menú desplegable.
- Utilice las teclas del cursor para obtener una vista previa de cómo se ve cada tema directamente en la pantalla.
- Presione "Enter" mientras selecciona para elegir el tema que desea utilizar.
Cambiar el tema a uno preconfigurado diferente podría ser lo primero que haga cuando abra VS Code por primera vez. La codificación puede llevar mucho tiempo, por lo que es beneficioso utilizar un tema con el que se sienta cómodo y que no le haga daño a la vista mientras trabaja.
Cómo cambiar el tema de su terminal en VS Code
Si desea ceñirse a las diversas opciones preconfiguradas para el color y el tema del terminal, el proceso es el mismo que para cambiar el tema general. Todos los temas integrados incluyen opciones para cambiar la apariencia de su terminal, pero no puede separarlo de las otras partes del tema en el menú principal.
Antes de seguir los pasos antes mencionados para cambiar el tema, abra la consola del terminal (Ctrl + Shift + P) para obtener una vista previa de los cambios realizados en el terminal. Algunos temas no realizan ningún cambio en la terminal, mientras que otros pueden cambiarlo drásticamente. Además, usar un tema que te guste solo moderadamente tampoco es bueno, ya que podrías encontrarte usando el terminal más de lo que pensabas inicialmente.
Sin embargo, existen algunas soluciones que le permitirán cambiar el tema de la terminal, que trataremos en las secciones siguientes.
Cómo cambiar el tema del material en el código VS
La característica principal de VS Code es la sobreabundancia de interesantes extensiones para personalizar su experiencia de codificación y traer más funcionalidades al editor de texto. Una de esas extensiones es Material Theme, uno de los más populares de su tipo en VS Code Marketplace.
Material Theme tiene muchos beneficios sobre los diseños pre-personalizados, pero a algunos usuarios les puede resultar deficiente. El manual de usuario de esta extensión incluye algunos consejos sobre cómo realizar más cambios para satisfacer sus necesidades. A continuación, se explica cómo cambiar el tema general en Tema material:
- Abra el menú rápido (Ctrl + Shift + P).
- Escriba "tema" en el mensaje.
- Elija "Preferencias: Tema de color".
- Seleccione uno de los ajustes preestablecidos del tema material.
Establecer un color de acento hará que una parte del código se destaque, lo que puede ser útil si se trata de una línea particularmente importante o problemática de diagnosticar. Para establecer un color de acento, siga los siguientes pasos:
- Abra el menú rápido (Ctrl + Shift + P).
- Escriba "tema material" en el mensaje.
- Elija "Tema del material: establecer color de acento".
- Elija el color que le guste de la lista.
Con un tema de material modificado, puede obtener una personalización que esté por encima de la norma y le mostraremos cómo.
Cómo personalizar manualmente un tema en VS Code
VS Code permite mucha más personalización que simplemente cambiar entre unos pocos ajustes preestablecidos. Aquí hay dos formas de personalizar el tema según su gusto.
Método 1: descargar un tema personalizado
Cuando hablamos de personalización, no podemos dejar de mencionar el expansivo VS Code Marketplace. Existen varias extensiones que solo cambian la apariencia de VS Code sin interferir con su funcionalidad. A continuación, se explica cómo descargar un tema.
- Abra VS Code Marketplace. También puede utilizar el menú "Extensiones" integrado a la izquierda de la pantalla.
- Escriba "tema" en la barra de búsqueda para buscar solo aquellos elementos que cambian el tema. Una de nuestras principales recomendaciones es el tema material mencionado anteriormente, pero estamos seguros de que puede encontrar el que más se adapte a sus necesidades.
- Descargue la extensión (si usa un navegador) y luego instale el archivo .VSIX yendo a "Extensiones> ícono de puntos suspensivos> Instalar desde VSIX". Alternativamente, cuando encuentre el tema que le gusta en VS Code, haga clic en él, luego seleccione el botón "Instalar" en el menú de detalles (derecha).
- Una vez que el tema esté instalado y habilitado, selecciónelo con el comando "Preferencias: Tema de color".
Método 2: edición del tema
Todos los temas y configuraciones se almacenan en VS Code usando texto sin formato. Siga los pasos para acceder a estas configuraciones y realizar los cambios que desee:
- Cree un banco de trabajo o un archivo de configuración de usuario. El primero solo cambiará la apariencia del proyecto actual, pero el segundo permanecerá en los nuevos proyectos.
- Escriba el comando "Preferencias: Abrir configuración" en el menú principal.
- Seleccione la pestaña en la parte superior izquierda para elegir entre la configuración de usuario y del banco de trabajo.
- Presione "Editar en settings.json" para abrir el archivo que contiene la configuración que necesita cambiar.
- Busque la configuración denominada "workbench.colorCustomizations".
- Concéntrese en cambiar el tema que desea colocando
"[Theme_name]": {}
Theme_name es el nombre del tema que desea cambiar. Conserve las comillas.
- Se realizan más cambios en el tema en los nuevos corchetes. Escriba el nombre del parámetro que desea cambiar (entre comillas), escriba ":" y luego elija la configuración adecuada que necesita.
- Utilice esta guía para encontrar los parámetros que desea cambiar.
- Los colores se almacenan en código hexadecimal. Utilice una guía hexadecimal de colores para identificar el color que desea.
- Cuando haya terminado con los cambios, guarde el archivo.
Este método se puede utilizar para cambiar la mayor parte de la interfaz de usuario y la apariencia del código, incluido el color del tema base, los fondos, la apariencia del terminal, los colores de los botones y los estilos de fuente.
Si se pregunta cómo cambiar la fuente en el código VS, use el método 2 descrito anteriormente. Probablemente necesites una guía de fuentes.
Preguntas frecuentes adicionales
¿Dónde se almacenan los temas de VS Code?
Los temas que provienen de las extensiones se almacenan en la carpeta de extensiones de VS Code. Esta ubicación está en su directorio de instalación (por ejemplo, C :) y generalmente se puede encontrar aquí:
~ / .vscode / extensiones
Aquí, “~” es el directorio de instalación de VS Code.
Los temas base se almacenan en: Microsoft VS Code \ resources \ app \ extensions \ theme-defaults \ themes
Sin embargo, no es necesario que pierda tiempo buscando archivos para cambiar. Cambiar la configuración del usuario a través del archivo "settings.json" ofrecerá resultados mucho más rápidos.
¿Cómo cambio el color del comentario en el código VS?
Para cambiar los colores de los comentarios, abra el archivo "settings.json" (use el "Método 2" descrito anteriormente), seleccione el tema que desea cambiar, luego ingrese (con comillas):
"Comentarios": "#hexcode"
Aquí, "código hexadecimal" es el código del color deseado. Utilice un selector de color para elegir un color apropiado.
¿Cuál es el mejor tema en VS Code?
El mejor tema de VS Code es el que le resulta más agradable y útil para sus esfuerzos de programación. Los diferentes usuarios pueden tener distintas preferencias de color y tema. Afortunadamente, hay muchas opciones para elegir, ya sea en los temas preconfigurados, descargas de extensiones o en la capacidad de personalizar un tema exactamente a tu gusto.
Elija su tema
Con estas instrucciones, puede personalizar completamente un tema como desee. Con su gran cantidad de opciones, VS Code sigue siendo uno de los editores de texto más populares, y su capacidad para obtener nuevas funciones con extensiones lo hace muy similar a un IDE.
¿Qué temas usas en VS Code? ¿Ha realizado algún cambio en su tema preferido? Háganos saber en la sección de comentarios.
