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:



Continue reading...