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]

:+1: 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;
}

[domagoj-telum]

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.

This was my issue as well. After defining entire color palette slide toggle is styled correctly.

[AnuroopSuresh]

Having the issue, still no fixes?

[bebimoj]

Version 17 this is still a bug. :(

[bdthurber]

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.

To further define what exactly the issue is, it appears that some angular components (like this slide toggle) use values on the whole color palette, instead of just the defined hues when you define the palette. For example, he has $theme-primary-slider-toggle: mat.define-palette($mat-primary-slider-toggle, main, lighter, darker); And the angular material docs say this here

Constructing the theme first requires defining your primary and accent palettes, with an optional warn palette. The define-palette Sass function accepts a color palette, described in the Palettes section above, as well as four optional hue numbers. These four hues represent, in order: the "default" hue, a "lighter" hue, a "darker" hue, and a "text" hue. Components use these hues to choose the most appropriate color for different parts of themselves.

So when you pass in a main, lighter, and darker hue the components all use those instead of their default colors on your palette. This slide toggle though does not use the lighter and darker to color itself for some reason, and in my case pulls the 300, 600, and 900 values from my palette that is passed in. So having at least those values or a full palette defined will fix the issue, and even if you only have 3 colors in your palette just fill in the values.

Another interesting quirk - the mat-slider component applies an opacity style to the color given to it as well to theme the inactive track, so it is interesting the toggle does not follow a similar method for its lighter area. Applying an opacity and using 1 color for all palette values should also resolve the issue

[cdasilvacosta]

Hi team, any news on the fix?

[HermannBergqvist]

Same bug for me. Version 17

[dev0219]

::ng-deep You can access to the elements using ng-deep. @HermannBergqvist

[LxxsCLN]

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

I had the exact same issue and this fixed it. Thanks!

[jneuhaus20]

I ran into the same problem with a 14 -> 15 update, and no one's really stated the obvious yet: this isn't a bug, the slider just relies on a full palette now.

It's annoying that I have to come up with a full palette, and that I had to dig around instead of seeing an SCSS error that I didn't have a color defined in my palette it was trying to use, but it is fully stylable.