🎨 Melhore Seu Tema Favorito no VSCode em Minutos!
Tags: vscode, tema, braziliandevs
Published: 2024-06-14 14:50:35

Se você é uma pessoa como eu era, que mudava de tema a todo momento no VSCode 😅, chegando ao ponto de pensar em criar seu próprio tema, mas desistiu por falta de tempo ou preguiça de colocar tanto esforço nisso, eu tenho uma solução bem mais fácil que vai resolver esse problema!

Você vai conseguir alterar aquele tema que você gosta, mas acha que poderia ser melhor; assim, não precisará trocar de tema por um bom tempo.

[![A Jornada do Autodidata em Inglês](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkoqkmh9hic17tnddjf6.png)](https://go.hotmart.com/R93865620U)

Para exemplificar vou modificar o [Aura Theme](https://marketplace.visualstudio.com/items?itemName=DaltonMenezes.aura-theme)

Vou escolher o `Aura Dark (Soft Text)` que é mais confortável para o olho no meu modelo de monitor.

Vamos modificar primeiramente as cores do código e depois as cores dos painéis e similares.

{% youtube https://youtu.be/SDC97qQQlCU %}


## Modificando as cores do código

Link para a documentação oficial dessa parte: https://code.visualstudio.com/docs/getstarted/themes#_editor-syntax-highlighting

No seu VSCode pressione as teclas "shift+cmd+p" (Mac) ou "shift+ctrl+p" (Windows, Linux), digite `Preferences: Open User Settings (JSON)` e pressione ENTER.

Vamos adicionar o seguinte código:

```javascript
"editor.tokenColorCustomizations": {
  // Aqui a mudança afeta todos os temas
  // Para exemplificar, vamos modificar a cor dos comentários para vermelho
  "comments": "#FF0000"
}
```

O código acima modificou a cor dos comentários para todos os temas instalados no seu VSCode, mas podemos modificar apenas para o tema `Aura Dark (Soft Text)`:

```javascript
"editor.tokenColorCustomizations": {
  "[Aura Dark (Soft Text)]": {
    // Aqui a mudança afeta apenas o tema `Aura Dark (Soft Text)`
    "comments": "#FF0000",
  }
}
```

No seu VSCode pressione novamente as teclas "shift+cmd+p" (Mac) ou "shift+ctrl+p" (Windows, Linux), digite `Developer: Inspect Editor Tokens and Scopes` e pressione ENTER.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwevfz90ewlnz1evv7nd.png)

```javascript
"[Aura Dark (Soft Text)]": {
      "textMateRules": [
        {
          "name": "",
          "scope": ["variable.other.object.js.jsx"],
          "settings": {
            "foreground": "#C17AC8"
          }
        }
      ]
    }
```

Resultado:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45sgtvw5zvkzby3w0yf1.png)

Posso fazer o mesmo com as palavras acima que ainda estão em branco:

```javascript
"editor.tokenColorCustomizations": {
    "[Aura Dark (Soft Text)]": {
      "textMateRules": [
        {
          "name": "",
          "scope": [
            "variable.other.object.js.jsx",
            "variable.other.readwrite.alias.js.jsx" // adicione
          ],
          "settings": {
            "foreground": "#C17AC8"
          }
        }
      ]
    }
  }
```

Resultado:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtn6ejuhbsp3dzj6u6wc.png)

## Colocando palavras em itálico

Como eu gosto do itálico da fonte [Victor Mono](https://rubjo.github.io/victor-mono/) eu vou deixar algumas palavras em itálico:

No seu VSCode pressione novamente as teclas "shift+cmd+p" (Mac) ou "shift+ctrl+p" (Windows, Linux), digite `Developer: Inspect Editor Tokens and Scopes` e pressione ENTER.

Nesse exemplo vamos colocar a palavra `import` em itálico:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytb3suamart161gqiu78.png)

```javascript
"[Aura Dark (Soft Text)]": {
      "textMateRules": [
        {
          "name": "italic", // Coloque um nome que lembre a alteração
          "scope": [
            "keyword.control.import.js.jsx"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        }
      ]
    }
```

Também quero a palavra `function` em itálico:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5b7xloo2m02s0yex7ln.png)

```javascript
"editor.tokenColorCustomizations": {
    "[Aura Dark (Soft Text)]": {
      "textMateRules": [
        {
          "name": "italic",
          "scope": [
            "keyword.control.import.js.jsx",
            "storage.type.function.js.jsx" // Adicione
          ],
          "settings": {
            "fontStyle": "italic"
          }
        }
      ]
    }
  }
```

[![Formação TS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isxopdurvofcx18iptvb.png)](https://go.hotmart.com/H93763859E)

## Alterando cores dos painéis e similares

Descobrir o nome dos painéis: https://code.visualstudio.com/api/references/theme-color

Vamos agora remover a borda da aba selecionada:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75ximslhndmx8pwdum3j.png)

```javascript
"workbench.colorCustomizations": {
    "[Aura Dark (Soft Text)][Aura Dark]": {
      "tab.inactiveBackground": "#110F18",
      "tab.unfocusedActiveBorder": "#110F18",
      "tab.activeBorder": "#15141B"
    },
  },
```

Resultado:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0zfo5j3f4wmrj5qupud.png)

Deixando só a aba selecionada com a mesma cor do background do código (ajuda a identificar melhor qual aba está selecionada):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyx60gjqzna71xinz6xi.png)

```javascript
"workbench.colorCustomizations": {
    "[Aura Dark (Soft Text)][Aura Dark]": {
      "tab.inactiveBackground": "#110F18",
      "tab.unfocusedActiveBorder": "#110F18",
      "tab.activeBorder": "#15141B",
      "tab.activeBackground": "#15141B", // adicione
      "editorGroupHeader.tabsBackground": "#110F18" // adicione
    }
  },
```

Resultado:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax0sgidyipbeahnmyfw6.png)


## Alterando a cor da ActivityBar

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03v16r76h8izd9hrnodl.png)

```javascript
"workbench.colorCustomizations": {
    "[Aura Dark (Soft Text)][Aura Dark]": {
      "tab.inactiveBackground": "#110F18",
      "tab.activeBorder": "#15141B",
      "tab.activeBackground": "#15141B",
      "editorGroupHeader.tabsBackground": "#110F18",
      "activityBar.background": "#110F18" // adicione
    }
  },
```

Resultado:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os69335hyjbixgcp7itw.png)


## Conclusão

Com isso você pode alterar qualquer cor no VSCode, às vezes você pode demorar um pouco para descobrir o nome de certo painel, pois a documentação não é tão clara assim. 

Espero ter ajudado, até a próxima 😀👋

[![Formação TS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72gnny6fjwnmku1x3rr4.png)](https://go.hotmart.com/H93763859E)