Change mat-slide-toggle click color

Question

When I click the element it is visible a shadow of the color that the element is suppoused to be, in this case yellow

and i want to make that shadow to a green color, but I dont know how to change it, here is my code.

HTML

   <mat-checkbox id="tractor{{element.id}}" checked="{{element.tractor}}"></mat-checkbox>

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*/
    }

Answer 1

Try adding style to .mat-ripple-element class, this should override the shadow colour.

::ng-deep
.mat-slide-toggle.mat-checked .mat-ripple-element{
    background-color: green;
}