How to change the CSS styling of an Angular Material mat-checkbox in readonly mode for all statuses?

Question

We have some troubles with mat-checkbox customization since Angular Material 15 migration that broke a lot of things.

With Angular 14 we wrote some code like this in a style.css file to customize the readonly and disabled appearance :

    // mat-checkbox
mat-checkbox {
  @mixin updateCheckbox($color) {
    .mat-checkbox-frame {
      border-color: $color !important;
    }

    .mat-checkbox-checkmark-path {
      stroke: $color !important;
    }

    .mat-checkbox-mixedmark {
      background-color: $color;
    }
  }

  label {
    color: $black-color;
  }

  .mat-ripple-element {
    background-color: $green-color !important;
  }

  &.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
  &.mdc-checkbox--selected.mat-accent .mat-checkbox-background {
    background-color: transparent;
  }

  @include updateCheckbox($black-color);

  &[readonly] {
    @include updateCheckbox($readonly-color);
    .mat-ripple-element {
      background-color: $readonly-color !important;
    }
  }

  &[disabled] {
    @include updateCheckbox($disabled-color);
  }
}

And the result was the folowing ( normal mode, readonly mode and disabled mode have different appearance ):

With the same code after Angular 15 migration we have this :

I made some tests by changing our scss file but since the dom and CSS have been changed, nothing works as before and I am lost.

Especially for the indeterminate checkbox that keeps Angular Material theming for his background even if I change it, the following CSS included in the index.html by Angular always takes precedence :

.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background, .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-selected-icon-color, var(--mdc-theme-secondary, #018786));
    background-color: var(--mdc-checkbox-selected-icon-color, var(--mdc-theme-secondary, #018786));
}

Is there a way to do the same thing as before with Angular 14 ? ( borders in black, tick in black and dark gray for readonly and light gray for disabled ) Is there a way to change the css variable --mdc-checkbox-selected-icon-color ?

Thanks by advance for your help

UPDATE

I found a solution but in my opinion, it is bad :

I have override the Angular Material CSS variables specifically for the checkbox ( at :root it does not work because more specific values are initialized after )

.mat-mdc-checkbox.mat-accent {
  --mdc-checkbox-selected-checkmark-color: $black-color;
  --mdc-checkbox-selected-hover-icon-color: transparent;
  --mdc-checkbox-selected-icon-color: transparent;
  --mdc-checkbox-selected-pressed-icon-color: transparent;
  --mdc-checkbox-disabled-selected-checkmark-color: rgba(0, 0, 0, 0.18);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-selected-icon-color: transparent;
}

.mat-mdc-checkbox.mat-accent {
  &[readonly] {
    --mdc-checkbox-selected-checkmark-color: $readonly-color;
  }
}

mat-checkbox {
  @mixin updateCheckbox($color) {
    // Bordure du carré de la checkbox
    .mdc-checkbox__background {
      border-color: $color !important;
    }
    // Tick dans la checkbox
    .mdc-checkbox__checkmark-path {
      stroke: $color !important;
    }


    .mdc-checkbox__mixedmark {
      color: $color;
    }
  }

  .mat-ripple-element {
    background-color: transparent;
  }

  label {
    color: $black-color;
  }

  @include updateCheckbox($black-color);

  &[readonly] {
    @include updateCheckbox($readonly-color);
  }

  &[disabled] {
    @include updateCheckbox($disabled-color);
  }
}

And the result is the following :

As you can see, even the checkmark has changed...the width is calculated in a another way... really hard sometime to migrate Angular versions...

Answer 1

I found a solution but in my opinion, it is bad :

I have overrided the Angular Material CSS variables specifically for the checkbox ( at :root it does not work because more specific values are initialized after )

.mat-mdc-checkbox.mat-accent {
  --mdc-checkbox-selected-checkmark-color: $black-color;
  --mdc-checkbox-selected-hover-icon-color: transparent;
  --mdc-checkbox-selected-icon-color: transparent;
  --mdc-checkbox-selected-pressed-icon-color: transparent;
  --mdc-checkbox-disabled-selected-checkmark-color: rgba(0, 0, 0, 0.18);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-selected-icon-color: transparent;
}

.mat-mdc-checkbox.mat-accent {
  &[readonly] {
    --mdc-checkbox-selected-checkmark-color: $readonly-color;
  }
}

mat-checkbox {
  @mixin updateCheckbox($color) {
    // Bordure du carré de la checkbox
    .mdc-checkbox__background {
      border-color: $color !important;
    }
    // Tick dans la checkbox
    .mdc-checkbox__checkmark-path {
      stroke: $color !important;
    }


    .mdc-checkbox__mixedmark {
      color: $color;
    }
  }

  .mat-ripple-element {
    background-color: transparent;
  }

  label {
    color: $black-color;
  }

  @include updateCheckbox($black-color);

  &[readonly] {
    @include updateCheckbox($readonly-color);
  }

  &[disabled] {
    @include updateCheckbox($disabled-color);
  }
}

And the result is the following :

As you can see, even the checkmark for the indeterminate state has changed comparing to the Angular 14 version...the width is calculated in a another way... really hard sometime to migrate Angular versions...