How to change color property of mat-slide-toggle/ overwrite CSS of component?

Question

Is there any way to change color property of mat-slide-toggle component from the Angular Material component library? How to override its styling?

Or can anyone suggest me any other slide toggle for angular 5 applications, like material slide toggle?

Answer 1

You can change the primary colour of the mat-slide-toggle with the below css in your component styles.

/deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {     background-color: #49c5b6; }  /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {     background-color: #49c5b6; } 

The above code is tested on angular 5+ version and which is working.

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

You may please take time to read more about the deep selectors here.

https://angular.io/guide/component-styles#deep

Answer 2

By default, mat-slide-toggle uses the theme's accent color.So to change the color you can try this instead:

<mat-slide-toggle color="primary">Slide Toggle!</mat-slide-toggle> 

You can change color from primary, accent, warn..etc