Modifique qualquer tema no VSCode

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.

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"
}

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",
  }
}

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.

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

Resultado:

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"
          }
        }
      ]
    }
  }

Resultado:

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:

"[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:

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

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:

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

Resultado:

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

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

Alterando a cor da ActivityBar

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

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 😀