Cor da barra de status do código do Visual Studio

101

A cor da barra de status padrão do Visual Studio Code é azul e acho que é bastante perturbador. Usei esta extensão para mudar a cor, mas ela parou de funcionar após a 1.10.2atualização.

visual-studio-code background-color statusbar

— Shahzaib Rahim
fonte

11

Por favor, aprove a resposta :)

— holms

189

Você pode alterar a cor da barra de status editando as configurações do usuário, adicionando estas linhas de código a ela:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}

— acesmndr
fonte

isso pode ser feito dinamicamente? const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A');não parece fazer nada?

— Tom H

@TomH Não sou nenhum especialista e não tenho certeza de como isso é feito "dinamicamente", mas a execução Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"})está me dando um TypeError dizendo que não podemos atribuir a uma propriedade somente leitura. Portanto, acho que usar o método getConfiguration não é a maneira correta de fazer isso.

— acesmndr

3

Isso funciona bem, obrigado @acesmndr. Conforme descrito aqui: code.visualstudio.com/docs/getstarted/… , você também pode fazer essa alteração no tema do arquivo de configurações do usuário específico como este: "workbench.colorCustomizations": {"[Editor de Markdown escuro]": {"statusBar .background ":" # 1A1A1A "," statusBar.noFolderBackground ":" # 212121 "," statusBar.debuggingBackground ":" # 263238 "}},

— Walton

resposta realmente útil @acesmndr

— Akhila

62

1) Vou economizar 30 minutos de tempo para novatos como eu - ele precisa ser editado no arquivo settings.json. A maneira mais fácil de acessar é Arquivo -> Preferências -> Configurações, procure por "Cor", escolha uma opção "Workbench: Personalizações de cores" -> "Editar em settings.json".

2) Isso usa a solução proposta por "Gama11", mas! Note !: a forma final do código em settings.json deve ser assim - observe chaves duplas em torno de "workbench.colorCustomizations":

{
  // fontSize just for testing purposes, commented out.
  //"editor.fontSize" : 12

  // StatusBar color:
     "workbench.colorCustomizations": {
     "statusBar.background" : "#303030",
     "statusBar.noFolderBackground" : "#222225",
     "statusBar.debuggingBackground": "#511f1f"
    }
}

Depois de copiar / colar o código acima, pressione Ctrl + S para salvar as alterações em 'settings.json'.

A solução foi adaptada daqui: https://code.visualstudio.com/api/references/theme-color

— J. Paul
fonte

21

Como cada tema é tão diferente, você provavelmente não deseja fazer alterações como essa globalmente. Em vez disso, especifique-os por tema: por exemplo:

"workbench.colorCustomizations": {
    "[Some Theme Name]": {
        "statusBar.background" : "#486357",
        "statusBar.foreground" : "#c8e9c5",
    },
    "[Some Other Theme Name]": {
        "statusBar.background" : "#385357",
        "statusBar.foreground" : "#d7e9c4",
    }
},

Dessa forma, quando você alternar entre seus temas favoritos, suas personalizações deles não serão esquecidas e farão sentido nesse contexto.

— shacker
fonte

2

Também é ótimo aplicar isso às configurações do espaço de trabalho para diferenciar entre diferentes projetos, quando várias instâncias do VSCode estão abertas. Também se pode mudar titleBar.activeBackgrounde titleBar.activeForegroundtorná-lo ainda mais aparente.

— Qwerty

Observe que, como nas outras respostas, você provavelmente também deseja definir statusBar.noFolderBackgrounde statusBar.debuggingBackground, caso contrário, eles não serão afetados.

— lapis

3

Há uma solução mais forte e robusta do que as respostas acima, na minha opinião, e isso é mudar a cor da barra de status com base no arquivo em que você está trabalhando - é chamado ColorTabs
e permite que você forneça uma lista de regexes e altere isso cor com base nisso.

Aviso Legal - Eu escrevi a extensão Aproveite!

— orepor
fonte

Boa extensão - adoraria ter o regex funcionando no caminho completo para que eu pudesse diferenciar entre todos os meus projetos VSCode abertos.

— cyberwombat

1

Na verdade, estava em caminhos completos, mas mudei para caminhos relativos ... Talvez possa ser configurado

— orepor

1

Isso seria bom para configurar as cores da guia no branch em vez do nome do arquivo - se for desenvolver -> verde, qa -> laranja, mestre -> vermelho, outros -> padrão?

— Johan Aspeling

1

O cara que escreveu uma extensão que resolve o problema tem menos votos do que outros posts que repetem o que o post de cima diz, legal.

— a.anev

1

Pressione control+shift+pquando você acabou de abrir o vscode e digitar open settings(UI)e pesquisar window.titleBarStylee alterar a opção de nativepara custompara que você possa restaurar a cor da barra de status de whitepara black.

Observação importante: esta técnica funciona para a versão de atualização 1.32 do vscode lançada em fevereiro de 2019. Certifique-se de ter atualizado seu vscode para a versão 1.32 mais recente ou outras versões mais recentes, pois pode não funcionar para as versões mais antigas.

— Rahul Ahire
fonte

7

não responde à pergunta, não relacionada à barra de status

— Gal Margalit

como Gal disse acima, a barra de título não é a barra de status - a primeira está no topo, a última está na parte inferior

— revelt

1

Existe mais uma extensão disponível https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock para alterar a cor do local de trabalho. Ele permite que você escolha uma cor diferente para cada instância de código vs

— Maxim Isaev
fonte

0

Você pode alterar a cor editando as extensões:

 "colors":{
        "statusBar.background": "#505050",
    },

— user10753201
fonte

0

Estas são as etapas que executei para definir as cores da barra de status do VS Code no macOS para um espaço de trabalho (não globalmente).

Ver | Paleta de comandos ... | Pesquise "Open Workspace Settings (JSON)"

(Isso abrirá o arquivo do projeto [nome do projeto] .code-workspace.)

Adicione as personalizações de cores na propriedade de configurações.

{
    "folders": [],
    "settings": {
        "workbench.colorCustomizations": {
            "statusBar.background": "#938e04",
            "statusBar.foreground": "#ffffff"
        }
    }
}

Isso é realmente útil quando você tem várias instâncias do VS Code abertas e deseja diferenciar visualmente cada janela sem ter que alterar o tema global.

— HelloWorldDude
fonte