Faça do seu jeito: Como editar um tema do Visual Studio Code

Dracula Official após edição manual de cores.

Como um(a) digno(a) usuário do VS Code que se preze, você já deve ter passado alguns minutos do seu dia procurando por aquele tema perfeito pro seu editor. Porém, o que ninguém conta, é que e possivelmente você se contentou com algum “menos pior” que achou, algo que chegasse próximo àquelas cores que você viu num vídeo na internet, ou no computador de alguém, mas que não era exatamente o que você queria.

Dracula Official Theme.

Talvez não sejam essas cores meio “pastéis” que você queira, né?

E qual o melhor jeito de fazer as coisas da maneira que você quer? Fazendo-as você mesmo(a)!

Vamos ao que interessa

Aqui, podemos começar de duas maneiras: criando o seu próprio tema do zero, ou adaptando de algum que tenha familiaridade. A primeira opção não será o foco desse artigo, mas, caso queira, aqui você terá parte das instruções necessárias. Caso necessite de algo mais, a própria Microsoft se encarregará de lhes entregar.

Caso opte pela segunda opção, as instruções são essas abaixo. Ah, e antes que me esqueça, eu já utilizava o tema Dracula Official, e me baseei nas cores usadas pelo Diego da Rocketseat no editor dele. Não ficou exaaatamente igual, mas tá bem próximo, vai!

1. Abra seu editor VS Code. Então, vá até as configurações (pode usar o comando ctrl + , ou command +, no mac), e clique no canto superior direito para editar manualmente.

Ícone de edição das configurações via JSON.

2. Crie um novo campo. Copie e cole o código abaixo.

“workbench.colorCustomizations” : { },

3. Escolha o que deseja alterar. No meu caso, estou utilizando as seguintes modificações:

“workbench.colorTheme”: “Dracula”,

“workbench.colorCustomizations”: {

“activityBar.background”: “#1f1b2c”,

“activityBar.foreground”: “#dadada”,

“activityBar.inactiveForeground”: “#3b344f”,

“sideBar.background”: “#13121b”,

“sideBarSectionHeader.background”: “#191622”,

“sideBar.foreground”: “#dadada”,

“editor.background”: “#191622”,

“terminal.background”: “#191622”,

“terminal.SectionHeader.bakground”: “#191622”,

“titleBar.activeBackground”: “#191622”,

“dropdown.background”: “#191622”,

“dropdown.listBackground”: “#191622”,

“dropdown.border”: “#191622”,

“dropdown.foreground”: “#dadada”,

“titleBar.activeForeground”: “#dadada”,

“input.background”: “#191622”,

“panel.background”: “#191622”,

“panel.border”: “#b470a0”,

“panelTitle.activeBorder”: “#b470a0”,

“panelTitle.inactiveForeground”: “#7c7785”,

“editor.lineHighlightBorder”: “#191622”,

“editor.selectionBackground”: “#393744”

},

Caso queira alterar quaisquer outros campos, no link da Microsoft lá em cima tem tudo muito bem explicado. Vai lá.

Tá com preguiça, né? Tá aqui o link de novo.

Agora é só salvar e pronto!

Fico por aqui, e espero que tenha gostado dessa dica. Se quiser saber mais sobre o que eu ando fazendo, é só me achar no Linkedin ou no Github. Manda um “salve” que eu te ouço, jovem!

Abraço!