DEV Community 👩‍💻👨‍💻

Cover image for Crie seu próprio tema para Visual Studio Code
Welker Arantes Ferreira
Welker Arantes Ferreira

Posted on

Crie seu próprio tema para Visual Studio Code

O Visual Studio Code acabou se tornando a principal ferramenta de trabalho de grande parte dos desenvolvedores, já que ele oferece um bom suporte para diversas linguagens de programação e pode ser customizado conforme o gosto de cada usuário graças às suas extensões. Sendo assim passamos horas olhando para nossos códigos e sem dúvida um bom tema de cores faz toda a diferença, então por que não criar seu próprio tema?

Neste artigo eu mostrarei passo a passo como criar e publicar um tema para o vscode.

Passo 0

Antes de colocarmos a mão na massa é necessário se cadastrar nos serviços que serão utilizados.

Theme Studio

O primeiro serviço que utilizaremos é o Theme Studio for VS Code. Esta ferramenta nos permitirá customizar as cores do vscode de forma visual. Para se cadastrar acesse este link

Azure DevOps

O Azure DevOps é um serviço fornecido pela Microsoft que contém todas as ferramentas para gestão de projetos de software, é possível gerenciar o código fonte, as sprints e até mesmo automatizar o deploy. Precisamos ter uma conta do Azure DevOps para que seja possível publicar nosso tema no marketplace do vscode. Dito isso, acesse este link e clique em start free para se cadastrar com uma conta microsoft ou start free with Github para usar sua conta do Github.

Visual Studio Marketplace

O último serviço que precisamos nos cadastrar é o Marketplace . Acesse este link para se cadastrar. Quando estiver preenchendo seus dados repare que será criado um publisher id, você precisará informá-lo na hora de publicar seu tema no marketplace.

Passo 1 - Preparação do ambiente

Agora que já criamos todas as contas necessárias, vamos instalar as ferramentas necessárias para a criação do tema. Primeiro vamos instalar as ferramentas para gerar o projeto base, então abra seu terminal e execute o comando abaixo:

npm install -g yo generator-code
Enter fullscreen mode Exit fullscreen mode

Agora vamos instalar a ferramenta que nos permitirá publicar o tema no marketplace, para isso execute o comando abaixo:

npm install -g vsce
Enter fullscreen mode Exit fullscreen mode

Passo 2 - Criando o tema base

Nesta etapa utilizaremos a ferramenta generator-code para criar toda a estrutura base do tema, para isso basta executar o seguinte comando no terminal:

yo code
Enter fullscreen mode Exit fullscreen mode

Após executar o comando você deve ver no seu terminal algo parecido com a imagem abaixo:

Yeoman Generator

Selecione New Color Theme e em seguida No, start fresh. Em seguida o assistente te perguntará algumas informações sobre o tema, preencha da seguinte forma:

  • What's the name of your extension? nome-do-tema
  • What's the identifier of your extension? nome-do-tema
  • What's the description of your extension? Breve descrição sobre o tema
  • What's the name of your theme shown to the user? Nome que será exibido para o usuário

Por último você precisa escolher se o seu tema será do tipo Dark ou do tipo Light. Agora é só esperar todos os arquivos serem gerados.

Passo 3 - customizando as cores

Finalmente chegamos na parte divertida, acesse o serviço Theme Studio, faça login e clique em Create new Theme. Você terá que escolher entre as opções Dark ou Light, aqui é importante selecionar a mesma opção que foi escolhida no passo anterior, em seguida clique em Create Theme. Agora você deve estar vendo uma tela como esta:

Alt Text

Na barra superior onde está escrito Untitled é exibido o nome do tema, clique sobre o nome para alterá-lo e coloque o nome que será exibido para o usuário. Do lado esquerdo existe um menu com 3 abas, sendo elas:

  • Colors: Nesta seção é onde customizamos os elementos principais como StatusBar, SideBar, Terminal, inputs e botões.
  • Editor: Nesta seção é onde customizamos as cores do editor de código em si, os balões de sugestões.
  • Syntax: Nesta seção é onde customizamos as cores do código como variáveis, classes, palavras chaves e strings.

Quando terminar as estilizações basta clicar no botão Save Theme localizado no canto superior direito.

Após fazer as customizações de cores e salvar o tema você será redirecionado para a página Your Themes.

Passo 4 - Preparando o tema para ser publicado

Agora que já finalizamos a personalização das cores, precisamos repassar estas configurações para o nosso tema base. Para isso acesse o Theme Studio, clique em Your Themes, passe o mouse sobre o tema que foi criado e clique no botão de download como exibido na imagem abaixo:

Alt Text

Abra a pasta do tema base no vscode e substitua o conteúdo do arquivo themes/color-theme.json pelo conteúdo do arquivo json que foi baixado. Para testar o tema antes de publicar pressione F5, isso iniciará o debug e abrirá uma nova janela do vscode com o tema aplicado.
Além do arquivo de cores podemos configurar também o ícone e cor de background que será exibido no marketplace. Estas configurações são feitas no arquivo package.json, a imagem abaixo mostra as opções disponíveis:

Alt Text

Outro arquivo importante é o README.md. Este arquivo funciona como a página inicial do seu tema, o conteúdo dele será exibido tanto no marketplace do vscode, quanto dentro do próprio vscode na aba de extensões.

Obs.: Vale lembrar que para exibir imagens neste arquivo é preciso hospedá-las em algum servidor com https

Passo 5 - Publicando o tema

Finalmente podemos publicar nosso tema. Para fazer isso acesse o Azure DevOps, clique no ícone de usuário e acesse a opção personal access token.

Alt Text

Clique em New Token e preencha o formulário conforme a imagem abaixo:

Alt Text

Ao clicar em create será gerado um novo token. Copie este token e salve em um lugar seguro, pois não será exibido novamente

Agora vá para o terminal, acesse o diretório do tema e execute o comando abaixo:

vsce login <publisher name>
Enter fullscreen mode Exit fullscreen mode

Lembrando que Publisher Name é o seu Publisher ID que foi gerado no passo 0. Ao executar este comando o vsce pedirá o seu token, copie e cole o token que foi gerado no Azure DevOps. Em seguida execute o comando abaixo:

vsce publish
Enter fullscreen mode Exit fullscreen mode

Pronto!!!
Se tudo correu bem você já poderá ver seu tema no marketplace e instalá-lo no vscode.

Dica Extra

O Theme Studio facilita bastante a customização das cores, mas pode ser que você queira definir configurações mais específicas. Neste caso o ideal é fazer o seguinte:

Pressione as teclas Ctrl + Shift + P (cmd + Shift + P se estiver usando Mac OS), e selecione a opção Developer: Inspect editor tokens and scopes como mostra a imagem abaixo.

Alt Text

Assim será possível saber o "escopo" a ser customizado, como os nomes de variáveis por exemplo. Copie o scope exibido

Alt Text

Em seguida abra o arquivo themes/color-theme.json e dentro da seção tokenColors procure pelo scope que você copiou para alterá-lo e, caso não exista é só criar um bloco de código como na imagem abaixo:

Alt Text

Explicando o bloco de código

  • name: É uma descrição que ajuda a identificar o bloco, pode nomear como preferir
  • scope: Aqui é onde deve ser informado o scope que você inspecionou
  • settings: Aqui é onde de fato fazemos a customização, podemos alterar a cor da fonte, a família da fonte e colocar o texto como negrito ou itálico
  • settings > foreground: Entenda foreground como cor da fonte

Referências

Theme Studio FAQ

Visual Studio Code - Create a new Color Theme

Visual Studio Code - Publishing Extensions

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.