search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.12k stars 2.15k forks source link

mdc-floating-label does not use theme colour #2718

Open devvercer opened 6 years ago

devvercer commented 6 years ago

I theme with custom properties but my primary colour is not used for the focused label.

This fixes it locally:

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label { color: var(--mdc-theme-primary); }

kfranqueiro commented 6 years ago

Just to confirm, are you customizing theme colors via CSS variables?

Due to the way we set up various colors and their opacities for text field, they are currently only customizable via the Sass theme variables.

chriscasola commented 6 years ago

I'm using the Sass theme variables and still having the same issue.

nztraveler commented 6 years ago

I'm using theme component of rmwc and having the same issue

kosl90 commented 6 years ago

According to the @kfranqueiro the label color for focused text-filed cannot customize via css variable. We can find it in source code packages/mdc-textfield/_mixin.scss and packages/mdc-text-field/_variables.scss.

It can be supported if we change the $mdc-textfield-label-color to primary in packages/mdc-textfield/_mixin.scss#L174.(This solution doesn't handle the opacity)

@include mdc-text-field-label-color(primary)

However, I think it is a better way that writing a wrapper component to handle css variable problem so far. Because it's not invasive.

BTW, @chriscasola I didn't try sass theme variables, but I think it's supposed to work that changing the primary color or $mdc-textfield-label-color, according to the code.

jmaicaaan commented 5 years ago

I am also having an issue with this. I changed the --mdc-theme-primary but the floating label doesn't change color. But the TextField changes its color.

cintaccs commented 5 years ago

I believe the same issue is with .mdc-select and also is an issue for the arrow-pointer.

ericelliott commented 5 years ago

This is driving me crazy. Is there a good workaround that doesn't require Sass?

abhiomkar commented 5 years ago

As per this comment https://github.com/material-components/material-components-web/issues/2718#issuecomment-388145286 due to the way we set up various colors and their opacities for text field, unfortunately they are currently only customizable via the Sass theme variables / mixins.

Dynamic theming with CSS variables is in our Roadmap but not prioritized yet. Please follow this issue #4709 for updates.