Change color of Toggle button in Angular

I can't change the color of the Toggle button in Angular.

This is my code:

 <mat-slide-toggle class="custom-toggle">
      Toggle
 </mat-slide-toggle>

::ng-deep .custom-toggle .mat-slide-toggle-bar {
  background-color: yellow !important;
}

::ng-deep .custom-toggle .mat-slide-toggle-thumb {
  background-color: yellow !important;
}

::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-bar {
  background-color: yellow !important;
}

::ng-deep .custom-toggle.mat-checked .mat-slide-toggle-thumb {
  background-color: yellow !important;
}

I also tried this:

<mat-slide-toggle
  style="--mat-slide-toggle-thumb-color: yellow; --mat-slide-toggle-bar-color: yellow;"
  class="custom-toggle"
  [checked]="isConnected"
  (change)="toggleConnection($event)"
>
  Toggle Connection
</mat-slide-toggle>

Nothing seems to work...

Also maybe I should mention that this is what we use in the global styles.css

@import '@angular/material/prebuilt-themes/indigo-pink.css';

Any help would be much apriciated

I tried consulting with chat-GPT and also reading similar questions that people had on this site.

Also this is not available in my project : @import '~@angular/material/theming';, and I was told I should find solution without it...

Solution

Depends what do you want to change, but this can help as starting point. Paste this code in main styles.scss. There are variables to style for example handle and track (material naming). So in this example unselected track will be blue and unselected handle red (first pic). While selected track will be yellow and selected handle brown (second pic).

Note: This is done using angular 18 material, naming of this variables might change from version to version so keep an eye on it when upgrading versions.

.mat-mdc-slide-toggle.custom-toggle {
// Define base colors
--color-unselected-handle: red;
--color-selected-handle: brown;
--color-unselected-track: blue;
--color-selected-track: yellow;

 // Handle colors
 @each $state in (unselected, selected) {
    --mdc-switch-#{$state}-handle-color: var(--color-#{$state}-handle);
    --mdc-switch-#{$state}-focus-handle-color: var(--color-#{$state}-handle);
    --mdc-switch-#{$state}-hover-handle-color: var(--color-#{$state}-handle);
    --mdc-switch-#{$state}-pressed-handle-color: var(--color-#{$state}-handle);
 }

 // Track colors
 @each $state in (unselected, selected) {
    --mdc-switch-#{$state}-track-color: var(--color-#{$state}-track);
    --mdc-switch-#{$state}-focus-track-color: var(--color-#{$state}-track);
    --mdc-switch-#{$state}-hover-track-color: var(--color-#{$state}-track);
    --mdc-switch-#{$state}-pressed-track-color: var(--color-#{$state}-track);
 }
}

Also how to know name of this classes, I just go and inspect element in browser and find right name.