Skip to content
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

Monokai and monokai dark backgrounds (+workbench colors) have changed #25742

Closed
Tyriar opened this issue May 1, 2017 · 27 comments
Closed

Monokai and monokai dark backgrounds (+workbench colors) have changed #25742

Tyriar opened this issue May 1, 2017 · 27 comments
Assignees
Labels
bug Issue identified by VS Code Team member as probable bug important Issue identified as high-priority themes Color theme issues
Milestone

Comments

@Tyriar
Copy link
Member

Tyriar commented May 1, 2017

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.

#25599

fyi @bpasero

@Tyriar Tyriar added bug Issue identified by VS Code Team member as probable bug themes Color theme issues labels May 1, 2017
@Tyriar Tyriar added this to the April 2017 milestone May 1, 2017
@Tyriar Tyriar self-assigned this May 1, 2017
@Tyriar
Copy link
Member Author

Tyriar commented May 1, 2017

/cc @cleidigh

@cleidigh
Copy link
Contributor

cleidigh commented May 1, 2017

@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
Copy link
Member Author

Tyriar commented May 1, 2017

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

@cleidigh
Copy link
Contributor

cleidigh commented May 1, 2017

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

Tyriar added a commit that referenced this issue May 1, 2017
@Tyriar
Copy link
Member Author

Tyriar commented May 1, 2017

Got regular Monokai looking pretty nice so far:

image

Added a bunch of stuff too:

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

Tyriar added a commit that referenced this issue May 1, 2017
Tyriar added a commit that referenced this issue May 1, 2017
Tyriar added a commit that referenced this issue May 1, 2017
@Tyriar
Copy link
Member Author

Tyriar commented May 1, 2017

Pushed the Monokai changes to release/1.12

@cleidigh
Copy link
Contributor

cleidigh commented May 1, 2017

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

@bpasero bpasero added the important Issue identified as high-priority label May 2, 2017
@bpasero
Copy link
Member

bpasero commented May 2, 2017

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

Notifications:
image

Section Header bleeding into background:
image

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:
image

PS: what about "Monokai Dimmed"?

@bpasero
Copy link
Member

bpasero commented May 2, 2017

@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
Copy link
Member Author

Tyriar commented May 2, 2017

@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
Copy link
Member Author

Tyriar commented May 2, 2017

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

image

Also added inputOption.activeBorder.

@Tyriar
Copy link
Member Author

Tyriar commented May 2, 2017

@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 added a commit that referenced this issue May 2, 2017
- Focus color is now more muted
- Fixed notification foreground
- Added input option active border
- Added input validation colors
- Added title bar color

Part of #25742
Tyriar added a commit that referenced this issue May 2, 2017
- Focus color is now more muted
- Fixed notification foreground
- Added input option active border
- Added input validation colors
- Added title bar color

Part of #25742
@Tyriar
Copy link
Member Author

Tyriar commented May 2, 2017

Also covered input validation:

image

image

image

@Tyriar
Copy link
Member Author

Tyriar commented May 2, 2017

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

image

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

@Tyriar Tyriar closed this as completed in 4b9a244 May 2, 2017
Tyriar added a commit that referenced this issue May 2, 2017
- Restored dimmed monokai bg colors
- Set saturation of blue tinted colors to 0
- Whitespace using indent guide color
- Improve contrast of inactive tab
- Add inputOption.activeBorder and focusBorder

Fixes #25742
@Tyriar
Copy link
Member Author

Tyriar commented May 2, 2017

All fixes pushed to master and release/1.12, should be good to go 👍

@cleidigh
Copy link
Contributor

cleidigh commented May 2, 2017

@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
Copy link
Member Author

Tyriar commented May 2, 2017

@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! 👍

@cleidigh
Copy link
Contributor

cleidigh commented May 3, 2017

@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

image

@Tyriar
Copy link
Member Author

Tyriar commented May 3, 2017

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

image

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

@Tyriar
Copy link
Member Author

Tyriar commented May 3, 2017

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

@cleidigh
Copy link
Contributor

cleidigh commented May 3, 2017

@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
Copy link
Contributor

cleidigh commented May 3, 2017

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
Copy link
Contributor

cleidigh commented May 4, 2017

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

@Tyriar
Copy link
Member Author

Tyriar commented May 9, 2017

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
Copy link

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
Copy link
Contributor

@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
Copy link
Member Author

Tyriar commented May 11, 2017

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

@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 18, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue identified by VS Code Team member as probable bug important Issue identified as high-priority themes Color theme issues
Projects
None yet
Development

No branches or pull requests

4 participants