bug(mat slide toggle): Cant override styles

[pookdeveloper]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Steps to reproduce:

1. Override styles for slider toogle not work:

/* Slider toggle */
$mat-primary-slider-toggle: (
  main: $state_switch_on,
  lighter: $state_switch_on,
  darker: $state_switch_on,
  200: $state_switch_on,
  // For slide toggle,
  contrast:
  (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text
  )
);
$theme-primary-slider-toggle: mat.define-palette($mat-primary-slider-toggle, main, lighter, darker);
$theme-accent-slider-toggle: mat.define-palette($mat-primary-slider-toggle, main, lighter, darker);
// The warn palette is optional (defaults to red).
$theme-warn-slider-toggle: mat.define-palette($mat-primary-slider-toggle, main, lighter, darker);

$slider-theme: mat.define-light-theme(
    (
      color: (
        primary: $theme-primary-slider-toggle,
        accent:$theme-accent-slider-toggle,
        warn:$theme-warn-slider-toggle
      )
    )
);
@include mat.slide-toggle-theme($slider-theme);

But it works for button or all components:
https://stackblitz.com/edit/components-issue-jqjni4?file=src/app/example-component.html

@include mat.button-theme($slider-theme);
// or 
@include mat.all-component-themes($slider-theme);

Reproduction

Steps to reproduce:

1. Override styles for slider toogle not work:

Example here:

https://stackblitz.com/edit/components-issue-jqjni4?file=src/app/example-component.html

Expected Behavior

Override the styles for slider toggle

Actual Behavior

not override styles

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[jakubweber]

👍
I have exactly same issue.

[Jofator]

Please fix it.

[hidlos]

+1

[Gerardo-QHR]

Same issue

[Kahera]

Currently upgrading from Angular (Material) 14 to 15, and I noticed the slider not taking the correct color after the upgrade, so seems like it's a 14 -> 15 regression (maybe MDC related?).

[gmurph52]

I had the same issue. I couldn't apply primary color to slide toggle after upgrading to Angular Material 15. I was only defining colors for 100, 500, and 700, after adding in all the missing colors from 100 - 900 ( 200 , 300, etc.) the custom theming works.

[jorishermans]

Even with having 100 - 900 it doesn't work, or should you put on that place the primary colors as well?

[sanderha]

Still an issue on v16

[cemugras]

Issue is still existing, we are waiting for the fix fyi

[LordKriegan]

In my case, my toggles did not have a color set for the on state. Not sure if something broke when migrating to new version of Angular or if its a bug, but adding the following scss fixed it:

edit: i didnt realize at first, but the track color was also being affected. had to define a color for track in the on state. updated code below.

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