Search code examples
angularcolorsslidertogglematerial3

Angular Material 3 change slider toggle colors

Changes from material 2 to 3 breaked a lot of customized color changes.

I know that the main idea in material is to use themes, but I don't want to use a complex configuration to simply change an slider color in my app. After a lot of research, I found the right way to change colors easely, without use of ::ng-deep (which is deprecated long time ago).

So, how can I change any color in all sliders in my Angular app?

Solution

  • Simply set it in the main styles.css, changing the values you need. Use only what you need, I set here all the possible values:

    .mat-mdc-slide-toggle {
  --mdc-switch-selected-handle-color: #ffbb1c;
  --mdc-switch-selected-pressed-handle-color: #ffbb1c;
  --mdc-switch-selected-pressed-state-layer-color: #ffbb1c;
  --mdc-switch-selected-hover-state-layer-color: #ffbb1c;
  --mdc-switch-selected-hover-handle-color: #ffbb1c;
  --mdc-switch-selected-focus-state-layer-color: #ffbb1c;
  --mdc-switch-selected-focus-handle-color: #ffbb1c;
  --mdc-switch-selected-track-color: #e0e0e0;
  --mdc-switch-selected-pressed-track-color: #e0e0e0;
  --mdc-switch-selected-hover-track-color: #e0e0e0;
  --mdc-switch-selected-focus-track-color: #e0e0e0;
}

    My favorite values are only 2: the track and focus-track colors, to only change the background color of the slider:

    .mat-mdc-slide-toggle {
  --mdc-switch-selected-track-color: orange;
  --mdc-switch-selected-focus-track-color: orange;
}