help(mat-select): Can't apply theme color because of MDC

[sfinoteffy]

What are you trying to do?

Trying to apply theme color to the label of mat-select, but the color that is always applied is rgba(0, 0, 0, 0.87)

What troubleshooting steps have you tried?

I applied my color with a palette, following what the documentation says:
$theme: mat.define-light-theme(( color: ( primary: $app-primary, accent: $app-accent, ), )); @include mat.all-component-themes($theme);
But it doesn't seem to have any effect on the color of mat-select label which is always rgba(0, 0, 0, 0.87). I looked into the file src/material/select/_select-theme.scss from Component library and it seems like this color comes from MDC theme, and I don't see any way to override it.

Reproduction

Steps to reproduce:

1. Add a component mat-select to your template
2. Apply your theme
3. Theme is not applied to mat-select label

Environment

• Angular: 15.1.1
• CDK/Material: 15.1.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[sfinoteffy]

Hello, I found out that prebuilt theme (purple-green here) are able to override mat-select label color while we seem to not be able to do it using our own theme. You can see it by inspecting the mat select documentation page: https://material.angular.io/components/select/overview

[mmalerba]

Its hard to tell what the issue might be without a reproduction to look at. I would guess it might be the fact that the label is part of the form-field, so if you're only applying mat.select-theme it wouldn't update. You need to apply mat.form-field-theme as well. Here's an example: https://stackblitz.com/edit/nx5ffs?file=src%2Fapp%2Fselect-overview-example.html,src%2Ftheme.scss

[angular-automatic-lock-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.}