Status bar background color

[joe-watkins]

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

[anh072]

I hate that blue color

[smlombardi]

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

[tylercubell]

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

[pkieltyka]

@tylercubell usually I do, my mistake

[ibuisic]

+1

[dfucci]

+1

[be5invis]

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

[AlexCasa]

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

[impaler]

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

[rgfx]

File Location on windows 7

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

[geddski]

it would be great to make skinning the entire UI possible

[it6]

+1

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

[bgashler1]

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.

[be5invis]

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

[bgashler1]

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

[be5invis]

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

[faustinoaq]

🙂 +1 These captures looks great!

[mathisonian]

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.

[qcol]

+1

[owenso]

+1

[joeshub]

@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

[bgashler1]

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

[bpasero]

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.

[firstrow]

+1

[ghost]

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)

[Tyriar]

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

[ghost]

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

[Tyriar]

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

[ghost]

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

[Tyriar]

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

[kaleo211]

+1

[cor]

Any updates on this?

[skillup]

+1 Waiting for status bar color customization.

[equinusocio]

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

[jchannon]

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

[equinusocio]

@jchannon right.. :(

[GaryChangCN]

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

[Stromwerk]

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

[equinusocio]

@Stromwerk Where do you put custom css?

[Stromwerk]

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

[skillup]

@Stromwerk Thanks! This is so good now.

[equinusocio]

@Stromwerk

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

[martinsuchan]

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

[Tyriar]

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

[equinusocio]

@Tyriar Atom does.

[Tyriar]

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

[sheldonrong]

+1

[martinsuchan]

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

[Tyriar]

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

[nomad-software]

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