Material-components-web: mdc-floating-label does not use theme colour

[devvercer]

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]

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]

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

[nztraveler]

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

[kosl90]

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)

~scss
@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]

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]

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

[ericelliott]

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

[abhiomkar]

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.