How to change color property of mat-slide-toggle/ overwrite CSS of component?

Question

Is there any way to change color property of mat-slide-toggle component from the Angular Material component library? How to override its styling?

Or can anyone suggest me any other slide toggle for angular 5 applications, like material slide toggle?

Hyperbola

The original, accepted, link-only answer was Change Angular 2/4 Material default styles for "md-menu". Therefore, this question should be closed as a duplicate. – Parolee

Answer 1

You can change the primary colour of the mat-slide-toggle with the below css in your component styles.

/deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #49c5b6;
}

/deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #49c5b6;
}

The above code is tested on angular 5+ version and which is working.

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

You may please take time to read more about the deep selectors here.

https://angular.io/guide/component-styles#deep

Pergola

Thank You! Works just fine! – Crwth

Important: /deep/ is deprecated. Citing the Docs: "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." – Cum

@grreeenn I have pasted the answer which worked for me. If it has been changed kindly update the answer. – Pergola

@KrishnadasPC it still works, although it's deprecated and is likely to start causing problems in near future – Cum

It seems with this solution the shadow visible while the animation lasts doesn't change. When the toggle moves to the activated option you can still see the default colour. Have you find how to change it? – Simonides

Answer 2

In angular >12+ use :host and ::ng-deep in your css component instead of /deep/.

Example:

:host ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #49c5b6 ;
}

:host ::ng-deep  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #49c5b6 ;
}

Szczecin

never do this, ng-deep is bad, and host is barely tolerable – Anurag

@SamAlexander What would you suggest instead to change the colours? – Dielu

Answer 3

So how change colors for Angular mat-slider. my answer is about angular 15+ only:

In general you need just change switch theme colors. however I did not get how and there is less preferred solution is provided:

// rewrite Angular 15 switchers new look
@use '@material/switch/switch' as mdc-switch;
@use '@material/switch/switch-theme' as mdc-switch-theme;

$_color-selected-handle:red;
$_color-unselected-handle:green;

$_color-unselected-track: grey;
$_color-selected-track: purple;
$_color-disabled-selected-track: $_color-selected-track;
$_color-disabled-unselected-track: $_color-unselected-track;

.mat-mdc-slide-toggle {

  .mdc-switch {

    @include  mdc-switch-theme.theme((
//handle color
      disabled-selected-handle-color: $_color-selected-handle,
      disabled-unselected-handle-color: $_color-unselected-handle,

      selected-handle-color: $_color-selected-handle,
      selected-focus-handle-color: $_color-selected-handle,
      selected-hover-handle-color: $_color-selected-handle,
      selected-pressed-handle-color: $_color-selected-handle,

      unselected-handle-color: $_color-unselected-handle,
      unselected-focus-handle-color: $_color-unselected-handle,
      unselected-hover-handle-color: $_color-unselected-handle,
      unselected-pressed-handle-color: $_color-unselected-handle,


//tracks color
      disabled-selected-track-color: $_color-selected-track,
      disabled-unselected-track-color: $_color-unselected-track,

      selected-track-color: $_color-selected-track,
      selected-focus-track-color: $_color-selected-track,
      selected-hover-track-color: $_color-selected-track,
      selected-pressed-track-color: $_color-selected-track,


      unselected-track-color: $_color-unselected-track,
      unselected-focus-track-color: $_color-unselected-track,
      unselected-hover-track-color: $_color-unselected-track,
      unselected-pressed-track-color: $_color-unselected-track,
// icon colors

      disabled-selected-icon-color:  $_color-selected-handle,
      disabled-unselected-icon-color: $_color-unselected-handle,
      selected-icon-color: $_color-selected-handle,
      unselected-icon-color: $_color-unselected-handle,

    ));

  }
}

so it allows change apperance from to

Desmund

The most useful answer here for solving the problem of the (really quite poor) disabled state colour of these. – Thundercloud

Answer 4

By default, mat-slide-toggle uses the theme's accent color.So to change the color you can try this instead:

<mat-slide-toggle color="primary">Slide Toggle!</mat-slide-toggle>

You can change color from primary, accent, warn..etc

Latifundium

"By default, mat-slide-toggle uses the theme's accent color" ... why not complicating things for no good reason ah? ... – Jeunesse

I'm torn on their decision to make radios and toggles accent. I get it, but there is a strong argument that everything should default to primary. Luckily this excellent answer clearly explains how to get what you want. – Slaughterhouse

Answer 5

@nikojpapa's answer here is the recommended method of changing Angular Material component styles. I'll add a bit more details here.

The Slider Toggle component has a property named color that expects a ThemePalette value. Possible ThemePalette values are 'primary', 'accent', and 'warn'. These relate to the primary, accent and warn color palette variants of the theme. The color property of this component defaults to 'accent'.

So, to customise the colors, we need to provide a color palette as the accent of the theme. Let's assume we want to change only the slider component's styles.

To do this:

1. We need to define a new color palette that fits our needs.
2. We need to create a new theme, passing our color palette as the variant being used by the slider toggle component (as in if the slider toggle color is 'primary', we need to create the theme with our color palette as the primary variant).
3. We need to change the slider toggle's theme to our newly defined theme.

We do all of these steps in the styles.scss file of the Angular app.

Example:

/* styles.scss */

/* required set-up */
@import '~@angular/material/theming';
@include mat-core();

/** 1. Define new color palette. */
$md-custom-toggle-colors: (
  50 : #e8f6e9,
  100 : #c5e9c8,
  200 : #9fdaa4,
  300 : #79cb7f,
  400 : #5cc063,
  500 : #3fb548,
  600 : #39ae41,
  700 : #31a538,
  800 : #299d30,
  900 : #1b8d21,
  A100 : #c6ffc9,
  A200 : #93ff98,
  A400 : #60ff67,
  A700 : #47ff4f,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #000000,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

/**
2. Create new theme, passing above palette as the required variant.
Since the default variant of the Slider Toggle is 'accent', we will pass the above palette as such.
*/
$custom-toggle-theme: mat-light-theme(mat-palette($mat-red), mat-palette($md-custom-toggle-colors));


/** 3. Set new theme as slider toggle theme. */
@include mat-slide-toggle-theme($custom-toggle-theme);

Ensure that you include this styles.scss file in the styles array within your angular.json file. Note that the order of the style files is important here - later files replace the styles defined in preceding files.

You probably already have a pre-built Angular Material style file included in the array. To apply our newly defined styles, the styles array should be something like below:

{
  "projects" : {
    "architect": {
      "build": {
        "styles" : [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "./src/styles.scss"
        ]
      }
    }
  }
}

Avoidance

And how do you change the toggle color of the disabled bar and thumb? Your solution only changes the colors of the enabled state. – Winebibber

Answer 6

The other solutions were useful to change the colour of static elements but not the ripple effect. Please find below what we are using in a global CSS file:

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgb(128, 203, 196);
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: rgb(29, 135, 229);
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-ripple .mat-ripple-element {
    background-color: rgba(29, 135, 229, .2);
}

Simonides

Nice! Works perfectly. Any suggestions on how to properly change the size other than doing something like this: .mdc-switch__track { border-radius: 24px !important; height: 24px !important; } – Sotelo

Sorry, never tried changing the size. Side note: I try to avoid !important by targeting the specific CSS classes, it might produce unexpected results. – Simonides

Answer 7

Here is the simpler way : add this to your component scss file:

(Exemple that changes the primary color to a green palette)

.mat-mdc-slide-toggle.mat-primary {
  --mdc-switch-selected-focus-state-layer-color: #4CAF50;
  --mdc-switch-selected-handle-color: #4CAF50;
  --mdc-switch-selected-hover-state-layer-color: #4CAF50;
  --mdc-switch-selected-pressed-state-layer-color: #4CAF50;
  --mdc-switch-selected-focus-handle-color: #2E7D32;
  --mdc-switch-selected-hover-handle-color: #2E7D32;
  --mdc-switch-selected-pressed-handle-color: #2E7D32;
  --mdc-switch-selected-focus-track-color: #4CAF50;
  --mdc-switch-selected-hover-track-color: #4CAF50;
  --mdc-switch-selected-pressed-track-color: #4CAF50;
  --mdc-switch-selected-track-color: #4CAF50;
}

Shum

Thanks, this is the way to go! I even combined it with my own CSS vars... --mdc-switch-selected-focus-state-layer-color: var(--primaryColor); – Amiens

thanks a lot. for me, this is the only one working solution. – Asarum

Answer 8

You can use the scss mixin like this:

@include mat-slide-toggle-theme(mat-light-theme($app-primary, $app-accent));

Where $app-primary and $app-accent are any color palettes.

Source code for the mixin is here, and you can generate color pallets here or here.

Archimage

But where do you include it?? – Angrist

Answer 9

In styles.scss file:

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
  background-color: red;
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
  background-color: red;
}

For unchecked:

.mat-slide-toggle .mat-slide-toggle-bar {
  background-color: var(--pale-green);
}

Malaya

Answer 10

Using Angular 17+

I have found that it is a specificty issue as well as knowing all scss tags that are needing to be used. You have to make 1 html template entry by adding a class as well as add the custom scss that you want to over-ride.

Here is my example that seems to work quite well!

HTML:

<mat-slide-toggle class="my-slide"></mat-slide-toggle>

SCSS:

mat-slide-toggle.my-slide {
  --mdc-switch-selected-handle-color: lightgreen;
  --mdc-switch-selected-pressed-handle-color: lightgreen;
  --mdc-switch-selected-pressed-state-layer-color: green;
  --mdc-switch-selected-hover-state-layer-color: lightgreen;
  --mdc-switch-selected-hover-handle-color: lightgreen;
  --mdc-switch-selected-focus-state-layer-color: lightgreen;
  --mdc-switch-selected-focus-handle-color: lightgreen;
  --mdc-switch-selected-track-color: green;
  --mdc-switch-selected-pressed-track-color: green;
  --mdc-switch-selected-hover-track-color: green;
  --mdc-switch-selected-focus-track-color: green;
}

Huttan

Answer 11

I believe /deep/ and ::ng-deep are deprecated and didn't want to bother with customizing pallets for my simple needs with the mat-slide-toggle for my Angular app, so I appreciated the answer provided 6/9/21 by Uyric.

The mat-slide-toggle defaulted to a grayish color scheme in my app and for my purposes, I didn't plan to disable the control; I only wanted its appearance to change when the toggle was slid to the "on" (rightmost) position.

With these two lines pasted at the bottom of the global styles.css file, when the control was toggled, the control's thumb changed from a lighter gray to a lighter green, and the bar beneath the thumb changed from a darker gray to a darker green.

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: #7cf27c !important;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: #478b47 !important;
}

My understanding is the use of !important in CSS is something some believe should be avoided or at least minimized, but I found it necessary for this to work in my app.

Putt