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 👍
Para isso você vai precisar do Node.js instalado, juntamente com o npm.
Então bora!
Primeiro de tudo vamos gerar um tema default, utilizando o yo code
Para fazer a instalação, basta rodar o comando:
npm install -g yo generator-code
Após a instalação vamos gerar o nosso tema base:
yo code
O tipo de extensão será New Color Theme
Vamos começar do zero, então: No, start fresh
Coloque o nome da sua extensão e as informações seguintes como desejar
Na sequência podemos escolher qual a base do nosso tema, eu sou do time Dark e você?
Tema criado!
Agora vamos fazer algumas alterações para deixar o tema do nosso jeito
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:
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:
Copiamos o scope e vamos alterar as tokenColors dentro de nosso theme.json
Fazendo uma busca encontrei o scope aqui:
Agora sim, vamos atualizar o nosso theme.json e ver as mudanças acontecerem no preview
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:
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 😉
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.
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
"publisher": "<seu-nome>"
Dito isso, agora basta gerar o pacote
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:
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:
Top comments (0)