angular angular-material angular-material-theming angular-material-15

Set disabled-text in Angular Material v15

I'm upgrading my Angular app to v15. Previously (in v14), to have a custom color for disabled text, I set a disabled-text property in my custom Material theme by doing this:

$my-theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);

@function my-mat-light-theme-foreground($color) {
  @return (
    text: var(--color-text-default),
    disabled: var(--color-text-disabled),
    disabled-button: var(--color-text-disabled),
    disabled-text: var(--color-text-disabled),
    divider: rgba(0, 0, 0, 0.12),
    secondary-text: rgba(0, 0, 0, 0.54)
  );
}

$my-foreground: my-mat-light-theme-foreground(mat-color($theme-primary, 700));
$my-app-theme-custom: map-merge($my-theme, (foreground: $my-foreground,);

@include angular-material-theme($my-app-theme-custom);

However, a lot of things changed in v15, and I had to change my theme setup to be this:

$my-theme: mat.define-light-theme(
  ( color: (primary: $theme-primary, accent: $theme-accent, warn: $theme-warn,),
    typography: mat.define-typography-config(),)
);

@function my-mat-light-theme-foreground($color) {
  @return (
    text: var(--color-text-default),
    disabled: var(--color-text-disabled),
    disabled-button: var(--color-text-disabled),
    disabled-text: var(--color-text-disabled),
    divider: rgba(0, 0, 0, 0.12),
    secondary-text: rgba(0, 0, 0, 0.54)
  );
}

$my-foreground: my-mat-light-theme-foreground(mat.get-color-from-palette($theme-primary, 700));
$my-app-theme-custom: map-merge($my-theme, (foreground: $my-foreground,));

@include mat.all-component-themes($my-app-theme-custom);
@include mat.all-legacy-component-themes($my-app-theme-custom);

My custom disabled color is no longer being applied in v15. I'm guessing the configuration must've changed, but I can't find details on what to do in the guide (https://v15.material.angular.io/guide/theming#custom-themes-with-sass).

How do I implement custom colors like I was in v14 for disabled-text and the other properties listed?

I have examples of this in stackblitz in v14 (which works) and v15 (which doesn't). In both, I'm setting the disabled-text to be orange (that's just for demo purposes).
v14: https://stackblitz.com/edit/48sfac
v15: https://stackblitz.com/edit/icshyy

Solution

You can use map.set to set the foreground like this.

$my-theme-custom: map.set($my-theme, color, foreground, $my-foreground);

Stackblitz: https://stackblitz.com/~/github.com/codeandcloud/so-ng15-material?view=editor Github Repo: https://github.com/codeandcloud/so-ng15-material