Vscode: Monokai and monokai dark backgrounds (+workbench colors) have changed

[Tyriar]

The background colors have changed from the standard Monokai, we should change them back to the standard background and adjust workbench colors accordingly as Monokai is a very popular theme with clearly defined colors that users expect.

https://github.com/Microsoft/vscode/pull/25599

fyi @bpasero

[Tyriar]

/cc @cleidigh

[cleidigh]

@Tyriar
Totally agree - accident and oversight
I was going to continue to add to the theme , but I'm also happy to fix myself
just let me know

[Tyriar]

@cleidigh no worries :smiley: I'll do a pass through first as we're so close to the release.

[cleidigh]

@Tyriar
Cool sorry about that
I will do some pre- consulting when adding more UI colors for May

[Tyriar]

Got regular Monokai looking pretty nice so far:

Added a bunch of stuff too:

• Editor widget
• Peek
• Git diff
• Terminal
• Bunch of borders
• Debug toolbar

[Tyriar]

Pushed the Monokai changes to release/1.12

[cleidigh]

oh well, I guess my workbench choices wiffed...

[bpasero]

@Tyriar your latest changes make the theme broken in some places. Examples:

Notifications:

Section Header bleeding into background:

You should also define colors for:

• titleBar.activeBackground (used on macOS for the custom title)
• editorGroup.background (used when you drag an editor group left or right when the background shines through)

I must also admit that the new selection color is very strong:

PS: what about "Monokai Dimmed"?

[bpasero]

@Tyriar here is my proposal based on the work from @cleidigh with some color tweaks:

"colors": {
    "dropdown.background": "#383852",
    "list.activeSelectionBackground": "#383852",
    "list.focusBackground": "#425370",
    "list.inactiveSelectionBackground": "#23324e",
    "list.hoverBackground": "#005070",
    "list.highlightForeground": "#e58520",
    "button.background": "#1e4456",
    "editor.background": "#202025",
    "editor.foreground": "#f8f8f2",
    "editor.selectionBackground": "#49483e",
    "editor.lineHighlightBackground": "#303030",
    "editorCursor.foreground": "#c07020",
    "editorWhitespace.foreground": "#383880",
    "editorIndentGuide.background": "#505037",
    "editorGroupHeader.tabsBackground": "#222228",
    "editorGroup.background": "#1a1a1e",
    "tab.inactiveBackground": "#333340",
    "tab.border": "#000030",
    "peekView.border": "#3655b5",
    "panelTitle.activeForeground": "#ddffff",
    "statusBar.background": "#354550",
    "statusBar.debuggingBackground": "#354550",
    "statusBar.noFolderBackground": "#354550",
    "titleBar.activeBackground": "#354550",
    "activityBar.background": "#292935",
    "activityBarBadge.foreground": "#ffffff",
    "activityBarBadge.background": "#3655b5",
    "sideBar.background": "#232327",
    "sideBarSectionHeader.background": "#424250",
    "pickerGroup.foreground": "#77a5b0",
    "terminal.ansiWhite": "#ddffff",
    "notification.background": "#292935"
}

We talked through this in the standup and feel that we should not force strong colors to the workbench for the monokai theme. We can always release a Monokai theme as extension to give this a try.

[Tyriar]

@bpasero thanks for pointing that out, I actually had a chat with Kai about the strong accent color yesterday. Will look into alternatives today.

Section Header bleeding into background

This was actually intentional as I was using a limited palette.

I was going to get to Monokai Dimmed this morning.

[Tyriar]

Changed to use the much more muted contrast border color #75715E:

Also added inputOption.activeBorder.

[Tyriar]

@cleidigh it's not that they were bad, the theme actually looked pretty good. Unfortunately the background color changed which changes the feel of the already established theme.

[Tyriar]

Also covered input validation:

[Tyriar]

For dimmed I restored the background color and removed the saturation from the blue tinted colors so @cleidigh's work is preserved for the most part. As a result it's a little lighter than before but looks fairly consistent. Also added inputOption.activeBorder and focusBorder keys to use the accent blue #3655b5

@cleidigh please feel free to iterate on this if you want :smiley:

[Tyriar]

All fixes pushed to master and release/1.12, should be good to go :+1:

[cleidigh]

@Tyriar
sounds good and looks good (I would put a thumbs up here but I have no idea how to do it ;-)
I think I needed a better understanding of the current theme goals
more than anything it's practically impossible to work with colors by voice (no mouse picking)
I think I'll focus on helping finish the theming code ;-)
thanks for patching it up

[Tyriar]

@cleidigh basically the goal is that they should just look good and consistent, without drastically changing the "feel" of the theme (keep the background, try to reuse existing colors).

The work remaining on Monokai Dimmed is filling in a bunch of keys where it may not look right. For example many colors will fallback to the default dark theme which look alright, such as the debug toolbar, but it's the grey from the dark theme not the dimmed grey. Other things like tweaking the diff/validation/etc. colors to match the token colors would also give it a more consistent and polished look.

Thanks again for the contribution! :+1:

[cleidigh]

@Tyriar
@bpasero

I know it's late in the game, maybe has to wait till May but I was just doing some debugging
and using the latest Monokai Dimmed.

I noticed the status bar is the exact same color as the list separators , this is particularly noticeable
in my screenshot with no distinction between the breakpoint header and status bar.

personally I think the status bar should have some color, maybe steel blue or whatever. Having
no distinction from the other elements subjugates it too much IMHO

[Tyriar]

@cleidigh what do you think about this (for status bar + title bar)?

This is #20242E which is part way between the editor background #1e1e1e and the activity bar badge blue #3655b5

[Tyriar]

We could also do a new gray in between maybe the editor and side bar?

[cleidigh]

@Tyriar
I like bringing back the blue (I dropped it on to my settings #20242E), maybe a bit lighter but same tone?

Try: #24282F what do you think?

two other things :

• listInactiveSelected === sidebar section headers (can't remember item name)
• the list focus gray might use a little more contrast with the foreground text color
  HOWEVER : I am using a regular LCD TV 4 feet from my chair so that may diminish
  my perception and it's certainly not a high-quality HD computer monitor so perhaps
  I can't be a really good judge of this...

I like the line separator idea also

[cleidigh]

I just looked closer #24282F is too close to the background of the sidebar

21242f is better

you should really decide with a good monitor and the spirit of the theme

[cleidigh]

@Tyriar
what did you go with for the status bar?

[Tyriar]

I didn't end up making a change, looking at it again I think the blue is too strong, looks strange being the only color with saturation in the workbench.

[mckennapsean]

I dig all the new themes in 1.12, as it gives each a more unique feeling! Excellent work. :)

Though, one thing perplexes me: why is the activityBarBadge.background a muted gray in the regular Monokai theme?

Personally, I love and use Monokai because it is very colorful, and I have honestly grown attached to that little colorful badge. Fortunately, you can customize colors on top of a theme.

I just wanted to throw this concern out there (rather than a whole new issue). I have had a harder time reading the badge due to the decreased color contrast as well (which may be a problem, and the gray background blends in with the icon without the color). I would have expected this behavior more in the Monokai Dimmed theme just by the name, hence my confusion.

Either way, great work on the updates!

[cleidigh]

@Tyriar
understandable, as you can see from comments there are so many choices and opinions!
cool thing is it's almost all configurable now. my challenge is to get the select boxes,
they are tricky little buggers - almost have it !

[Tyriar]

@mckennapsean I made the badge and focus color was the Monokai pink originally but the team was opposed to it as it was a little too bold. It's very easy to fork the theme and publish a variant though. You can also override the colors in your settings file using workbench.colorCustomizations.