Visual Studio Code status bar color

Question

Visual Studio Code's default status bar color is blue, and I find it quite distracting. I used this extension to change the color, but it has stopped working after the 1.10.2 update.

For people recently had same question, check a humble try of my own on the default theme colors change + integrating Material Icon theme installation https://github.com/mostafero/vscode-ubuntu-theme — Mostav, Dec 14 '20 at 19:28
Personally, I didn't even want to customize it, I just wanted to find out the _meaning_ of the colors. Other than the API reference, the only place they seem to document that purple is the "no folder" color is [a "Note:" box in the Debugging section](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations), long _after_ which they also mention in passing that orange means debugging. But it's never presented in one place, or given a finite number of states (3). Feels like info that could live somewhere [HERE](https://code.visualstudio.com/docs/getstarted/userinterface). — FeRD, Jan 18 '22 at 13:50
For how to turn off a change in status bar color when debugging, see https://stackoverflow.com/a/74779671/836330. Set `debug.enableStatusBarColor` to `false`. — Mark, Dec 29 '22 at 17:18

score 287 · Answer 1 · edited Aug 25 '17 at 11:23

287

You can change the colour of the statusbar by editing the user settings by adding these lines of code in it:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
}

edited Aug 25 '17 at 11:23

Gama11

31,714
9
78
100

answered Apr 17 '17 at 06:13

acesmndr

8,137
3
23
28

can this be done dynamically? `const config2 = vscode.workspace.getConfiguration('workbench.colorCustomizations.statusBar');` `config2.update('background', '#1A1A1A');` doesn't seem to do anything? – Tom Jan 02 '18 at 08:52
@TomH I'm no expert and not quite sure how it's done "dynamically" but running `Object.assign(vscode.workspace.getConfiguration('workbench.colorCustomizations'), { "statusBar.background" : "#00FF00"})` is giving me a TypeError telling me that we can't assign to a read only property. So I guess using the getConfiguration method isn't the correct way to do it. – acesmndr Jan 08 '18 at 11:15
3

This works well thanks @acesmndr. As described here: https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme, you can also make this change to the user settings file theme specific like this: "workbench.colorCustomizations": { "[Markdown Editor Dark]": { "statusBar.background" : "#1A1A1A", "statusBar.noFolderBackground" : "#212121", "statusBar.debuggingBackground": "#263238" } }, – Walton Oct 11 '18 at 09:42
1

really helpful answer @acesmndr – Akhila Jul 26 '20 at 19:57
But how do I make it automatically switch back to dark when I change the theme to dark? UPD: Never mind, I just saw shacker's answer. – tolache Aug 02 '22 at 08:02

score 126 · Answer 2 · edited Apr 08 '22 at 13:57

I am going to save 30 minutes of time to noobs like me - it has to be edited in the settings.json file. The easiest way to access it is menu command File → Preferences → Settings, search for "Color", choose an option "Workbench: Color Customizations" → "Edit in settings.json".

This uses the solution proposed by Gama11, but note:
the final form of the code in the settings.json file should be like this - note the double curly braces around "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"
     }
 }

After you copy/pasted code above, press Ctrl + S to save the changes to 'settings.json'.

The solution has been adapted from Status Bar colors.

Thank you! Having a link to edit the settings file directly within Visual Code is a nice time saver. Also the themes are easy to change from that color search in settings as well. Visual Code is highly customizable, but getting to those settings are a bit awkward for me compared to other editors I've used. — John Suit, Jun 07 '21 at 22:53

score 33 · Answer 3 · answered May 01 '19 at 06:49

33

Since every theme is so different, you probably don't want to make changes like this globally. Instead, specify them on a per-theme basis: e.g.:

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

That way when you switch between your favorite themes, your customizations of them will not be forgotten, and will make sense in that context.

answered May 01 '19 at 06:49

shacker

14,712
8
89
89

3

It's also great to apply this to workspace settings to differentiate between different projects, when multiple VSCode instances are open. One can also change `titleBar.activeBackground` and `titleBar.activeForeground` to make it even more apparent. – Qwerty Aug 02 '19 at 12:31
1

Note that, like in the other answers, you probably also want to set `statusBar.noFolderBackground` and `statusBar.debuggingBackground`, otherwise they won't be affected. – lapis Oct 12 '19 at 09:24

HelloWorldDude · Answer 4 · 2023-07-07T17:45:02.863

These are the steps I took to set the Visual Studio Code status bar colors on macOS for a workspace (not globally).

Menu View → Command Palette... → search for "Open Workspace Settings (JSON)".

(This will open the project [project-name].code-workspace file.)

Add the color customizations in the settings property.

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

This is really useful when you have multiple instances of Visual Studio Code open and want to visually differentiate each window without having to change the global theme.

If you do not have a Workspace defined, Visual Studio Code will open .vscode/settings.json on command "Open Workspace Settings (JSON)".

If this is the case, you can just enter the workbench customizations directly:

{
   "workbench.colorCustomizations": {
        "statusBar.background": "#938e04",
        "statusBar.foreground": "#ffffff"
    }
}

score 5 · Answer 5 · edited Apr 08 '22 at 13:51

5

There is a stronger, more robust solution than the previous answers in my opinion, and that’s to change the status bar color based on the file you're working on—it’s called ColorTabs, and it allows you to provide a list of regular expressions and change that color based on that.

_{Disclaimer - I wrote the extension.}

edited Apr 08 '22 at 13:51

Peter Mortensen

30,738
21
105
131

answered Oct 05 '19 at 11:23

orepor

905
2
13
23

1

Nice extension - would love to have the regex work on full path so I can differentiate between all my VSCode opened projects. – cyberwombat Nov 03 '19 at 18:34
1

It actually was on full paths, but I changed it to relative paths...Maybe it can be configured – orepor Nov 04 '19 at 07:34
2

This would be nice to configure tab colours on the branch instead of the file name - if its develop -> green, qa -> orange, master -> red, others -> default? – Johan Aspeling Jan 07 '20 at 10:18
1

The guy who wrote an extention that solves the problem has less votes than other posts which repeat what the top post says, nice. – a.anev Jul 17 '20 at 20:28

score 3 · Answer 6 · edited Apr 08 '22 at 14:05

I just registered so I can't comment directly on HelloWorldDude's reply, but that's exactly what I was looking for: Different colors per workspace to quickly differentiate between Visual Studio Code windows.

I'm on Windows 10 with Visual Studio Code 1.63.1 and the per-project setting is located in the .vscode folder of the project root, and the file itself is settings.json.

The syntax that worked for me does not include "folders" and "settings", but just the contents of the settings block, like so:

{
  "workbench.colorCustomizations": {
      "statusBar.background": "#7c0101",
      "statusBar.foreground": "#ffffff"
  }


}

Related: *[Why do I need 50 reputation to comment? What can I do instead?](https://meta.stackexchange.com/questions/214173/)*. — Peter Mortensen, Apr 08 '22 at 14:06

score 2 · Answer 7 · edited Dec 06 '18 at 07:05

2

You can change the color by edit extensions:

 "colors":{
        "statusBar.background": "#505050",
    },

edited Dec 06 '18 at 07:05

Eric Aya

69,473
35
181
253

answered Dec 06 '18 at 06:50

user10753201

31
1

What do you mean by *"by edit extensions"?* What menu command? What file? Where? – Peter Mortensen Apr 08 '22 at 13:33
It may be a reference to file "settings.json". – Peter Mortensen Apr 08 '22 at 13:40
This is superseded by [J.Paul's answer](https://stackoverflow.com/questions/42780975/visual-studio-code-status-bar-color/54382962#54382962). It contains all the instructions and other information. – Peter Mortensen Apr 08 '22 at 13:40

score 1 · Answer 8 · edited Apr 08 '22 at 13:57

1

There is one more extension available, Peacock, to change the color of the workplace. It allows you to choose a different color for every Visual Studio Code instance.

edited Apr 08 '22 at 13:57

Peter Mortensen

30,738
21
105
131

answered Feb 06 '20 at 13:28

Maxim Isaev

11
4

score 0 · Answer 9 · edited Apr 08 '22 at 14:03

0

If you are using the Vim plugin, the best way to change status bar color depending on mode is to go to settings, search for "status bar color" and check "allow Visual Studio Code to change color based on mode"

Here is a snapshot of the Vim plugin status color control:

edited Apr 08 '22 at 14:03

Peter Mortensen

30,738
21
105
131

answered Jan 20 '21 at 08:19

Tarik Waleed

97
1
8

VonC · Answer 10 · 2022-12-29T18:03:26.050

0

Visual Studio 1.75 (Jan. 2023) will propose one more option, from issue 155294:

I am becoming a power-user of our debugger (yeah, finally).
This means that most of my "VS Code time" I have some kind of debuggee running or connected.

So, I am seeing the ugly orange debug status bar treatment a lot.
I don't like it and for me it's enough to see the activitybar icon decorations.

Instead of setting statusBar.debuggingBackground in workbench.colorCustomizations, there is now (PR 168513) a dedicated setting:

debug.enableStatusBarColor: Color status bar when debugger is active

This is available in VSCode insider today.

This is also mentioned in "How to prevent status bar colour in visual studio code from changing to orange on running any java file" by Mark.

edited Dec 29 '22 at 18:03

answered Dec 29 '22 at 07:42

VonC

1,262,500
529
4,410
5,250

Same: https://stackoverflow.com/a/74779671/836330 – Mark Dec 29 '22 at 17:17
@Mark Thank you for the update. I have cross-referenced your answer in mine. – VonC Dec 29 '22 at 18:03

score -1 · Answer 11 · edited Apr 08 '22 at 13:43

-1

Press Control + Shift + P when you just open Visual Studio Code and type "open settings(UI)" and search for window.titleBarStyle and change the option from native to custom so that you can restore the colour of status bar from white to black.

Important note: This technique works for update version 1.32 of Visual Studio Code released in February 2019. Make sure that you have updated your Visual Studio Code to the latest version 1.32 or further latest ones as it may not work for the older versions.

edited Apr 08 '22 at 13:43

Peter Mortensen

30,738
21
105
131

answered Mar 11 '19 at 21:39

Rahul Ahire

685
11
28

9

does not answer the question, unrelated to status bar – Gal Margalit Jul 08 '19 at 13:41
like Gal said above, _title bar_ is not _status bar_ — former is at the top, latter is at the bottom – revelt Dec 28 '19 at 17:24

Visual Studio Code status bar color

11 Answers11

Linked