Vscode: Status bar background color

+1!
I hate that color and that mysterious smiley face. Hoping there's a way to change the style of status bar.

+1

+1

+1

+1

+1

:-1: -1 I like it lol.

Sorry for the delayed response on this issue. We use blue within the status bar because it's consistent within the family of Visual Studio. We may in the future open this and other things to customization via user style sheets. Hopefully that will address any concerns you have with the color.

+1

@bgashler1 I understand your desire to default to aligning with the VS branding, but the color is extremely distracting for some people. It would be great if you could at least have a user style sheet that would allow us to dim it down, or just set it to always be black. This is about the only thing that is preventing me from committing to your fantastic editor.

+1

+1

Reopening. This will likely be solved by adding the ability to theme UI components https://github.com/Microsoft/vscode/issues/1231

+1

If you look at the editor from a metre away, the only thing you will see is the deeply saturated status bar, which is actually pretty distracting while editing.

Since #1231 is now closed, it would be nice to have a option to tone it down a bit.

@shubhamsizzles there were multiple levels of duplicates, follow the UI theme issue here https://github.com/Microsoft/vscode/issues/3112

If the status bar is what distracts you from developing, maybe you have other issues?

I'm cool with the color. Blue in 'normal' conditions, orange-red in debug mode. Works for me.

If the status bar is what distracts you from developing, maybe you have other issues?

I'll take passive aggressive responses for 100, Alex.

Not passive aggressive.

Out of all the things to complain about in an IDE, the status bar at the bottom? Not bugs, lack of features to assist in more efficient development, language support, better debugging or GIT integration, lack of community, etc... (not saying VSC has these issues) but.. the color of the status bar at the bottom?

@natdm Well, guess what, UI does matter in an IDE/editor. If it were only for the features you mentioned above, we'd all be using vim/emacs

If #459 was implemented, this would be easy to change.

echo ".monaco-workbench>.part.statusbar{background-color:#000;}" | sudo tee -a /usr/share/code-insiders/resources/app/out/vs/workbench/workbench.main.css

My current CSS patch for Code:

/***** PATCHES *****/
.monaco-workbench.hc-black { color: #FFF; background-color: #000; }
.monaco-workbench.hc-black .sidebar .separator  { background-color: #000; border: 1px solid #6FC3DF; }
.monaco-workbench.hc-black input,
.monaco-workbench.hc-black textarea {
    background-color: #000;
}
.monaco-workbench.hc-black .monaco-action-bar .action-item.disabled .action-label.disabled,
.monaco-workbench.hc-black .monaco-action-bar .action-item.disabled .action-label.disabled:hover {
    opacity: 1;
}
.monaco-workbench.hc-black .monaco-action-bar .action-item.disabled .action-label.disabled:before {
    opacity: .4;
}

.monaco-shell { font-family: "Iosevka", "Helvecita", "Inziu Iosevka SC", sans-serif}
.monaco-shell:lang(zh-Hans) { font-family: "Iosevka", "Helvecita", "Inziu Iosevka SC", sans-serif}
.monaco-shell:lang(zh-Hant) { font-family: "Iosevka", "Helvecita", "Inziu Iosevka CL", sans-serif}
.monaco-shell:lang(ja) { font-family: "Iosevka", "Helvecita", "Inziu Iosevka J", sans-serif}
.monaco-workbench > .part > .content {font-size:11px}
.decorationsOverviewRuler{
    clip:rect(2px,13px,1000px,2px);
    margin-top: -2px;
    height:calc(100% + 4px);
}
.monaco-workbench.vs-dark .editor > .content > .editor-center,.monaco-workbench.vs-dark .editor > .content > .editor-right { border-left-color:#0a0a0a}
.monaco-workbench.vs-dark { background: #252525 }
.monaco-editor.vs-dark .git-dirty-modified-diff-glyph { background-color: rgba(250,190,28,0.6) }
.explorer-viewlet .explorer-item-label, .explorer-viewlet .working-files-item-label { color: rgb(190, 190, 190) }
.vs-dark .monaco-tree .monaco-tree-row.selected { color: rgb(210, 210, 210) }
.vs-dark .monaco-tree .monaco-tree-row.focused, .vs-dark .monaco-tree .monaco-tree-row.selected { background: rgb(57,57,56)!important }
.vs-dark .monaco-tree .primary-action-bar,.vs-dark .monaco-tree.focused .monaco-tree-row.focused:not(.highlighted)>.content.actions>.primary-action-bar { background: none!important }
.monaco-workbench.no-workspace>.part.statusbar,.monaco-workbench > .part.statusbar {background: rgb(21,21,21)}
.monaco-workbench > .part.statusbar>.statusbar-item{opacity: 0.6}
.monaco-workbench>.part.panel>.title { border-top-color: rgba(255,255,255,0.1) }
.monaco-editor.vs-dark .git-dirty-modified-diff-glyph { background: none }
.monaco-editor.vs-dark .current-line {border: none}
.monaco-editor.vs-dark .selectionHighlight { background: rgba(173,214,255,0.1)}

.token.haskell { font-feature-settings: "XHS_" 1; }
.token.patel { font-feature-settings: "XPTL" 1; }

.explorer-open-editors .editor-group { visibility: hidden }
.explorer-open-editors .monaco-tree-row.expanded { margin-bottom: -22px }
.explorer-open-editors .monaco-tree-row + .monaco-tree-row.expanded { border-top: 1px solid rgba(255,255,255,0.05); margin-top: -1px }

I have to do this every update. Please support user CSS or UI themeing.

Really ? Distractive ? Are you not able to drive your eyes ? Never seen an issue for an IDE so stupid

@be5invis Where is this file located?

+1 Whilst I personally don't find it a distraction as such - I dislike that when making the editor fullscreen (F11) it's the only thing that stops the editor feeling completely seamless (for lack of a better word). Try loading the Atom editor in dark theme and make that fullscreen. It looks completely seamless. VSCode would look just as good (if not better) if it wasn't for this out of place blue bar at the bottom.

I think it's really hideous in an otherwise attractive UI. It's not that it's blue (although grey would be better), it's too bright. I have seen it looks better on Win 10 than on Mac (I am on Mac). But it's just a status bar, why should it command so much attention?

For those commenting that we should "get a life" instead of complaining about something so "trivial", remember that the UI of an application is something you stare at all day. It should please you as well as assist you. Even a simple way to color it in a theme or other editor pref would be appreciated.

Made an extension (forked from vscode-icons) to patch your custom CSS into Code:

https://github.com/be5invis/vscode-custom-css
https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css

Set the vscode_custom_css.file option to the CSS you’d like to apply and enable it.

vscode-custom-css works like a charm! I patched my CSS with this one here: https://gist.github.com/dominique-mueller/0d9f5aec202804caca4881838685cfc4, in combination with the Oceanic dimmed theme.

I don't mind the default blue, my problem is, that it is blue for all VScode windows.

It would be fine to set the color quickly (right click on status bar??). when working with more than one window of VS code, I could be able to spot the window I need on the gnome task selection

anyway, sometimes the status bar is purple, or orange, which seems have specific meanings

+1

@be5invis Tried your extension and working fantastic. A bit tedious if you are using Insiders, but great nonetheless. Cheers.

Incidentally, is there any way to set icons on the sidebar using font faces, instead of png files (like what Atom does)?

Help -> Toggle Developer Tools -> Console

document.getElementById("workbench.parts.statusbar").style.color = "black"

1. Install and enable https://github.com/be5invis/vscode-custom-css
2. Restart Visual Studio Code as Administrator

3. Create style.css:

   .monaco-workbench.no-workspace>.part.statusbar {
    background-color: #333333 !important;
   }
   

4. File > Preferences > User Settings

   {
      "vscode_custom_css.imports": [
          "file://path_to_css_file/style.css"
      ]
   }
   

5. F1 > Enable Custom CSS and JS
6. Restart Visual Studio Code

Please keep in mind that this extension literally changes the source code of VS Code and you could very well run into issues if you install it. We have seen several cases of extensions like this corrupting the install and the only way to get it back is to reinstall vscode.

@Tyriar With reference to #3112, #1231, #1833, and #76, it sounds like the proper way to achieve this result is through an official API, however it's been on the backlog for 10 months. Is there any update on when this API might get implemented?

@tylercubell I asked the team and we're going to be looking at #3112 as part of this point on our roadmap:

Workbench theming, e.g.,support icons in explorer

It bugs me too as the theme I use has a much darker grey background that makes it look a bit awkward.

Any news on this? the vscode_custom_css hack doesn't seem to be working as 9/2016.

@WilldelaVega777 Well... did you read the comment just above yours?

+1

+1

+1

+10086

+1

Purple is ok, but blue is toooo bright/distracting

+1

You know... there's a reason Github implemented _reactions_...

If we could at least have an option to make it gray, like the rest of the UI. Because I need the info it contains, but it's still distracting me a lot.

+1

+10

+1

I hate that blue color

@bgashler1 Theming would be nice, but a simple gray that relates to the sidebar and tree background would be enough. Possibly behind a flag in preferences?

@pkieltyka Did you even bother to read the comment history?

@tylercubell usually I do, my mistake

+1

+1

Maybe, I say MAYBE, someone could implement an official theming function (or module, whatever) first and report afterwards. It is called 先斬後奏 in China.

Without using plugin, you can just open this fileworkbench.main.css and change .monaco-workbench>.part.statusbar from background:#007acc; to background:#252526; (gray).

Thanks @AlexCasa hack worked, the file was located on linux at /usr/share/code/resources/app/out/vs/workbench/workbench.main.css

I look forward to be able to do this without editing minified css files :hurtrealbad: and being warned vscode install is corrupt https://code.visualstudio.com/docs/supporting/faq#_installation-appears-to-be-corrupt

File Location on windows 7

C:\Program Files (x86)\Microsoft VS Code\resources\app\out\vs\workbenchworkbench.main.css

it would be great to make skinning the entire UI possible

+1

Blue status bar is distracting, please set the default to black (or some variation, so it doesn't stand out).

While we work on enabling custom theming of the UI, we are considering the following changes to the default UI colors.

You'll notice we're thinking of muting the status bar.

None of this is set in stone. Would love to hear what you think. Please use the GitHub reactions

so we can get a feel for how people like this.

@bgashler1 If the gray color is an opt-in, please, give us the ability to customize (and also, the other UI elements: color, size, spacing, typography, etc.)

@be5invis we are working on enabling some UI theming capabilities as well #3112

@bgashler1
For a theme builder, they want the theming capability not being limited in the area of colors. Using CSS is a final solution, though the theming power in Sublime Text works well either.

ps. Please give ability to remove the border of scroll bar.

🙂 +1 These captures looks great!

For OSX users trying to make the change @AlexCasa suggested, the file is located at:

/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css

edit:

I would also recommend adding: .dropdown.send-feedback{display:none} if you want to get rid of the creepy smiley face.

+1

+1

@bgashler1 please remove the awkward smiley, or at least make it less weird. May I suggest something like this instead?
https://image.freepik.com/free-icon/comment-bubble-outline_318-27591.png

@joeshub We are working on enabling people to remove UI by right-clicking on it. @bpasero will it also be possible to do this with the smiley face?

Yeah probably. Note that we cannot (currently) allow users to hide things in the status bar because of the way how extensions can add things there in a very dynamic way.

+1

Until this is implemented as a default feature, if anyone wants to use custom colors for UI elements, as well as disabling the smiley face, I created this extension. It doesn’t require manual css editing, everything is done from user settings. (note : it doesn’t trigger the “unsupported” mode)
(edit: deprecated)

@bentx this uses exactly the same technique as all the other extensions that trigger the unsupported mode because it overrides the CSS and JS files, you just disable the message...

@Tyriar The only other extension I've seen for custom theming was loading a css file, I wanted everything to be manageable from user settings, it's less prompt to error and easier to use. I get the fact that you don't like it, since it "corrupts" the software, but since you're working on a future update regarding this, it shouldn't be a problem for long, right ? Meanwhile if theses extensions allow people to use VS code because they like it (as I do) and be comfortable with a GUI they use 8h+ a day, I think it's fair.

@bentx it's just frustrating that we wasted a bunch of time investigating random crashes and bugs causes by these types of extensions so we added the message as a compromise, now the message is being disabled (for all other extensions too) meaning users of the extension may not even know that what it's doing.

@Tyriar fair point. From my perspective the nagging message is annoying, but I agree on users not knowing what’s going on being a problem, as well as issues with screenshots without the [Unsupported] message. I updated the extension, the integrity check will stay enabled by default, and a setting entry has been added to disable it, for those who knows what they’re doing. There’s also a note on the README regarding user’s responsibility over this.

@bentx thanks 😄 I can't wait to get more customization as well

+1

Any updates on this?

+1 Waiting for status bar color customization.

Check https://github.com/Microsoft/vscode/issues/17608, we will have UI Api, and i will make material theme great again (lel)

So VSCode 1.9 is out, I don't think this issue is addressed with that release, am I correct?

@jchannon right.. :(

.statusbar{background:#xxxxxx} only this way to change status bar color ?

@GaryChangCN That is the only way to change it permanently. There is another method, although it only lasts until you reopen the editor. Using the Developer tools (Help-> Toggle Developer Tools) I manually change the color and remove the smiley. This lasts until I exit out completely out of VSCode, but that isn't a problem for me as normally I would open it at the start of a day and close it at the end.

@Stromwerk Where do you put custom css?

@equinusocio I don't really put any custom css. I use the Developer Tools to change the values.

@Stromwerk Thanks! This is so good now.

@Stromwerk

.statusbar{background:#xxxxxx} only this way to change status bar color ?
@GaryChangCN That is the only way to change it permanently....

Note it would be useful to have the top menubar theme-able as well, just like in the full Visual Studio:
Edit, it looks like there is a separate issue for this already: #16363

@martinsuchan I don't believe that's possible in https://github.com/electron/electron currently.

@Tyriar Atom does.

@equinusocio oh really? Not sure if we have anything tracking this but it should probably be a separate issue.

+1

@Tyriar It's always possible to use custom HTML+CSS menu that will be indistinguishable from the native system menu,

@martinsuchan indistinguishable is a strong word, you need to take into account:

• Look
• Accessibility
• System settings (font, menu scale, etc.)

Plus the menus may differ in minor ways between Windows versions.

+1
Please, can we customise this? The bright blue against a dark colour scheme is extremely distracting!

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

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

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

+1

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:

+1

+1

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

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.

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

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

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

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.

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

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.

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.

+1 for statusbar color change & hiding this weird smiley

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"
}

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

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

@stannynuytkens hmmm I dunno? You running latest version?

@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

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 !

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

Where we will find the documentation about that?

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

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.

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

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

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

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

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

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

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"
    }

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

@stefangabos do the icons not change with statusBarForeground?

it seems to have no effect here

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

@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

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

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

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"
}

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
.

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

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

I ended up with:

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

Preview

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

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

+1

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.