Set disabled-text in Angular Material v15

Question

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

Answer 1

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

---

Related: How to change font color of primary palette in Angular Material2?

Answer 2

In your v15 angular application goto file styles.scss add the following.

input:disabled,select:disabled,textarea:disabled {
  color: orange !important;
}

In your input-hint-example.html :

 <mat-form-field appearance="outline" style="width: 100%">
  <mat-label> Field Label </mat-label>
  <input matInput [formControl]="inputValue" />
</mat-form-field>

<label>Select option:</label>
<select class="form-control" [formControl]="inputselect">
  <option *ngFor="let item of options" [value]="item">
    {{ item.display }}
  </option>
</select>
<br />
<br />

<label>text area:</label>
<textarea [formControl]="inputtextarea"></textarea>

<br />
<br />

<label> Click to Enable / Disable </label>
<input
  type="checkbox"
  [(ngModel)]="isChecked"
  (change)="checkValue(isChecked)"
/>
<br />
<br />

In your input-hint-example.ts :

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'input-hint-example',
  templateUrl: 'input-hint-example.html',
  styleUrls: ['input-hint-example.css'],
})
export class InputHintExample implements OnInit {
  isChecked = false;
  inputValue = new FormControl('Value');
  inputselect = new FormControl('Value1');
  inputtextarea = new FormControl('Value2');
  selectedOption: any;

  options = [
      {
          value: 'option1',
          display: 'First option'
      },
      {
          value: 'option2',
          display: 'Second option'
      }
  ];
  ngOnInit() {
    this.inputValue.enable();
  }

  checkValue(val: any) {
    this.isChecked!=this.isChecked;
    if(this.isChecked){
      this.inputValue.disable()
      this.inputselect.disable()
      this.inputtextarea.disable()
    } else {
      this.inputValue.enable()
      this.inputselect.enable()
      this.inputtextarea.enable()
    }
  }
}

This will give you following :

Refer to the working code stackblitz here

Answer 3

I have not been able to find something on customising the theme for disabled components when I looked. Either this changed or it was deprecated. As a workaround, I looked at the generated css and created scss rules that would result in the same effect:

$color-text-disabled: var(--color-text-disabled);

.mat-calendar-body-disabled {
  & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    color: $color-text-disabled;
  }
}

.mat-form-field-disabled {
  & .mat-date-range-input-separator,
  & .mat-form-field-label {
    color: $color-text-disabled;
  }

  & .mat-date-range-input-inner[disabled] {
    color: $color-text-disabled;
  }

  & .mat-form-field-label {
    color: $color-text-disabled;
  }

  &.mat-form-field-appearance-outline {
    & .mat-form-field-label {
      color: $color-text-disabled;
    }
  }
}

.mat-input-element:disabled,
.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after,
.mat-list-base .mat-list-item-disabled,
.mat-select-disabled .mat-select-value,
.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow,
.mat-tab-label.mat-tab-disabled,
.mat-tab-link.mat-tab-disabled,
.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-checkbox-disabled .mat-checkbox-label,
.mat-menu-item[disabled],
.mat-menu-item[disabled] :is(.mat-menu-submenu-icon,.mat-icon-no-color)
.mat-icon-button[disabled] :is(.mat-paginator-decrement,.mat-paginator-increment,.mat-paginator-first,.mat-paginator-last),
.mat-radio-button.mat-radio-disabled {
  color: $color-text-disabled;
}

.mat-radio-button.mat-radio-disabled {
  &.mat-radio-checked .mat-radio-outer-circle,
  & .mat-radio-outer-circle {
    border-color: $color-text-disabled;
  }

  & .mat-radio-ripple .mat-ripple-element,
  & .mat-radio-inner-circle {
    background-color: $color-text-disabled;
  }

  & .mat-radio-label-content {
    color: $color-text-disabled;
  }
}

.mat-slide-toggle-bar {
  background-color: $color-text-disabled;
}

.mat-badge-disabled {
  & .mat-badge-content {
    background: $color-text-disabled;
    color: $color-text-disabled;
  }
}

.mat-button,
.mat-icon-button,
.mat-stroked-button,
.mat-flat-button,
.mat-raised-button,
.mat-fab,
.mat-mini-fab,
.mat-button-toggle-disabled {
  &.mat-primary,
  &.mat-accent,
  &.mat-warn,
  &.mat-button-disabled,
  &.mat-icon-button-disabled,
  &.mat-stroked-button-disabled,
  &.mat-flat-button-disabled,
  &.mat-raised-button-disabled,
  &.mat-fab-disabled,
  &.mat-mini-fab-disabled {
    color: $color-text-disabled;
  }
}

.mat-expansion-panel-header[aria-disabled=true] {
  color: $color-text-disabled;
}

https://stackblitz.com/edit/icshyy-oq3lci?file=src%2Fstyles.scss

Does this work for the actual styling changes you want to accomplish instead of the orange color?