[Chip] Bad color contrast when using the dark theme

[MaximKudriavtsev]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I want more color contrast when using the dark theme

Current Behavior

Bad color contrast when using the Chip component with the dark theme

Steps to Reproduce (for bugs)

You may see this on example
You may see how different color contrasts are in light and dark themes

Context

I want that visualization of my dark application is good

Your Environment

Tech	Version
Material-UI	1.0.0-beta.21
React	16.1.1
browser	Chrome 62.0.3202.94
os	Windows 10

[oliviertassinari]

Changing the approach to a background color using theme.palette.background.chip seems to be more appropriate.

• light: chip: grey[300],
• dark: chip: grey[700],

[pajaydev]

@oliviertassinari Can I create the pull request?.

[mbrookes]

Because the chip bacground is a mid-grey, it might be possible to simplify things considerably by having Chip not change color for the dark theme. The spec doesn't show a dark variant.

[vladimirpekez]

Just to add my 2 cents - grayish clickable/deletable hover/focus/active styles should be easier to customize/override. For example if you have chips in various colors and want to remove grayish clickable/deletable hover/focus/active styles while retaining base chip color the same how would you do it?

[oliviertassinari]

@vladimirpekez It can easily be done with the override API. Feel free to open a question on StackOverflow if needed.

[vladimirpekez]

@oliviertassinari Done: https://stackoverflow.com/questions/47817109/how-to-eliminate-hover-active-focus-gray-color-in-material-ui-chip-component.

Colleague at our team who needed to eliminate grey hover/active style ended up with several chips components, each created to override certain color - there has to be a better way ;)

[mbrookes]

it might be possible to simplify things considerably by having Chip not change color for the dark theme.

This wasn't practical, as our implementation of Avatar has a dark theme. Changing Chip to a mono-theme would have meant changing both.

Much as we want to avoid component specific colors in the theme, I've gone with @oliviertassinari's solution in #9501. That at least makes it easier to have a custom chip color while having hover & focus colors match.

I had to use dark: chip: grey[800], however, for sufficient contrast with the dark Avatar background.

[kgregory]

Colleague at our team who needed to eliminate grey hover/active style ended up with several chips components, each created to override certain color - there has to be a better way ;)

@vladimirpekez Seems like a good opportunity for the factory pattern. We can continue this discussion on StackOverflow.

[MaximKudriavtsev]

This issue is actual.
My example demonstrated this.

[oliviertassinari]

It seems we have reached a dead end #9501 (comment).