Runtime theming doesn't allow to change some element's colors

[schellmax]

Note: I'm using the CDN version here!

Most colors can be changed at runtime inside vue using

this.$setTheme('primary', 'black');

But some colors seem to be hardcoded, and require overrides in css, such as:

.mdc-select__menu .mdc-list .mdc-list-item--selected{
  color:black; background-color:#ccc;
}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{
  color:black;
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{
  color:black;
}

This can easily be reproduced in the docs at https://material.balmjs.com/#/theme/color
Changing the color (button in the top right corner) won't affect the following:

• Focused Textfield Label (purple)
• Select Options - Selected Item (purple background)

[elf-mouse]

Thanks @schellmax

I have checked:

1. Focused Textfield/Select Label is a design flaw of MDC web (You can use sass variable $focused-label-color for default color or overwrite css manually for changing theme color)
2. Select Options - Selected Item is ui styles' bug

I will improve these problems as soon as possible

BTW, The old theme API (e.g. $setTheme) is not very friendly. In version 8.0 I have completely refactored the theme API ($theme, see documentation for details), and the current version 8.0 is fully available. It is recommended to use balm-ui@next.

When the official version of MDC web 8.0 is released, the new version of BalmUI will be updated simultaneously.

[elf-mouse]

Hi @schellmax, I have fixed the problem in balm-ui@next (8.0.0-canary.15).

And, about Focused Textfield/Select Label solution:

Method 1: using some toolchain (like BalmCLI), you can overwrite sass variable in /path/to/app/styles/global/_vendor.scss:

// fix(@mdc): for changing theme, but the color is opacity!!!
@use '@material/textfield' with (
  $focused-label-color: primary
);
@use '@material/select' with (
  $focused-label-color: primary
);

@use 'balm-ui/dist/balm-ui';

Method 2: using CDN, overwrite css manually, like this:

.mdc-text-field--focused.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: red
}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
  color: red
}

Thanks your issue again :)

[schellmax]

Method 2:
you should also exclude the 'invalid' states:

:not(.mdc-text-field--invalid) 
:not(.mdc-select--invalid)