Status bar background color #1884

joe-watkins · 2016-01-08T18:15:27Z

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

Miaonster · 2016-01-22T09:52:54Z

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

collinksmith · 2016-02-13T01:18:03Z

+1

4781121 · 2016-02-14T05:25:47Z

+1

RiCoTeRoX · 2016-02-29T15:46:02Z

+1

wcharczuk · 2016-03-02T20:34:17Z

+1

artemeff · 2016-03-03T20:54:05Z

+1

Nimzozo · 2016-03-03T22:06:10Z

👎 -1 I like it lol.

bgashler1 · 2016-03-23T19:03:47Z

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 · 2016-04-29T09:18:26Z

+1

brendanzab · 2016-05-08T04:01:33Z

@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 · 2016-05-11T06:36:53Z

+1

jmcooper · 2016-05-25T04:52:06Z

+1

Tyriar · 2016-05-25T20:26:18Z

Reopening. This will likely be solved by adding the ability to theme UI components #1231

Kenny-Wang · 2016-06-08T08:21:49Z

+1

pastelsky · 2016-06-11T08:32:00Z

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 · 2016-06-12T02:19:29Z

@shubhamsizzles there were multiple levels of duplicates, follow the UI theme issue here #3112

natdm · 2016-07-02T02:47:41Z

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 · 2016-07-02T02:55:45Z

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 · 2016-07-02T03:20:22Z

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 · 2016-07-02T03:45:16Z

@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 · 2016-07-05T19:14:17Z

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

dnaroid · 2016-07-06T14:32:20Z

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

be5invis · 2016-07-08T00:21:03Z

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 · 2016-07-08T15:03:36Z

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

smlombardi · 2016-07-08T23:29:52Z

@be5invis Where is this file located?

dracan · 2016-07-10T07:33:54Z

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

honood · 2017-04-03T14:09:18Z

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

Tyriar · 2017-04-03T14:11:35Z

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

simoniz0r · 2017-04-05T23:49:37Z

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

bickycheese · 2017-04-06T18:37:35Z

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

bmewburn · 2017-04-06T20:16:43Z

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

simoniz0r · 2017-04-06T22:10:39Z

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 · 2017-04-21T09:36:31Z

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

Tyriar · 2017-04-21T16:06:34Z

@stefangabos do the icons not change with statusBarForeground?

stefangabos · 2017-04-21T16:31:18Z

it seems to have no effect here

Tyriar · 2017-04-21T16:34:10Z

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

xconverge · 2017-04-24T17:01:09Z

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

VSCodeVim/Vim#1056

bpasero · 2017-04-25T04:50:21Z

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

xconverge · 2017-04-25T05:10:50Z

Ok, related VSCodeVim/Vim#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 · 2017-05-05T21:28:30Z

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 · 2017-05-06T05:06:26Z

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" ***@***.***> 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 <#1884 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAtPLShnXBvyBcatp60Vpd5RR0CXS_zHks5r25SfgaJpZM4HBWq2> .

pravdomil · 2017-05-25T09:54:43Z

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

rogaha · 2017-06-06T14:46:01Z

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

rogaha · 2017-06-06T14:53:42Z

I ended up with:

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

Preview

DreadKnight · 2017-06-17T03:59:39Z

@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 · 2017-07-06T08:11:10Z

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

hbend1li · 2017-09-15T20:09:31Z

+1

Tyriar · 2017-09-28T15:54:34Z

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.

waderyan added the feature-request Request for new features or functionality label Jan 8, 2016

egamma assigned bgashler1 Mar 4, 2016

bgashler1 closed this as completed Mar 23, 2016

Tyriar reopened this May 25, 2016

bpasero closed this as completed Apr 1, 2017

bpasero modified the milestones: March 2017, On Deck Apr 1, 2017

bpasero self-assigned this Apr 1, 2017

bpasero added themes Color theme issues workbench labels Apr 1, 2017

ghost mentioned this issue Apr 6, 2017

Remove deprecated extension viatsko/awesome-vscode#48

Merged

microsoft locked and limited conversation to collaborators Sep 28, 2017

Status bar background color #1884

Status bar background color #1884

Comments

joe-watkins commented Jan 8, 2016

Miaonster commented Jan 22, 2016

collinksmith commented Feb 13, 2016

4781121 commented Feb 14, 2016

RiCoTeRoX commented Feb 29, 2016

wcharczuk commented Mar 2, 2016

artemeff commented Mar 3, 2016

Nimzozo commented Mar 3, 2016

bgashler1 commented Mar 23, 2016

ypyf commented Apr 29, 2016

brendanzab commented May 8, 2016

ccknot commented May 11, 2016

jmcooper commented May 25, 2016

Tyriar commented May 25, 2016 • edited Loading

Kenny-Wang commented Jun 8, 2016

pastelsky commented Jun 11, 2016

Tyriar commented Jun 12, 2016

natdm commented Jul 2, 2016 • edited Loading

wcharczuk commented Jul 2, 2016

natdm commented Jul 2, 2016

pastelsky commented Jul 2, 2016 • edited Loading

glen-84 commented Jul 5, 2016

dnaroid commented Jul 6, 2016

be5invis commented Jul 8, 2016

rossHell commented Jul 8, 2016

smlombardi commented Jul 8, 2016

dracan commented Jul 10, 2016

honood commented Apr 3, 2017

Tyriar commented Apr 3, 2017

simoniz0r commented Apr 5, 2017

bickycheese commented Apr 6, 2017

bmewburn commented Apr 6, 2017 • edited Loading

simoniz0r commented Apr 6, 2017

stefangabos commented Apr 21, 2017

Tyriar commented Apr 21, 2017

stefangabos commented Apr 21, 2017

Tyriar commented Apr 21, 2017

xconverge commented Apr 24, 2017

bpasero commented Apr 25, 2017

xconverge commented Apr 25, 2017 • edited Loading

yuhaozhang commented May 5, 2017 • edited Loading

stefangabos commented May 6, 2017 via email

pravdomil commented May 25, 2017

rogaha commented Jun 6, 2017

rogaha commented Jun 6, 2017

Preview

DreadKnight commented Jun 17, 2017

Haroenv commented Jul 6, 2017

hbend1li commented Sep 15, 2017

Tyriar commented Sep 28, 2017 • edited Loading

Tyriar commented May 25, 2016 •

edited

Loading

natdm commented Jul 2, 2016 •

edited

Loading

pastelsky commented Jul 2, 2016 •

edited

Loading

bmewburn commented Apr 6, 2017 •

edited

Loading

xconverge commented Apr 25, 2017 •

edited

Loading

yuhaozhang commented May 5, 2017 •

edited

Loading

Tyriar commented Sep 28, 2017 •

edited

Loading