Farbe der Statusleiste von Visual Studio Code

101

Die Standardfarbe der Statusleiste von Visual Studio Code ist blau und ich finde sie ziemlich ablenkend. Ich habe diese Erweiterung verwendet, um die Farbe zu ändern, aber sie funktioniert nach dem 1.10.2Update nicht mehr.

visual-studio-code background-color statusbar Shahzaib Rahim
quelle
11
Bitte genehmigen Sie die Antwort :)
Holms

Antworten:

189

Sie können die Farbe der Statusleiste ändern, indem Sie die Benutzereinstellungen bearbeiten, indem Sie folgende Codezeilen hinzufügen:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}
acesmndr
quelle
kann das dynamisch gemacht werden? const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A');scheint nichts zu tun?
Tom H
@TomH Ich bin kein Experte und nicht ganz sicher, wie es "dynamisch" gemacht wird, aber das Ausführen Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"})gibt mir einen TypeError, der mir sagt, dass wir keiner schreibgeschützten Eigenschaft zuweisen können. Ich denke, die getConfiguration-Methode ist nicht der richtige Weg, dies zu tun.
Acesmndr
3
Das funktioniert gut, danke @acesmndr. Wie hier beschrieben: code.visualstudio.com/docs/getstarted/… , können Sie diese Änderung auch am Thema der Benutzereinstellungsdatei wie folgt vornehmen: "workbench.colorCustomizations": {"[Markdown Editor Dark]": {"statusBar .background ":" # 1A1A1A "," statusBar.noFolderBackground ":" # 212121 "," statusBar.debuggingBackground ":" # 263238 "}},
Walton
wirklich hilfreiche Antwort @acesmndr
Akhila
61

1) Sparen Sie Noobs wie mir 30 Minuten Zeit - es muss in der Datei settings.json bearbeitet werden. Der einfachste Weg zum Zugriff ist Datei -> Einstellungen -> Einstellungen, suchen Sie nach "Farbe", wählen Sie eine Option "Workbench: Farbanpassungen" -> "In settings.json bearbeiten".

2) Dies verwendet die von "Gama11" vorgeschlagene Lösung, aber! Hinweis!: Die endgültige Form des Codes in der settings.json sollte folgendermaßen sein - beachten Sie doppelte geschweifte Klammern um "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"
    }
}

Nachdem Sie den obigen Code kopiert / eingefügt haben, drücken Sie Strg + S, um die Änderungen in 'settings.json' zu speichern.

Die Lösung wurde von hier aus angepasst: https://code.visualstudio.com/api/references/theme-color

J. Paul
quelle
21

Da jedes Thema so unterschiedlich ist, möchten Sie wahrscheinlich keine solchen Änderungen global vornehmen. Geben Sie sie stattdessen themenbezogen an: z.

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

Auf diese Weise werden Ihre Anpassungen beim Wechsel zwischen Ihren Lieblingsthemen nicht vergessen und sind in diesem Zusammenhang sinnvoll.

Shacker
quelle
2
Es ist auch großartig, dies auf Arbeitsbereichseinstellungen anzuwenden, um zwischen verschiedenen Projekten zu unterscheiden, wenn mehrere VSCode-Instanzen geöffnet sind. Man kann sich auch ändern titleBar.activeBackgroundund titleBar.activeForegroundnoch deutlicher machen.
Qwerty
Beachten Sie, dass, wie in den anderen Antworten, möchten Sie wahrscheinlich auch auf Set statusBar.noFolderBackgroundund statusBar.debuggingBackground, sonst werden sie nicht berühren.
Lapis
3

Meiner Meinung nach gibt es eine stärkere und robustere Lösung als die oben genannten Antworten, mit der Sie die Farbe der Statusleiste basierend auf der Datei, an der Sie arbeiten, ändern
können. Sie heißt ColorTabs und ermöglicht es Ihnen, eine Liste von regulären Ausdrücken bereitzustellen und diese zu ändern Farbe basierend darauf.

Haftungsausschluss - Ich habe die Erweiterung Enjoy!

orepor
quelle
Schöne Erweiterung - würde es lieben, wenn der Regex auf dem vollen Pfad funktioniert, damit ich zwischen all meinen VSCode-geöffneten Projekten unterscheiden kann.
Cyberwombat
1
Es war tatsächlich auf vollen Pfaden, aber ich habe es in relative Pfade geändert ... Vielleicht kann es konfiguriert werden
orepor
1
Dies wäre schön, um Registerkartenfarben auf dem Zweig anstelle des Dateinamens zu konfigurieren - wenn es entwickelt wird -> grün, qa -> orange, master -> rot, andere -> Standard?
Johan Aspeling
1
Der Typ, der eine Erweiterung geschrieben hat, die das Problem löst, hat weniger Stimmen als andere Beiträge, die wiederholen, was der oberste Beitrag sagt, nett.
a.anev
1

Drücken Sie, control+shift+pwenn Sie gerade geöffnet vscode und Art open settings(UI)und die Suche nach window.titleBarStyleund ändern Sie die Option aus , nativeum customso , dass Sie die Farbe der Statusleiste aus wiederherstellen whitezu black.

Wichtiger Hinweis: Diese Technik funktioniert für die Aktualisierung der Version 1.32 von vscode, die im Februar 2019 veröffentlicht wurde. Stellen Sie sicher, dass Sie Ihren vscode auf die neueste Version 1.32 oder weitere neueste Versionen aktualisiert haben, da dies für ältere Versionen möglicherweise nicht funktioniert.

Beispiel Screenshot

Rahul Ahire
quelle
7
beantwortet die Frage nicht, unabhängig von der Statusleiste
Gal Margalit
Wie Gal oben sagte, ist die Titelleiste keine Statusleiste - erstere ist oben, letztere ist unten
revelt
0

Sie können die Farbe ändern, indem Sie Erweiterungen bearbeiten:

 "colors":{
        "statusBar.background": "#505050",
    },
user10753201
quelle
0

Dies sind die Schritte, die ich unternommen habe, um die Farben der VS-Code-Statusleiste unter macOS für einen Arbeitsbereich (nicht global) festzulegen.

Anzeigen | Befehlspalette ... | Suchen Sie nach "Open Workspace Settings (JSON)"

(Dadurch wird die .code-workspace-Datei des Projekts [Projektname] geöffnet.)

Fügen Sie die Farbanpassungen in der Eigenschaft settings hinzu.

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

Dies ist sehr nützlich, wenn Sie mehrere Instanzen von VS-Code geöffnet haben und jedes Fenster visuell unterscheiden möchten, ohne das globale Thema ändern zu müssen.

HelloWorldDude
quelle