Status bar background color

[joe-watkins]

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

[Miaonster]

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

[collinksmith]

+1

[4781121]

+1

[RiCoTeRoX]

+1

[wcharczuk]

+1

[artemeff]

+1

[Nimzozo]

:-1: -1 I like it lol.

[bgashler1]

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.

[ypyf]

+1

[brendanzab]

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

[ccknot]

+1

[jmcooper]

+1

[Tyriar]

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

[Kenny-Wang]

+1

[pastelsky]

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.

[Tyriar]

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

[natdm]

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.

[wcharczuk]

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

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

[natdm]

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?

[pastelsky]

@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

[glen-84]

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

[dnaroid]

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

[be5invis]

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.

[rossHell]

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

[smlombardi]

@be5invis Where is this file located?

[dracan]

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

[smlombardi]

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.

[be5invis]

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.

[dominique-mueller]

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.

[heidricha]

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

[felippem]

+1

[nfantone]

@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)?

[sysrpl]

Help -> Toggle Developer Tools -> Console

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

[tylercubell]

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

[Tyriar]

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.

[tylercubell]

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

[Tyriar]

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

[WilldelaVega777]

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

[nfantone]

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

[peerapats]

+1

[ahxt]

+1

[kuangluvasuka]

+1

[etoah]

+10086

[csalv5]

+1

Purple is ok, but blue is toooo bright/distracting

[etoah]

+1

[nfantone]

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

[tinylucid]

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.

[mistermark]

+1

[pkieltyka]

+10

[jaquinonesg]

+1