New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Status bar background color #1884

Closed
joe-watkins opened this Issue Jan 8, 2016 · 149 comments

Comments

Projects
None yet
@joe-watkins

joe-watkins commented Jan 8, 2016

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

@Witcher42

This comment has been minimized.

Witcher42 commented Jan 22, 2016

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

@collinksmith

This comment has been minimized.

collinksmith commented Feb 13, 2016

+1

4 similar comments
@zx0721

This comment has been minimized.

zx0721 commented Feb 14, 2016

+1

@RiCoTeRoX

This comment has been minimized.

RiCoTeRoX commented Feb 29, 2016

+1

@wcharczuk

This comment has been minimized.

wcharczuk commented Mar 2, 2016

+1

@artemeff

This comment has been minimized.

artemeff commented Mar 3, 2016

+1

@Nimzozo

This comment has been minimized.

Nimzozo commented Mar 3, 2016

👎 -1 I like it lol.

@bgashler1

This comment has been minimized.

Contributor

bgashler1 commented Mar 23, 2016

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.

@bgashler1 bgashler1 closed this Mar 23, 2016

@ypyf

This comment has been minimized.

ypyf commented Apr 29, 2016

+1

@brendanzab

This comment has been minimized.

brendanzab commented May 8, 2016

@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

This comment has been minimized.

ccknot commented May 11, 2016

+1

1 similar comment
@jmcooper

This comment has been minimized.

jmcooper commented May 25, 2016

+1

@Tyriar Tyriar reopened this May 25, 2016

@Tyriar

This comment has been minimized.

Member

Tyriar commented May 25, 2016

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

@Kenny-Wang

This comment has been minimized.

Kenny-Wang commented Jun 8, 2016

+1

@pastelsky

This comment has been minimized.

pastelsky commented Jun 11, 2016

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

This comment has been minimized.

Member

Tyriar commented Jun 12, 2016

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

@natdm

This comment has been minimized.

natdm commented Jul 2, 2016

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

This comment has been minimized.

wcharczuk commented Jul 2, 2016

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

This comment has been minimized.

natdm commented Jul 2, 2016

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

This comment has been minimized.

pastelsky commented Jul 2, 2016

@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

This comment has been minimized.

glen-84 commented Jul 5, 2016

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

@dnaroid

This comment has been minimized.

dnaroid commented Jul 6, 2016

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

@be5invis

This comment has been minimized.

Member

be5invis commented Jul 8, 2016

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

This comment has been minimized.

rossHell commented Jul 8, 2016

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

@smlombardi

This comment has been minimized.

smlombardi commented Jul 8, 2016

@be5invis Where is this file located?

@dracan

This comment has been minimized.

dracan commented Jul 10, 2016

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

@bpasero bpasero closed this Apr 1, 2017

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

@bpasero bpasero self-assigned this Apr 1, 2017

@HoNooD

This comment has been minimized.

HoNooD commented Apr 3, 2017

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

@Tyriar

This comment has been minimized.

Member

Tyriar commented Apr 3, 2017

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

@simoniz0r

This comment has been minimized.

simoniz0r commented Apr 5, 2017

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

@ghost ghost referenced this issue Apr 6, 2017

Merged

Remove deprecated extension #48

@stannynuytkens

This comment has been minimized.

stannynuytkens commented Apr 6, 2017

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

@bmewburn

This comment has been minimized.

bmewburn commented Apr 6, 2017

Everything is purple for me now :( . Quiet Light theme, status bar with open folder, 1.11.1 on Debian Stretch
screenshot from 2017-04-07 06-13-51

@simoniz0r

This comment has been minimized.

simoniz0r commented Apr 6, 2017

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

This comment has been minimized.

stefangabos commented Apr 21, 2017

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

@Tyriar

This comment has been minimized.

Member

Tyriar commented Apr 21, 2017

@stefangabos do the icons not change with statusBarForeground?

image

@stefangabos

This comment has been minimized.

stefangabos commented Apr 21, 2017

it seems to have no effect here
nm9nnca

@Tyriar

This comment has been minimized.

Member

Tyriar commented Apr 21, 2017

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

@xconverge

This comment has been minimized.

Contributor

xconverge commented Apr 24, 2017

@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

image

@bpasero

This comment has been minimized.

Member

bpasero commented Apr 25, 2017

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

@xconverge

This comment has been minimized.

Contributor

xconverge commented Apr 25, 2017

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

This comment has been minimized.

yuhaozhang commented May 5, 2017

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 comment has been minimized.

stefangabos commented May 6, 2017

@pravdomil

This comment has been minimized.

pravdomil commented May 25, 2017

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

@rogaha

This comment has been minimized.

rogaha commented Jun 6, 2017

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

@rogaha

This comment has been minimized.

rogaha commented Jun 6, 2017

I ended up with:

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

Preview

screen shot 2017-06-06 at 7 51 18 am

@DreadKnight

This comment has been minimized.

DreadKnight commented Jun 17, 2017

@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

This comment has been minimized.

Haroenv commented Jul 6, 2017

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

@hbendalibraham

This comment has been minimized.

hbendalibraham commented Sep 15, 2017

+1

@Tyriar

This comment has been minimized.

Member

Tyriar commented Sep 28, 2017

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.

@Microsoft Microsoft locked and limited conversation to collaborators Sep 28, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.