Is there any way to change disable state color of mat-slide-toggle

Question

I want to change the color of disable state in mat-slide-toggle.

This is how slide toggle looking

This is my code

<div>
  <mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>

How can I change gray bg color?

Answer 1

In the root style.scss do a global style override (Not recommended normally) as follows. After you import the material theme

Ref: https://material.angular.io/guide/customizing-component-styles

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

....
....


.mat-slide-toggle-bar {
  background-color: #e47171 !important;
}

Image Ref of style import