Components: Add/allow a white variant of the mat-form-field, when using inputs against a background-color other than white.

[damienwebdev]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

As a developer, I should be able to utilize a white variant of the mat-form-field along with mat-select in order to be able to place a white mat-select against a primary or accent background.

What is the current behavior?

Currently, I can only apply a primary, accent or warn to a mat-form-field which doesn't work well against dark backgrounds as the text of the placeholder is default black on mat-light-theme.

What are the steps to reproduce?

http://plnkr.co/edit/IqjrJkmla0MEPpYTYAIM?p=preview

What is the use-case or motivation for changing an existing behavior?

I want to utilize a mat-select against a dark background without changing my whole app to the mat-dark-theme.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Currently using @master

Is there anything else we should know?

[crisbeto]

All Material components support dark themes already. You can see for yourself by going to one of the demos and changing to a dark theme from the theme picker in the top right.

[damienwebdev]

@crisbeto I think you prematurely closed this. I'll try to clarify myself a bit.

Let's say I'm utilizing @angular/material/theming and I'm utilizing mat-light-theme since generally in my app, I prefer a white-backed mat-select with black text. The mat-light-theme's mat-select inside a mat-form-field looks fantastic against a white background, as the placeholder/underline is black.

The same is not so true against a colored background.

If I, using the mat-light-theme, add a mat-form-field with a mat-select as in the above example, I can't see the placeholder or the underline.

Merely changing to the mat-dark-theme of the component doesn't achieve want I want either, I'd have a gray-backed mat-select with white text, which now is a unique color of mat-select in my app.

Ideally, I can change the color of the mat-form-field to white, which changes the placeholder/underline to white, while keeping mat-select's background white so that I can keep theme consistency across the components in my app.

[willshowell]

@damienwebdev maybe this https://github.com/angular/material2/issues/7145#issuecomment-330282110 is related.

[damienwebdev]

@willshowell Yep. I was trying to achieve what @jelbourn stated precisely. I needed a solo-field. I'll build out my own custom one for now. Maybe we should consider a proposal for mat-solo-field as a component that's treated similarly to mat-form-field? But, that's outside the context of this issue. Let me know if you'd like me to create a issue for the mat-solo-field proposal.

You can keep this issue closed.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}