Como alterar o tema no código VS

O Visual Studio Code transforma a edição e gravação de novo código em uma experiência divertida e sem complicações. O tema escuro padrão do VS Code foi projetado para ser mais agradável aos olhos do que um fundo branco áspero regular, que pode causar fadiga após longas horas de trabalho. Mas e se você não gostar das cores escuras da tela durante o trabalho?

Como alterar o tema no código VS

O benefício do design modular do VS Code é que você tem uma enorme liberdade para alterar o tema escuro original com várias opções de personalização diferentes que abrangem a gama de cores da tela, fontes e até mesmo a aparência do próprio terminal integrado do VS Code.

Este artigo contará tudo o que você precisa saber sobre como alterar os temas no VS Code.

Como alterar o tema no código VS

Alterar o tema geral no VS Code é rápido e fácil. Aqui está o que você precisa fazer:

  1. Abra o código do VS.

  2. Selecione "Arquivo" ("Código" no macOS), selecione "Preferências" e escolha "Tema de cores".

  3. VS Code irá mostrar uma seleção de temas pré-construídos para escolher em um menu suspenso.

  4. Use as teclas do cursor para visualizar a aparência de cada tema diretamente na tela.

  5. Pressione “Enter” enquanto seleciona o tema a ser usado.

Alterar o tema para um pré-configurado diferente pode ser a primeira coisa a fazer ao abrir o VS Code pela primeira vez. Codificar pode levar muito tempo, então é benéfico usar um tema com o qual você se sinta confortável e que não machuque seus olhos durante o trabalho.

Como alterar o tema do terminal no código VS

Se você quiser manter as várias opções pré-configuradas para a cor e o tema do terminal, o processo é o mesmo que alterar o tema geral. Todos os temas integrados incluem opções para alterar a aparência do seu terminal, mas você não pode separá-lo das outras partes do próprio tema no menu principal.

Antes de usar as etapas mencionadas para alterar o tema, abra o console do terminal (Ctrl + Shift + P) para visualizar as alterações feitas no terminal. Alguns temas não fazem alterações no terminal, enquanto outros podem mudá-lo drasticamente. Além disso, usar um tema de que você gosta apenas moderadamente também não é bom, pois você pode acabar usando o terminal mais do que pensava inicialmente.

No entanto, existem algumas soluções alternativas que permitirão que você altere o tema do terminal, que abordaremos nas seções abaixo.

Como alterar o tema do material no código VS

O principal recurso do VS Code é a abundância de extensões interessantes para personalizar sua experiência de codificação e trazer mais funcionalidades para o editor de texto. Uma dessas extensões é o Tema de material, um dos mais populares de seu tipo no VS Code Marketplace.

O tema do material oferece muitos benefícios em relação aos designs pré-personalizados, mas alguns usuários podem considerá-lo insuficiente. O manual do usuário para esta extensão inclui algumas dicas sobre como fazer alterações adicionais para atender às suas necessidades. Veja como alterar o tema geral no Tema do material:

  1. Abra o menu rápido (Ctrl + Shift + P).

  2. Digite “tema” no prompt.

  3. Escolha “Preferências: Tema de cores”.

  4. Selecione uma das predefinições do tema do material.

Definir uma cor de destaque fará com que uma parte do código se destaque, o que pode ser útil se for uma linha particularmente importante ou problemática de diagnosticar. Para definir uma cor de destaque, use as seguintes etapas:

  1. Abra o menu rápido (Ctrl + Shift + P).

  2. Digite “tema material” no prompt.

  3. Escolha “Tema do material: definir cor de destaque”.

  4. Escolha a cor que você gosta na lista.

Com um tema de material alterado, você pode obter uma personalização que está acima do normal e nós mostraremos como.

Como personalizar manualmente um tema no VS Code

O VS Code permite muito mais personalização do que simplesmente alterar entre algumas predefinições. Aqui estão duas maneiras de personalizar o tema de acordo com sua preferência.

Método 1 - Baixe um tema personalizado

Ao falar sobre personalização, não podemos deixar de mencionar o expansivo VS Code Marketplace. Existem várias extensões que apenas alteram a aparência do VS Code, sem interferir em sua funcionalidade. Veja como baixar um tema.

  1. Abra o VS Code Marketplace. Você também pode usar o menu integrado “Extensões” à esquerda da tela.

  2. Digite “tema” na barra de pesquisa para navegar apenas pelos itens que alteram o tema. Uma de nossas principais recomendações é o tema material mencionado acima, mas temos certeza de que você encontrará aquele que melhor se adapta a você.

  3. Baixe a extensão (se estiver usando um navegador) e instale o arquivo .VSIX acessando “Extensões> ícone de reticências> Instalar do VSIX”. Alternativamente, quando você encontrar o tema que você gosta no VS Code, clique nele e selecione o botão “Instalar” no menu de detalhes (à direita).

  4. Assim que o tema estiver instalado e habilitado, selecione-o com o comando “Preferências: Tema de cores”.

Método 2 - Editando o Tema

Todos os temas e configurações são armazenados no VS Code usando texto simples. Siga as etapas para acessar essas configurações e fazer as alterações desejadas:

  1. Crie um ambiente de trabalho ou arquivo de configurações do usuário. O primeiro mudará apenas a aparência do projeto atual, mas o último permanecerá em novos projetos.
  2. Digite o comando “Preferências: Abrir Configurações” no menu principal.

  3. Selecione a guia no canto superior esquerdo para escolher entre as configurações do usuário e do ambiente de trabalho.

  4. Pressione “Editar em settings.json” para abrir o arquivo que contém as configurações que você precisa alterar.

  5. Encontre a configuração chamada “workbench.colorCustomizations.”

  6. Concentre-se em mudar o tema que você deseja, colocando

“[Theme_name]”: {}

O Theme_name é o nome do tema que você deseja alterar. Mantenha as aspas.

  1. Outras mudanças no tema são feitas nos novos colchetes. Digite o nome do parâmetro que deseja alterar (entre aspas), digite ‘:’ e escolha a configuração apropriada de que você precisa.
  2. Use este guia para encontrar os parâmetros que deseja alterar.
  3. As cores são armazenadas em código hexadecimal. Use um guia hexadecimal de cores para localizar a cor desejada.

  4. Quando terminar as alterações, salve o arquivo.

Este método pode ser usado para alterar a maior parte da IU e da aparência do código, incluindo a cor do tema base, planos de fundo, aparência do terminal, cores dos botões e estilos de fonte.

Se você está se perguntando como alterar a fonte no código VS, use o método 2 descrito acima. Você provavelmente precisará de um guia de fontes.

FAQ adicional

Onde os temas do código do VS são armazenados?

Os temas que vêm de extensões são armazenados na pasta de extensões do VS Code. Este local está em seu diretório de instalação (por exemplo C :) e geralmente pode ser encontrado aqui:

~ / .vscode / extensions

Aqui, “~” é o diretório de instalação do VS Code.

Os temas básicos são armazenados em: Microsoft VS Code \ resources \ app \ extensions \ theme-defaults \ themes

No entanto, você não precisa perder tempo procurando arquivos para alterar. Alterar as configurações do usuário por meio do arquivo “settings.json” fornecerá resultados muito mais rápidos.

Como altero a cor do comentário no código do VS?

Para alterar as cores do comentário, abra o arquivo “settings.json” (use o “Método 2” descrito acima), selecione o tema que deseja alterar e insira (entre aspas):

“Comentários”: “#hexcode”

Aqui, “hexcode” é o código da cor desejada. Use um seletor de cores para escolher uma cor apropriada.

Qual é o melhor tema no VS Code?

O melhor tema do VS Code é aquele que você considera mais agradável e útil para seus esforços de programação. Usuários diferentes podem ter preferências distintas de cores e temas. Felizmente, existem muitas opções para escolher, seja nos temas pré-configurados, downloads de extensões ou na capacidade de personalizar um tema exatamente ao seu gosto.

Escolha o seu tema

Com essas instruções, você pode personalizar totalmente um tema como desejar. Com sua riqueza de opções, o VS Code continua sendo um dos editores de texto mais populares e sua capacidade de obter novos recursos com extensões o torna muito semelhante a um IDE.

Que temas você usa no VS Code? Você fez alguma alteração em seu tema preferido? Deixe-nos saber na seção de comentários abaixo.