Vscode: Color update: title, activity bar, status, tabs, panel

[bpasero]

Changes:

• custom title bar on mac to get same color as activity bar and status bar
• status bar to get the same color as activity bar and status bar (unless debugging, empty workspace)
• activity bar gets a VS-Light theme coloring
• less borders around tabs
• panel to get same background color as viewlet and a slight border to the left as separator to distinguish from the editor area

Try Out:

• Open settings and configure "update.channel": "none" to disable automatic updates
• Mac: Download
• Linux: Download
• Windows: Download

Dark Theme

Light Theme

HC Theme

[kumarharsh]

+1, although I personally liked the blue band at the bottom.

[jrieken]

:-1: for the light theme. too much grey

[bpasero]

Here is what works well for me

• less borders for tabs (across all themes)
• background color of panel in dark theme being same as sidebar
• I am not so much opposed anymore to the title bar color being the same as activity bar, though I like the current color better. I am not sure about the added value of having both parts use the same background

And here is what does not:

• overall light theme does not work for me
• I really like our blue status bar color because for me it is a way of recognise the VS brand and distinguish from other editors

[joaomoreno]

I pretty much subscribe to @bpasero's opinion.

[kumarharsh]

Atom's light theme was really good if i remember correctly. More 'soothing'.

[isidorn]

Same as @bpasero with the exception that I would prefer the panel to be the background color of the editor due to:

• It is an editor-like content most of the time and it should be as similar to the editor as possible. We already got a comment that it shuold be indented the same way as the editor so it is easier for the eye to swtich from one to the other (same holds for color)
• If it is the viewlet color then the background is not customizable through themes, and that just looks bad in some crazy themes

Also instead of changing the status bar color we should make that configurable via themes.
If we change the status bar we will piss of some happy users.

[stevencl]

I think removing the lines from the tabs is a good change and removes some subtle distractions, although I would like to see what it looks like with multiple tab groups, especially in horizontal layout.

I agree with the comments about the dark borders with the light theme but I wonder if the rest of the proposal should just be something that people can configure or set with a theme? For example, @isidorn makes a good case for why he would like the panel background to be the same colour as the editor background but personally I would like it to be different. Many other editors and IDEs have an integrated terminal UI that has a different background to the editor and I like the feeling of being somewhere 'different' when I switch between the terminal and the editor.

[bpasero]

@stevencl the purpose of the download links was so that you can play around with these changes 👍

[stevencl]

D'oh! Completely missed that.

I can confirm that I like the way that horizontal layout looks :-)

[bgse]

Dark theme looks pretty slick this way, and frankly I like the status bar change on the light theme as well, gives the editor a more polished and streamlined look if you ask me.

It deviates from the Visual Studio brand, but not by that much imho. The VS 'brand' thing for me (in this case) is primarily the activity bar showing the mode, not a specific color. Or to put it another way, the brand is in specific little details in functionality, not theming details.

Agree with @isidorn though that this should be open to theming, people can be very picky about stuff like this, honestly I'll probably be a bit bummed myself if the dark and light themes don't land in the next update exactly as shown now that I've seen it ;-)

[bgashler1]

Thanks for your feedback on the light theme.

Here are some proposed revisions.

(@bpasero I updated the PPT deck I sent earlier with the new color values).

NEW

vs. OLD

I lightened up the colors for the Activity Bar, statusbar and titlebar so that the editor area draws the eyes more than anything else.

[bpasero]

@bgashler1 I am not seeing a new color for the activity bar background (and title, status) in light theme so I went ahead and copied it out of the deck. Please verify:

• E6E6E6 for background of activity bar, title and status in light theme
• SVGs get a fill of #000000 in light theme

[joaomoreno]

@bgashler1 It does seem to get better, but there's still something off about the whole big picture. The more I think about it, the more I come to the conclusion that it's the status bar. It just doesn't feel right when it _blends in_ with the rest.

Also, it's hard to get a feeling for it with the screenshots, builds would be much better. 👍

[bpasero]

I ran new builds with latest changes:

• Mac
• Linux
• Windows

[joaomoreno]

Having tried out the light theme in those builds:

• The hover feedbacks from the status bar are all gone.
• The status bar background colour doesn't seem to be the same as the activity bar
• I have the overall feeling I'm looking into the _negative_ of the original design. This is especially noticeable in the status and activity bars' icons.

It does feel better than just looking at the screenshots though.

[isidorn]

Tried it out and overall I do not feel like this is an improvement of the current design. Some details:

• Git status in the status bar now feels brokenly positioned because of all the grayness - it feels like it should be central beneath the activity bar
• Lot's of notifications in light blue seem like they are screaming for attention now. Before they blended more nicely due to blue status bar and now since everything is gray the blue is very strong. Example: open workspace with no git and open git viewlet
• I like the black activity bar icons - they look smother then our current gray ones
• Feedback from before: it feels like everything is in the frame. Panels feel to me like they should be the color of the editor - more details in the comment above

Bottom line: changing the default theme will be a shock for a lot of users. Even in the case that we improve the looks which IMHO is not the case now. Due to that we should just leave the default as it is and invest in making the workbench themable.

[bgashler1]

Per our discussion today, we will not modify the default themes, but we will ship these modifications as UI themes later on and monitor feedback. See #16245