CODEWITHSUNDEEP
cssangular-materialangular5
Amith Dissanayaka
Amith Dissanayaka

Reputation: 1059

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

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?

Upvotes: 33

Views: 78048

Answers (11)

Marcus
Marcus

Reputation: 43

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

Upvotes: 1

A. Parolini
A. Parolini

Reputation: 369

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

Upvotes: 5

Lautaro Mascitti
Lautaro Mascitti

Reputation: 337

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

Upvotes: 20

Larest
Larest

Reputation: 386

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 enter image description here toenter image description here

Upvotes: 15

Adam
Adam

Reputation: 615

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

Upvotes: 1

StackOverflowUser
StackOverflowUser

Reputation: 1123

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.

Upvotes: 0

Uyric
Uyric

Reputation: 743

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

Upvotes: 4

nikojpapa
nikojpapa

Reputation: 670

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.

Upvotes: 3

Sai Vamsi
Sai Vamsi

Reputation: 927

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

Upvotes: 12

merovingienne
merovingienne

Reputation: 618

@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"
        ]
      }
    }
  }
}

Upvotes: 6

Krishnadas PC
Krishnadas PC

Reputation: 6519

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

Upvotes: 37

Related Questions