Bugfix/fix style of slide toggle after Angular Material upgrade (#5303)

* Fix style

apps/client/src/styles.scss

@@ -267,6 +267,30 @@ body {
       background-color: rgba(var(--palette-foreground-base-dark), 0.02);
     }
 
+    .mat-mdc-slide-toggle {
+      .mdc-switch__track {
+        --mat-slide-toggle-selected-focus-track-color: rgba(
+          255,
+          255,
+          255,
+          0.12
+        );
+        --mat-slide-toggle-selected-hover-track-color: rgba(
+          255,
+          255,
+          255,
+          0.12
+        );
+        --mat-slide-toggle-selected-pressed-track-color: rgba(
+          255,
+          255,
+          255,
+          0.12
+        );
+        --mat-slide-toggle-selected-track-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+
     .mdc-button {
       &.mat-accent,
       &.mat-primary {
@@ -488,12 +512,12 @@ ngx-skeleton-loader {
   }
 }
 
-/**
- * Fix for https://github.com/angular/components/issues/26818
- */
 .mat-mdc-slide-toggle {
   .mdc-switch__track {
-    background-color: rgba(var(--palette-primary-500), 1);
+    --mat-slide-toggle-selected-focus-track-color: rgba(0, 0, 0, 0.12);
+    --mat-slide-toggle-selected-hover-track-color: rgba(0, 0, 0, 0.12);
+    --mat-slide-toggle-selected-pressed-track-color: rgba(0, 0, 0, 0.12);
+    --mat-slide-toggle-selected-track-color: rgba(0, 0, 0, 0.12);
   }
 }