components: bug(mat slide toggle): Cant override styles

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:

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:

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):

About this issue

Original URL
State: open
Created a year ago
Reactions: 17
Comments: 18

Most upvoted comments

👍 I have exactly same issue.

jakubweber on Apr 5, 2023

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

bdthurber on Jan 12, 2024

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

LordKriegan on Sep 21, 2023

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.

gmurph52 on Jun 21, 2023

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

dev0219 on Apr 5, 2024

Having the issue, still no fixes?

AnuroopSuresh on Oct 24, 2023

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.

domagoj-telum on Sep 21, 2023

hidlos on Apr 13, 2023

Please fix it.

Jofator on Apr 13, 2023