CODEWITHSUNDEEP
htmlcssangularangular-material
Elias
Elias

Reputation: 453

Angular - mat-slide-toggle change color

I can't seem to find how to change my toggle's color..

HTML:

<td data-label="Actief" *ngIf="user.enabled">
    <mat-slide-toggle></mat-slide-toggle>
</td>

CSS:

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: rgb(50, 170, 118);
    /*replace with your color*/
}

::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgb(113, 226, 147);
    /*replace with your color*/
}

I have searched for various sources but my toggle is just pink. I applied the css-styles like both chatGPT and other stackoverflow users suggested in various posts. The color is never changed.

I want it to be green when active and red when inactive.

Right now it is still like this:

enter image description here

Upvotes: 1

Views: 7164

Answers (4)

Erin M
Erin M

Reputation: 1

Mr. Stash's answer worked for me, but I had to remove ::ng-deep:

    .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-switch__shadow {
  background-color: rgb(50, 170, 118);
  /*replace with your color*/
}

.mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-switch__track::after {
  background-color: rgb(113, 226, 147) !important;
  /*replace with your color*/
}

Upvotes: 0

Айдер Умеров
Айдер Умеров

Reputation: 1

good practice is to do in your app good styling - doing it like primary variables. So if you want to do - do it throw changing color of primary colors in your _variables.scss like example.There it can be described: https://getbootstrap.com/docs/5.0/customize/sass/ . I have such experience - like years ago - and it hard to understand what is going on in project that you should change every time color in css files - different and none linked in structure. One place better for concentrating. I mean - above - that file structure in link https://getbootstrap.com/docs/5.0/customize/sass/ kind a good example, to do in your project. So if you want you can use it. And exactly - this is path of specialist.

Upvotes: 0

Dominik Ehrenberg
Dominik Ehrenberg

Reputation: 1746

For the track color and the color of the icon within the thumb (e.g. the checkmark if it's selected) you can also locally overload the used CSS variables, so you don't have to use ng-deep:

.mat-mdc-slide-toggle .mdc-form-field .mdc-switch {
  --mdc-switch-selected-track-color: green;
  --mdc-switch-unselected-track-color: gray;

  --mdc-switch-selected-icon-color: yellow;
  --mdc-switch-unlected-icon-color: black;
}

Upvotes: 1

Mr. Stash
Mr. Stash

Reputation: 3140

It looks like you are using Angular Material 15, the classes have changed in version 15, try the below code with the updated class names

::ng-deep .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-switch__shadow {
  background-color: rgb(50, 170, 118);
  /*replace with your color*/
}

::ng-deep .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-switch__track::after {
  background-color: rgb(113, 226, 147) !important;
  /*replace with your color*/
}

Upvotes: 7

Related Questions