Is there a way to color code vscode status bar

Question

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?

Answer 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.

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:

---

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.

Answer 2

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.