Tema customizado para o Visual Studio Code
Tags: vscode, theme, yocode, tema
Published: 2021-01-09 18:48:31

Se você, assim como eu, já cansou dos temas disponíveis por ai, em poucos instantes você estará criando o seu próprio tema, de uma maneira super simples e prática.

## Como vamos fazer isso?
Com o **yo code extension generator**, tudo por linha de comando, super simples e fácil :thumbsup:

Para isso você vai precisar do [Node.js](https://nodejs.org/en/) instalado, juntamente com o [npm](https://www.npmjs.com).

Então bora!

&nbsp;

Primeiro de tudo vamos gerar um tema default, utilizando o [yo code](https://vscode.readthedocs.io/en/latest/extensions/yocode/)

Para fazer a instalação, basta rodar o comando:

```bash
npm install -g yo generator-code
```

Após a instalação vamos gerar o nosso tema base:

```bash
yo code
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3m4rb8ijf2bdqvy8e1tj.png)

O tipo de extensão será **New Color Theme**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/epu68n5lzqhuk1k2xgqk.png)

Vamos começar do zero, então: **No, start fresh**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xpmgjwtab9zyfi4j4f2q.png)

Coloque o nome da sua extensão e as informações seguintes como desejar

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mbkjjwn853mxxd311m0p.png)

Na sequência podemos escolher qual a base do nosso tema, eu sou do time **Dark** e você?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ti60vdxxt0w8yggf302.png)

Tema criado!

&nbsp;

Agora vamos fazer algumas alterações para deixar o tema do nosso jeito

```bash
cd meu-tema
code .
```

Dentro da pasta do seu tema você vai ver uma pasta *themes*, além de outros arquivos. Dentro desta pasta está toda a configuração do nosso tema

Nesse arquivo *JSON* de configuração vamos ter duas chaves:

**colors**: *os valores nesta chave vão alterar as cores do próprio editor de texto.*

**tokenColors**: *os valores nesta chave vão alterar as cores de nomes de variáveis, classes, funções e tudo dentro do nosso nosso código.*

Antes de qualquer alteração vamos dar um *F5* para iniciar um editor que irá fornecer um preview de como está o nosso tema

Nesse novo editor que se abriu vamos ver um tema padrão de acordo com o modo que escolhemos durante a instalação.

Você pode abrir qualquer arquivo para acompanhar as mudanças e selecionar as tags que deseja alterar, e para conseguirmos identificar quais *tags* ou *tokens* queremos alterar, vamos utilizar esse comando:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ir99r5xk5wi3g457s3lf.png)

**Developer: Inspect Editor Tokens and Scopes**

Para abrir o campo de busca, você pode usar o atalho: **(CTRL + P)**

Agora podemos identificar o *scope* da variável, interface,  ou constante que queremos alterar:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dtlw5muztz6go12bkf2r.png)

Copiamos o *scope* e vamos alterar as *tokenColors* dentro de nosso *theme.json*

Fazendo uma busca encontrei o *scope* aqui:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yk7zecq5ynm09jveatf0.png)

Agora sim, vamos atualizar o nosso theme.json e ver as mudanças acontecerem no preview

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hcm075vbliedme74j8z9.png)

Massa!

Agora, se você quiser alterar algo como a cor de fundo do editor, ou a cor dos ícones da barra de navegação, você pode alterar dentro da chave: *colors*

Um jeito que encontrei para facilitar essas alterações é usando o comando:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gsfcbagul8dzbfxh8bbe.png)

**Developer: Generate Color Theme From Current Settings**

isso vai gerar um tema a partir das configurações atuais do seu editor, e se por acaso você estiver com algum tema já instalado, ele vai buscar toda as opções do seu tema atual. Dai em diante você pode colar essas opções dentro do seu *theme.json*, e assim que salvar o preview, o editor vai carregar todas as configurações. Assim fica mais fácil de encontrar e alterar tudo que você quiser 😉

&nbsp;

Agora que você já está satisfeito com seu novo tema, vamos criar um pacote para instalar e assim utiliza-lo.

Para isso vamos instalar o **Visual Studio Code Extension**, para gerar nosso pacote.

```bash
npm i -g vsce
```

Para o pacote ser gerado você vai precisar adicionar um *publisher* em seu *package.json* e fazer uma alteração em seu *README.md*

```bash
"publisher": "<seu-nome>"
```

Dito isso, agora basta gerar o pacote

```bash
vsce package
```

Um pacote com a extensão .vsix será gerado dentro da pasta do seu projeto

Para fazer a instalação simplesmente rode o comando:

```bash
code --install-extension ./<nome-do-tema>.vsix
```

Pronto, agora basta procurar o seu tema na aba de temas do editor e aplicar 😎

A partir de agora você pode deixar o seu vscode do jeito que você sempre quis.

Se isso foi útil de alguma maneira, solte uma reação e deixe alguma mensagem. Valeu!

Happy Coding!

Links úteis:

[microsoft/vscode-generator-code](https://github.com/microsoft/vscode-generator-code)

[Visual Studio Code Themes](https://code.visualstudio.com/docs/getstarted/themes)