Couleur de la barre d'état de Visual Studio Code

104

La couleur par défaut de la barre d'état de Visual Studio Code est le bleu et je trouve cela assez distrayant. J'ai utilisé cette extension pour changer la couleur mais elle a cessé de fonctionner après la 1.10.2mise à jour.

visual-studio-code background-color statusbar Shahzaib Rahim
la source
11
Veuillez approuver la réponse :)
holms

Réponses:

194

Vous pouvez changer la couleur de la barre d'état en modifiant les paramètres utilisateur en y ajoutant ces lignes de code:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}
acesmndr
la source
cela peut-il être fait de manière dynamique? const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar'); config2.update('background', '#1A1A1A');ne semble rien faire?
Tom H
@TomH Je ne suis pas un expert et je ne sais pas trop comment c'est fait "dynamiquement", mais l'exécution Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"})me donne un TypeError me disant que nous ne pouvons pas attribuer à une propriété en lecture seule. Je suppose donc que l'utilisation de la méthode getConfiguration n'est pas la bonne façon de le faire.
acesmndr
3
Cela fonctionne bien grâce à @acesmndr. Comme décrit ici: code.visualstudio.com/docs/getstarted/… , vous pouvez également apporter cette modification au thème spécifique du fichier de paramètres utilisateur comme ceci: "workbench.colorCustomizations": {"[Markdown Editor Dark]": {"statusBar .background ":" # 1A1A1A "," statusBar.noFolderBackground ":" # 212121 "," statusBar.debuggingBackground ":" # 263238 "}},
Walton
réponse vraiment utile @acesmndr
Akhila le
62

1) Je vais gagner 30 minutes de temps à des noobs comme moi - il doit être édité dans le fichier settings.json. Le moyen le plus simple d'accéder est à Fichier -> Préférences -> Paramètres, recherchez "Couleur", choisissez une option "Workbench: Personnalisations de couleurs" -> "Modifier dans settings.json".

2) Cela utilise la solution proposée par "Gama11", mais! Note!: La forme finale du code dans le fichier settings.json devrait être comme ceci - notez les doubles accolades autour 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"
    }
}

Après avoir copié / collé le code ci-dessus, appuyez sur Ctrl + S pour enregistrer les modifications dans «settings.json».

La solution a été adaptée à partir d'ici: https://code.visualstudio.com/api/references/theme-color

J.Paul
la source
21

Étant donné que chaque thème est si différent, vous ne voulez probablement pas apporter de changements comme celui-ci à l'échelle mondiale. Au lieu de cela, spécifiez-les par thème: par exemple:

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

De cette façon, lorsque vous basculez entre vos thèmes préférés, vos personnalisations ne seront pas oubliées et auront un sens dans ce contexte.

shacker
la source
2
Il est également intéressant de l'appliquer aux paramètres de l'espace de travail pour différencier les différents projets, lorsque plusieurs instances VSCode sont ouvertes. On peut aussi changer titleBar.activeBackgroundet titleBar.activeForegroundle rendre encore plus apparent.
Qwerty
Notez que, comme dans les autres réponses, vous souhaitez probablement également définir statusBar.noFolderBackgroundet statusBar.debuggingBackground, sinon, ils ne seront pas affectés.
lapis
3

Il existe à mon avis une solution plus forte et plus robuste que les réponses ci-dessus, et qui permet de changer la couleur de la barre d'état en fonction du fichier sur lequel vous travaillez - elle s'appelle ColorTabs
et vous permet de fournir une liste d'expressions régulières et de changer cela couleur basée sur cela.

Clause de non-responsabilité - J'ai écrit l'extension Enjoy!

orepor
la source
Belle extension - aimerait que le regex fonctionne sur le chemin complet afin que je puisse différencier tous mes projets ouverts VSCode.
cyberwombat
1
C'était en fait sur des chemins complets, mais je l'ai changé en chemins relatifs ... Peut-être qu'il peut être configuré
orepor
1
Ce serait bien de configurer les couleurs des onglets sur la branche au lieu du nom du fichier - si son développement -> vert, qa -> orange, maître -> rouge, autres -> par défaut?
Johan Aspeling le
1
Le gars qui a écrit une extension qui résout le problème a moins de votes que les autres messages qui répètent ce que dit le premier article, bien.
a.anev le
1

Appuyez sur control+shift+plorsque vous ouvrez simplement vscode et tapez open settings(UI)et recherchez window.titleBarStyleet modifiez l'option de nativeà customafin que vous puissiez restaurer la couleur de la barre d'état de whiteà black.

Remarque importante: Cette technique fonctionne pour la mise à jour de la version 1.32 de vscode publiée en février 2019.Assurez-vous que vous avez mis à jour votre vscode vers la dernière version 1.32 ou une version plus récente car elle peut ne pas fonctionner pour les anciennes versions.

Exemple de capture d'écran

Rahul Ahire
la source
7
ne répond pas à la question, sans rapport avec la barre d'état
Gal Margalit
comme Gal dit ci-dessus, la barre de titre n'est pas la barre d'état - la première est en haut, la seconde est en bas
revelt
1

Voici les étapes que j'ai suivies pour définir les couleurs de la barre d'état VS Code sur macOS pour un espace de travail (pas globalement).

Voir | Palette de commandes ... | Recherchez "Ouvrir les paramètres de l'espace de travail (JSON)"

(Cela ouvrira le fichier du projet [nom-projet] .code-workspace.)

Ajoutez les personnalisations de couleur dans la propriété settings.

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

Ceci est vraiment utile lorsque vous avez plusieurs instances de VS Code ouvertes et que vous souhaitez différencier visuellement chaque fenêtre sans avoir à changer le thème global.

HelloWorldDude
la source
0

Vous pouvez changer la couleur en modifiant les extensions:

 "colors":{
        "statusBar.background": "#505050",
    },
utilisateur10753201
la source