Status bar background color

[joe-watkins]

The blue color is very distracting.. a way to change the color of that would be great!

[max-orhai]

+1 I find bentx's vscode-custom-theme extension to be an acceptable workaround for now, but it would be really nice to see this as an official feature.

[xiaofengqinyu]

you can change it with the following steps:

1. ctrl+shift+p and input develop tool open develop tool
2. choose element focus on status bar and find the css style
3. edit the vscode css file(workbench.main.css) change the style
4. save the file and reload your vscode

[chrisjimallen]

Agree the blue is quite loud, but anyone who hates a :) needs to 'go home and rethink their life'

[steph643]

+1

[rfgamaral]

I'm using CustomCSS and JS Loader to customize VS Code UI similar to So​Da​Reloaded (dark variant) Subliminal Text theme.

There's still a lot of things missing, a lot of things I want to do and customize (some I don't think are even possible) but for now, the status bar is one of those things that I had to "fix".

Nothing fancy, but for anyone interested, check it out here.

Preview:

[RohovDmytro]

+1

[jshrssll]

+1

[simoniz0r]

I made a script based on https://github.com/Microsoft/vscode/issues/1884#issuecomment-230790242 because I got tired of editing the file to reset the color every time lol... Script Link

[bickycheese]

ctrl+k + ctrl+z fixes the issue for me (zen mode, read: distraction free...) but it would indeed be nice to add customization to more UI parts.

[bn-l]

"We are working on enabling people to remove UI by right-clicking on it."

I.e: I need to personally grease a 1000 poles at M$ to get this very small change done as the marketing department (who are 1 step away from full blown psychopathy) want it to remain.

[bickycheese]

@blueredcat, why removing it? Styling or autohide or something will do, no?

[Brunorccrx]

Like someone said already, just a gray/black option would be nice, this blue bar looks so odd on dark theme.

[cecilemuller]

I think the cleanest way to handle it would be exposing the settings to the theme, that way theme creators can provide color settings that fits the theme.

[equinusocio]

Check https://github.com/Microsoft/vscode/issues/21923

[cyphunk]

Installed from latest git source branch. They changed the color from blue to purple. (or is this the default for development versions?)

I tried some of the quick css hacks mentioned in this thread. Nothing seemed to work quickly. Now spent at least an hour or two on this horrible blue bar. Astonished that this bluebar was supposedly a "standard" accross all visual studio tools. I'll switch back to a different editor and check vscode in another years time.

[jwigley]

Nothing seemed to work quickly. Now spent at least an hour or two on this horrible blue bar.

• Install Custom Theme for Visual Studio
• Set theme.statusbar.background.color in your preferences.
• Done.

[bongraster]

+1 for statusbar color change & hiding this weird smiley

[joe-watkins]

Building upon @jwigley 's great recommendation, here's a detailed how-to:

1. Open Extensions: Mac: Shift+command+X, Windows: Ctrl+Shift+X, Linux: Ctrl+Shift+X
2. Search for Custom theme for Visual Studio Code and install that extension
3. Visit preferences: Mac: Command+, Windows/Linux: File > Preferences > Settings
4. In the right pane add "theme.statusbar.background.color": "#161616" (make hex your favorite color) e.g.

{
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    "workbench.welcome.enabled": false,
    "theme.statusbar.background.color": "#161616"
}

5. Show All Commands: Mac: Shift+command+P, Windows: Ctrl+Shift+P, Linux: Ctrl+Shift+P
6. Search for Theme and activate Custom theme: Apply

[bickycheese]

@joe-watkins Running the contributed command:'theme.apply' failed.

[joe-watkins]

@stannynuytkens hmmm I dunno? You running latest version?

[ghost]

@stannynuytkens make sure you're running as administrator on windows or have correct privileges on osx/linux, if still not working please open an issue I'll look into it

[ghost]

It looks like this ticket could be closed soon, by looking at the latest sources, that's good news :)

export const STATUS_BAR_BACKGROUND = registerColor('statusBarBackground', {
    dark: '#007ACC',
    light: '#007ACC',
    hc: null
}, nls.localize('statusBarBackground', "Standard status bar background color. The status bar is shown in the bottom of the window"));

That look like the theming capability we've been waiting for, go vscode team !

[Tyriar]

That look like the theming capability we've been waiting for, go vscode team !

Yes the start of workbench theming support will be part of the March update (1.11). You will be able to do this very soon, see https://github.com/Microsoft/vscode/issues/3112#issuecomment-289483970

[equinusocio]

Where we will find the documentation about that?

[Tyriar]

@equinusocio there will probably be some documentation in the release notes, most will likely be in 1.12.

[nojvek]

I find the whole argument of blue visual studio absurd. The blue would matter if there there was a vscode/visual studio logo , there is none in the status bar. Its not like users will get confused about what IDE they are using because the blue is changed to a subtle grey like what @bgashler1 has posted.

Simply put, the blue is so strong that it pulls attention away from code users are writing. This is literally a user experience issue. Please please please treat it as such.

[bpasero]

With our work on workbench theming (release notes) you can now customise the color of the statusbar background. The relevant keys are:

• statusBarBackground: blue by default
• statusBarNoFolderBackground: purple by default
• statusBarDebuggingBackground: orange by default

Here is an example of how to change this via settings:

"workbench.experimental.colorCustomizations": {
    "statusBarBackground": "#00EECC",
    "statusBarNoFolderBackground": "#CCEE00",
    "statusBarDebuggingBackground": "#CCFFFF"
}

It is likely that the name of the setting will change and we also think the color names are not final yet.

As for being able to hide the smiley button in the status bar, I suggest to continue via https://github.com/Microsoft/vscode/issues/7893

Note: there are still a lot of colors missing from workbench theming support (continues via https://github.com/Microsoft/vscode/issues/3112) and there is still some issues with coloring icons in the status bar (continues via https://github.com/Microsoft/vscode/issues/23526).

[honood]

I like the original blue statusbar, however, the lastest relase uses purple instead. I hate purple.

[Tyriar]

@HoNooD the status bar has always been purple when no folder is opened.

[simoniz0r]

Woo!! This update is really nice! Thank you guys so much; the ability to theme the entire workbench is great!

[bickycheese]

Oh the irony, lol! (hint: titlebar color) Thanks guys, looking forward to theme the h*ll out of vscode!

[bmewburn]

Everything is purple for me now :( . Quiet Light theme, status bar with open folder, 1.11.1 on Debian Stretch

[simoniz0r]

That would be the theme. Define the color of your status bar in the settings with the new experimental workbench setting.

"workbench.experimental.colorCustomizations": {
        "statusBarBackground" : "#1A1A1A",
        "statusBarNoFolderBackground" : "#0A0A0D",
        "statusBarDebuggingBackground": "#511f1f"
    }

[stefangabos]

lovely! now how to change the color of the white icons? :)

[Tyriar]

@stefangabos do the icons not change with statusBarForeground?

[stefangabos]

it seems to have no effect here

[Tyriar]

@stefangabos if you're on Insiders, I'd file a bug. Otherwise testing in Insiders might be a good idea.

[xconverge]

@bpasero I know that this is a stretch but are there any plans to expose any of this through the extension API? Currently I am modifying settings on the fly and it seems like a bad hack...

Sorry for using an experimental feature right away :/ there was high demand..

https://github.com/VSCodeVim/Vim/issues/1056

[bpasero]

Currently no plans to expose this as API other than changing settings directly.

[xconverge]

Ok, related https://github.com/VSCodeVim/Vim/issues/1565

I will leave this open, unfortunately it means it won't work too well for the extension ever then for performance reasons as is but atleast it works OK

[yuhaozhang]

For those of you who has tried the above solution but found it not working, this has now been changed to:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#0A0A0D",
    "statusBar.debuggingBackground": "#511f1f"
}

[stefangabos]

This is working as expected in the new release. It can be closed as far as I'm concerned. Thanks!

On May 6, 2017 00:29, "Yuhao Zhang" notifications@github.com wrote:

For those of you who has tried the above solution but found it not working, this has not been changed to:

"workbench.colorCustomizations": { "statusBar.background" : "#1A1A1A", "statusBar.noFolderBackground" : "#0A0A0D", "statusBar.debuggingBackground": "#511f1f" }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Microsoft/vscode/issues/1884#issuecomment-299580210, or mute the thread https://github.com/notifications/unsubscribe-auth/AAtPLShnXBvyBcatp60Vpd5RR0CXS_zHks5r25SfgaJpZM4HBWq2 .

[pravdomil]

@bgashler1 it's not consistent it's distracting, you Microsoft

[rogaha]

👍 thanks for the tip @yuhaozhang! It worked like a charm!

[rogaha]

I ended up with:

"workbench.colorCustomizations": 
    {
        "statusBar.background" : "#303030",
        "statusBar.noFolderBackground" : "#222225",
        "statusBar.debuggingBackground": "#511f1f"
    }

Preview

[DreadKnight]

@rogaha Awesome, that did it for me, thanks! First time I'm using Visual Studio and that blue bar was distracting me big time, almost ditched this editor and went for the competition. I don't care about the whole family of Visual Studio editors if they want to stay flawed, but I must say awful consistency by design is bad.

[Haroenv]

@bpasero could you close and lock this thread to make it clear that a solution is possible now with workbench.colorCustomizations? Thanks!

[hbend1li]

+1

[Tyriar]

Themes can now set the status bar background. You can also override the colors by adding the following to your settings.json file:

"workbench.colorCustomizations": 
{
  "statusBar.background" : "#303030",
  "statusBar.noFolderBackground" : "#222225",
  "statusBar.debuggingBackground": "#511f1f"
}

Locking as this feature has been in since v1.11 and so the solution doesn't get buried.