Change color of primeng input-switch

Question

I have the following p-inputSwitch.

<p-inputSwitch class="ml-1 mr-1 align-middle"
               (onChange)="setDefaultValues($event)"
               [ngModel]="defaultValuesToggle">
</p-inputSwitch>
           

Is there a way to change the color from blue when selected? I have tried the following, but nothing changes the color:

.p-inputswitch {
    background: red !important;
}
.p-inputswitch .p-inputswitch-slider {
  background: red !important;
}

Answer 1

You need to add the "selected" state to the selector by adding the class p-inputswitch-checked to .p-inputswitch and also add ::ng-deep infront of the selector to penetrate View Encapsulation:

::ng-deep .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
  background: purple;
}