TextField/Select contrast color

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

Summary 💡

For Button and IconButton we have the possibility to set the color to things like "inherit" which allows us to add readable buttons (like a drawer-menu button) on top of the AppBar:

However, if we want to add a TextField or a Select, we cannot get its “default state” color to be changed accordingly to the background:

Examples 🌈

I suspect it wouldn’t be easy to just use inherit here as different opacity applies to different elements (label/text/borders/disabled/…). So I was thinking that we could have another prop on the component like contrastFrom= "primary" | "secondary" or maybe theme= "light" | "dark" and the input could then adapt its color to the used background color:

Motivation 🔦

Some of the pages (not all of them) use the primary color as the main background color and I would like to add a Select in the footer so the user can change the language of the website. I am able to achieve this by using the classes prop and overwriting the color of elements, but it’s not ideal.

---

P.S. If we can agree on a way to do this, I could try to submit a PR

[oliviertassinari]

@tomByrer We already have color helpers in colorManipulator.js.

[oliviertassinari]

I simply meant

• https://developer.mozilla.org/en-US/docs/Web/CSS/color
• https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
• https://css-tricks.com/currentcolor/