Kolor paska stanu programu Visual Studio Code

107

Domyślny kolor paska stanu programu Visual Studio Code jest niebieski i wydaje mi się to dość rozpraszające. Użyłem tego rozszerzenia do zmiany koloru, ale po 1.10.2aktualizacji przestało działać .

Shahzaib Rahim
źródło
11
Proszę o zatwierdzenie odpowiedzi :)
holms

Odpowiedzi:

200

Możesz zmienić kolor paska stanu, edytując ustawienia użytkownika, dodając w nim następujące wiersze kodu:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}
acesmndr
źródło
czy można to zrobić dynamicznie? const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A');nic nie robi?
Tom H
@TomH Nie jestem ekspertem i nie jestem do końca pewien, jak to się robi „dynamicznie”, ale uruchomienie Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"})daje mi TypeError informujący mnie, że nie możemy przypisać właściwości tylko do odczytu. Więc myślę, że użycie metody getConfiguration nie jest właściwym sposobem na zrobienie tego.
acesmndr
3
Działa to dobrze, dzięki @acesmndr. Jak opisano tutaj: code.visualstudio.com/docs/getstarted/… , możesz również wprowadzić tę zmianę w motywie pliku ustawień użytkownika, takim jak ten: "workbench.colorCustomizations": {"[Markdown Editor Dark]": {"statusBar .background ":" # 1A1A1A "," statusBar.noFolderBackground ":" # 212121 "," statusBar.debuggingBackground ":" # 263238 "}},
Walton
1
bardzo pomocna odpowiedź @acesmndr
Akhila
68

1) Zaoszczędzę 30 minut dla noobów takich jak ja - trzeba to edytować w pliku settings.json. Najłatwiejszym sposobem uzyskania dostępu jest wybranie opcji Plik -> Preferencje -> Ustawienia, wyszukanie hasła „Kolor”, wybranie opcji „Środowisko pracy: Dostosowywanie kolorów” -> „Edycja w settings.json”.

2) Wykorzystuje to rozwiązanie zaproponowane przez "Gama11", ale! Uwaga !: ostateczna forma kodu w settings.json powinna wyglądać następująco - zwróć uwagę na podwójne nawiasy klamrowe wokół "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"
    }
}

Po skopiowaniu / wklejeniu powyższego kodu naciśnij Ctrl + S, aby zapisać zmiany w pliku „settings.json”.

Rozwiązanie zostało zaadaptowane stąd: https://code.visualstudio.com/api/references/theme-color

J.Paul
źródło
21

Ponieważ każdy motyw jest tak inny, prawdopodobnie nie chcesz wprowadzać takich zmian na całym świecie. Zamiast tego określ je dla poszczególnych tematów: np .:

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

W ten sposób przełączając się między ulubionymi motywami, ich dostosowania nie zostaną zapomniane i będą miały sens w tym kontekście.

shacker
źródło
2
Świetnie jest również zastosować to do ustawień obszaru roboczego, aby rozróżnić różne projekty, gdy otwartych jest wiele wystąpień VSCode. Można też zmienić titleBar.activeBackgroundi titleBar.activeForegrounduczynić to jeszcze bardziej widocznym.
Qwerty
Należy zauważyć, że, podobnie jak w innych odpowiedzi, prawdopodobnie również chcesz ustawić statusBar.noFolderBackgroundi statusBar.debuggingBackground, w przeciwnym razie nie zostaną naruszone.
Lapis
3

Moim zdaniem istnieje silniejsze, solidniejsze rozwiązanie niż powyższe odpowiedzi, a mianowicie zmiana koloru paska stanu w oparciu o plik, nad którym pracujesz - nazywa się ColorTabs
i pozwala na podanie listy wyrażeń regularnych i zmianę tego kolor na tej podstawie.

Zastrzeżenie - napisałem rozszerzenie Ciesz się!

orepor
źródło
Ładne rozszerzenie - chciałbym, aby wyrażenie regularne działało na pełnej ścieżce, abym mógł rozróżnić wszystkie moje otwarte projekty VSCode.
cyberwombat
1
Właściwie było na pełnych ścieżkach, ale zmieniłem to na ścieżki względne ... Może da się to skonfigurować
orepor
1
Fajnie byłoby skonfigurować kolory zakładek w gałęzi zamiast nazwy pliku - jeśli jego rozwinięcie -> zielony, qa -> pomarańczowy, główny -> czerwony, inne -> domyślne?
Johan Aspeling
1
Facet, który napisał rozszerzenie rozwiązujące problem, ma mniej głosów niż inne posty, które powtarzają to, co mówi najwyższy post, fajnie.
a.anev
1

Naciśnij, control+shift+pgdy po prostu otworzysz vscode, wpisz open settings(UI)i wyszukaj window.titleBarStylei zmień opcję z nativena custom, aby można było przywrócić kolor paska stanu z whitena black.

Ważna uwaga: ta technika działa w przypadku aktualizacji wersji 1.32 vscode wydanej w lutym 2019 r. Upewnij się, że zaktualizowałeś vscode do najnowszej wersji 1.32 lub nowszej, ponieważ może nie działać w starszych wersjach.

Przykładowy zrzut ekranu

Rahul Ahire
źródło
7
nie odpowiada na pytanie niezwiązane z paskiem statusu
Gal Margalit
jak Gal powiedział powyżej, pasek tytułu nie jest paskiem stanu - pierwszy jest na górze, drugi na dole
pokazał
1

Oto kroki, które wykonałem, aby ustawić kolory paska stanu VS Code w systemie MacOS dla obszaru roboczego (nie globalnie).

Wyświetl | Paleta poleceń ... | Wyszukaj „Otwórz ustawienia obszaru roboczego (JSON)”

(Spowoduje to otwarcie pliku projektu [nazwa-projektu] .code-workspace).

Dodaj dostosowania kolorów we właściwości settings.

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

Jest to bardzo przydatne, gdy masz otwartych wiele wystąpień VS Code i chcesz wizualnie zróżnicować każde okno bez konieczności zmiany motywu globalnego.

HelloWorldDude
źródło
0

Możesz zmienić kolor, edytując rozszerzenia:

 "colors":{
        "statusBar.background": "#505050",
    },
user10753201
źródło