bug(THEME): Components directive "color" not working with custom theme

[IancovskiLimber]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17

Description

Hello!

I'm trying to define a custom theme for a new project using Angular 18 following the theming guide. At first, I tried to select the custom theme option when I added the Angular Material to the project, so it created a generic theme using azure and blue palettes. When I insert a material button into the HTML, it is rendered with the primary color, but if I try to change its color to "accent" or "warn" with the color directive, nothing happens; it stays with the primary color.

Reproduction

I tried to create a project on StackBlitz but an error occurs when I add Angular Material...

Steps to reproduce:

1. Create a new project using @angular/cli version 18 (for the style question, select "scss")
2. Add @angular/material to the project (for the theme question, select "custom", it will create a generic theme using azure and blue palletes)
3. Replace the content of app.component.html with a mat-flat-button using the color directive, as follows:
   <button mat-flat-button color="primary">Button</button>
4. Run the project (the button will appear with an azure color)
5. Change the button color directive to "accent" or "warn"
6. Reload the project (the button color will not change)

Expected Behavior

The color of the button must change when the color directive is changed.

Actual Behavior

The color of the button don't change despite the color directive.

Environment

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

[crisbeto]

You need to include the mat.color-variants-backwards-compatibility($theme) mixin if you want support for the color attribute in M3.

[IancovskiLimber]

Thank you for your answer! This works, but I don't get one thing... Using the pre-built themes, the color directive works correctly, and the Material button examples are using the color directive too.

What would be the right way to change the button color between the theme colors in M3 without backwards compatibility?

[crisbeto]

The pre-built themes include the backwards compatibility styles: https://github.com/angular/components/blob/main/src/material/core/theming/prebuilt/rose-red.scss#L25. This is the intended way to consume it, because as far as I understand, M3 doesn't have the same concept for colors as in M2. We provide the mixin as way to avoid breaking existing clients.

[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.}