Angular - mat-slide-toggle change color

I can't seem to find how to change my toggle's color..

HTML:

<td data-label="Actief" *ngIf="user.enabled">
    <mat-slide-toggle></mat-slide-toggle>
</td>

CSS:

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: rgb(50, 170, 118);
    /*replace with your color*/
}

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgb(113, 226, 147);
    /*replace with your color*/
}

I have searched for various sources but my toggle is just pink. I applied the css-styles like both chatGPT and other stackoverflow users suggested in various posts. The color is never changed.

I want it to be green when active and red when inactive.

Right now it is still like this:

It looks like you are using Angular Material 15, the classes have changed in version 15, try the below code with the updated class names

::ng-deep .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-switch__shadow {
  background-color: rgb(50, 170, 118);
  /*replace with your color*/
}

::ng-deep .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-switch__track::after {
  background-color: rgb(113, 226, 147) !important;
  /*replace with your color*/
}