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?
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;
}