1

VSCode status bar has many sub-sections like, scope, line/col number, tab size, git branch.

Is there a way to color each sub-section differently so that i can easily focus on right info quickly?

VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
Naveen Rawat
  • 81
  • 2
  • 6
  • See https://code.visualstudio.com/api/references/theme-color for all the things you can modify the color of the status bar, specifically https://code.visualstudio.com/api/references/theme-color#status-bar-colors. – Mark Nov 22 '19 at 00:22

2 Answers2

1

Is there a way to color each sub-section differently so that i can easily focus on right info quickly?

There will be an official and native way with VSCode 1.52 (Nov. 2020)

Statusbar Entry background color API

We propose a new property backgroundColor for StatusBarItem to set the background color of a status bar entry.

Currently only statusBarItem.errorBackground is supported to avoid that the status bar looks too colorful.
We may expand this support to more colors in the future.

Status Error -- https://media.githubusercontent.com/media/microsoft/vscode-docs/vnext/release-notes/images/1_52/status-error.png

The use case for this new API is to enable extensions to indicate error conditions in the Status bar.
For example, the ESLint extension may decide to use this color to alert the user that ESLint has not yet been enabled for a workspace.

This is stabilized with VSCode 1.53 (Jan. 2021) with this comment

I've updated the default color tokens to use a darker color of errorForeground since majority of themes have a much lighter color and to pass color contrast ratio in our dark/light themes:

https://user-images.githubusercontent.com/35271042/100672300-952d4080-3316-11eb-910d-7000856927ad.gif

VSCode 1.59 (Jul. 2021) includes:

Status Bar Warning colors

Status Bar Items that represent warnings can use the newly added colors statusBarItem.warningBackground and statusBarItem.warningForeground.

VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • Is there a similar API to change the color of whole statusBar and not just StatusBarItem? – vincent mathew Mar 06 '22 at 15:20
  • @vincentmathew The status bar itself would be part of the VSCode theme, as illustrated in https://stackoverflow.com/a/62364107/6309. Not sure if an API is needed for this. – VonC Mar 06 '22 at 16:43
0

Yes there is. You can install the Custom CSS and JS Loader extension and create a css file which VS Code takes in. In that file you can set all the color rules you want for each status bar section.

I've recorded a video on it.

André Casal
  • 1,012
  • 1
  • 11
  • 25
  • thanks for response, I use the extension, but maybe I am doing something wrong. I am using following in css to highlight a section in status bar: .monaco-workbench .monaco-grid-view .monaco-grid-branch-node .monaco-split-view2 .split-view-container .split-view-view .split-view-view .part.statusbar .right-items .amos402.scope-bar { background-color: #FFFFFF; } also when I try to run the extension I get "Run VSCode in admin so that changes can be applied". I have made sure to change permission of VScode to myself. – Naveen Rawat Nov 21 '19 at 01:28
  • Oh you just need to follow the instructions on the `Custom CSS and JS Loader` extension page to allow VS Code to modify itself and load the CSS file: https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css – André Casal Nov 21 '19 at 20:58