Colore della barra di stato di Visual Studio Code

101

Il colore predefinito della barra di stato di Visual Studio Code è blu e lo trovo piuttosto fastidioso. Ho usato questa estensione per cambiare il colore ma ha smesso di funzionare dopo l' 1.10.2aggiornamento.

visual-studio-code background-color statusbar

— Shahzaib Rahim
fonte

11

Per favore approva la risposta :)

— holms

189

Puoi cambiare il colore della barra di stato modificando le impostazioni utente aggiungendo queste righe di codice al suo interno:

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

— acesmndr
fonte

può essere fatto dinamicamente? const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A');non sembra fare niente?

— Tom H

@ TomH Non sono un esperto e non sono abbastanza sicuro di come sia fatto "dinamicamente", ma l'esecuzione Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"})mi dà un TypeError che mi dice che non possiamo assegnare a una proprietà di sola lettura. Quindi immagino che l'utilizzo del metodo getConfiguration non sia il modo corretto per farlo.

— acesmndr

3

Funziona bene grazie @acesmndr. Come descritto qui: code.visualstudio.com/docs/getstarted/… , puoi anche apportare questa modifica al tema del file delle impostazioni dell'utente in questo modo: "workbench.colorCustomizations": {"[Markdown Editor Dark]": {"statusBar .background ":" # 1A1A1A "," statusBar.noFolderBackground ":" # 212121 "," statusBar.debuggingBackground ":" # 263238 "}},

— Walton

risposta davvero utile @acesmndr

— Akhila

62

1) Farò risparmiare 30 minuti di tempo ai noobs come me - deve essere modificato nel file settings.json. Il modo più semplice per accedere è File -> Preferenze -> Impostazioni, cerca "Colore", scegli un'opzione "Ambiente di lavoro: personalizzazioni colore" -> "Modifica in settings.json".

2) Questo usa la soluzione proposta da "Gama11", ma! Note !: la forma finale del codice nel settings.json dovrebbe essere così - nota le doppie parentesi graffe intorno a "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"
    }
}

Dopo aver copiato / incollato il codice sopra, premi Ctrl + S per salvare le modifiche in "settings.json".

La soluzione è stata adattata da qui: https://code.visualstudio.com/api/references/theme-color

— J.Paul
fonte

21

Poiché ogni tema è così diverso, probabilmente non vorrai apportare modifiche come questa a livello globale. Invece, specificali in base al tema: ad esempio:

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

In questo modo, quando passi tra i tuoi temi preferiti, le tue personalizzazioni non verranno dimenticate e avranno senso in quel contesto.

— shacker
fonte

2

È anche ottimo applicarlo alle impostazioni dell'area di lavoro per distinguere tra progetti diversi, quando sono aperte più istanze di VSCode. Si può anche cambiare titleBar.activeBackgrounde titleBar.activeForegroundrenderlo ancora più evidente.

— Qwerty

Nota che, come nelle altre risposte, probabilmente vuoi anche impostare statusBar.noFolderBackgrounde statusBar.debuggingBackground, altrimenti non saranno influenzate.

— lapislazzuli

3

C'è una soluzione più forte e più robusta rispetto alle risposte di cui sopra secondo me, e questo è cambiare il colore della barra di stato in base al file su cui stai lavorando: si chiama ColorTabs
e ti consente di fornire un elenco di espressioni regolari e cambiarlo colore basato su quello.

Disclaimer - Ho scritto l'estensione Enjoy!

— orepor
fonte

Bella estensione: mi piacerebbe che la regex funzionasse su tutto il percorso in modo da poter distinguere tra tutti i miei progetti aperti VSCode.

— cyberwombat

1

In realtà era su percorsi completi, ma l'ho cambiato in percorsi relativi ... Forse può essere configurato

— orepor

1

Sarebbe bello configurare i colori delle schede sul ramo invece del nome del file - se si sviluppa -> verde, qa -> arancione, master -> rosso, altri -> predefinito?

— Johan Aspeling

1

Il ragazzo che ha scritto un'estensione che risolve il problema ha meno voti rispetto ad altri post che ripetono quello che dice il post in alto, carino.

— a.anev

1

Premere control+shift+pquando si apre solo vscode e digitare, open settings(UI)cercare window.titleBarStylee modificare l'opzione da nativea in custommodo da poter ripristinare il colore della barra di stato da whitea black.

Nota importante: questa tecnica funziona per la versione di aggiornamento 1.32 di vscode rilasciata a febbraio 2019.Assicurati di aver aggiornato il tuo vscode all'ultima versione 1.32 o alle versioni successive poiché potrebbe non funzionare per le versioni precedenti.

— Rahul Ahire
fonte

7

non risponde alla domanda, estranea alla status bar

— Gal Margalit

come Gal ha detto sopra, la barra del titolo non è la barra di stato - la prima è in alto, la seconda è in basso

— rivelare

1

C'è un'altra estensione disponibile https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock per cambiare il colore del posto di lavoro. Ti consente di scegliere un colore diverso per ogni istanza di codice vs

— Maxim Isaev
fonte

0

Puoi cambiare il colore modificando le estensioni:

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

— user10753201
fonte

0

Questi sono i passaggi che ho seguito per impostare i colori della barra di stato di VS Code su macOS per un'area di lavoro (non a livello globale).

Visualizza | Tavolozza dei comandi ... | Cerca "Open Workspace Settings (JSON)"

(Questo aprirà il file progetto [nome-progetto] .code-workspace.)

Aggiungi le personalizzazioni del colore nella proprietà delle impostazioni.

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

Ciò è molto utile quando si hanno più istanze di VS Code aperte e si desidera differenziare visivamente ogni finestra senza dover cambiare il tema globale.

— HelloWorldDude
fonte