Mis Temas Preferidos | VSCode
Tags: vscode, javascript, typescript, 2021
Published: 2021-06-24 17:59:51

Seguramente nosotr@s como developers que pasamos mucho tiempo delante de la computadora haciendo código y desarrollando nuestras aplicaciones queremos cuidar nuestros ojos.

Para eso es que generalmente se utilizan temas de modo oscuro los cuales hacen que pasar mucho tiempo frente a una pantalla y tener menos impacto negativo para nuestra vista.

Y como muchos devs también queremos que nuestro editor VSCode sea lo mas personalizable posible para nuestro gusto, es por eso que quise hacer esta lista con los temas que a mi opinión son muy atractivos a la vista.

## ⚡ Set Up

Antes de mostrarte los temas quiero mostrarte como puedes cambiar los temas y ver los que ya tengas instalados o por defecto en tu VSCode

Con la combinación de teclas **Ctrl + K  Ctrl + T** y te mostrara los Color Themes disponibles, puedes moverte usando las flechas y tener una preview de como se ve el tema y la sintaxis

Otra manera un poco mas larga en caso no te funcione este comando puedes ir a
**File > Preferences > Color Theme**

ó

**Code > Preferences > Color Theme** en MacOs

Cuando encuentres uno de tu agrado solo presiona Enter o da Click sobre el Tema

![Menu de Temas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrfbj4j81k0h5swvzwsq.png)

Tambien si decides colocarlo a un usuario puedes hacerlo en la configuración, utilizando **Ctrl + ,**

Y te mostrara un archivo JSON donde puedes colocar el nombre del Tema que quieras colocar con el siguiente código:

```JSON
// Especifica el tema utilizado en el entorno de trabajo
  "workbench.colorTheme": "Default Dark+"
```

## 📦 VSCode Marketplace

Bien ahora para descargar nuevos temas, debemos dirigirnos al icono de **Extensions** de nuestro editor donde podemos buscar *Plugins, Snippets, Themes, etc*

En este caso solo lo usaremos para los temas que te mostrare para que puedas probarlo en tu VSCode

![Visual Studio Code Marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2xa34zhzpfisbicrbok.png)

## ✨ Lista de Temas

### Dark+ (default Dark)
Para mi el temas por defecto de VSCode es muy bueno y con un buen soporte y color de sintaxis para muchos lenguajes como TypeScript

![Dark+](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22wbuie754vyshg082o6.png)

### [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

![One Dark Pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5w4hs35l6et7n2xhh1l.png)

### [Nord](https://marketplace.visualstudio.com/items?itemName=arcticicestudio.nord-visual-studio-code)

![Nord Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5lmrbba5705qo26vum9.png)

### [Palenight](https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme)

![Palenight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk7g3xd0v5yp0y9ni0ln.png)

### [Horizon Theme](https://marketplace.visualstudio.com/items?itemName=jolaleye.horizon-theme-vscode)

![Horizon Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa40yinqrp3q4ucjz37l.png)


### [Tokyo Night](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)

![Tokyo Night](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/730lp7364x5gix6asm4w.png)

### [Github Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)

![Github Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzs6ai0o6y01ut3lyxeg.png)

### [SynthWave'84](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode)

![SynthWave'84](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtki998mylssobqedrco.png)

### [Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)

![Monokai Pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys3wiawys1n39cn0mf6x.png)

### [Outrun](https://marketplace.visualstudio.com/items?itemName=samrapdev.outrun)

![Outrun](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8whi1r7zgvyfwt96yue.png)

### [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)

![Night Owl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z0mh4el5i3lhwvp7i9j.png)

### [Dobri Next](https://marketplace.visualstudio.com/items?itemName=sldobri.bunker)

![Dobri Next](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1czvfln6xtj3hq0e0x1x.png)

### [Ariake Dark](https://marketplace.visualstudio.com/items?itemName=wart.ariake-dark)

![Ariake Dark](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6koabqopfebdmnmfntu8.png)

Espero y te haya gustado la lista de los temas que en mi opinión están muy bien hechos :D
Si tienes alguno puedes dejarlo en los comentarios ⭐