TheLazy.Dev
Portfolio GitHub

Blog

vscode |tema |braziliandevs

🎨 Melhore Seu Tema Favorito no VSCode em Minutos!

maiquitome

Dev Maiqui 🇧🇷

Posted on June 14, 2024

🎨 Melhore Seu Tema Favorito no VSCode em Minutos!

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

Para exemplificar vou modificar o 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.

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:

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

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):

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

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

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

Resultado:

Image description

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

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

Resultado:

Image description

Colocando palavras em itálico

Como eu gosto do itálico da fonte 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

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

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

Image description

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

Formação TS

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

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

Resultado:

Image description

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

Image description

"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
    }
  },
Enter fullscreen mode Exit fullscreen mode

Resultado:

Image description

Alterando a cor da ActivityBar

Image description

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

Resultado:

Image description

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

💖 💪 🙅 🚩
maiquitome
Dev Maiqui 🇧🇷

Posted on June 14, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

🎨 Melhore Seu Tema Favorito no VSCode em Minutos!
vscode 🎨 Melhore Seu Tema Favorito no VSCode em Minutos!

June 14, 2024