From 6fa8cf3cb8690e4c952c992915ba20bbcef0ca07 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 2 Aug 2025 10:55:54 +0200
Subject: [PATCH] Bugfix/fix style of slide toggle after Angular Material
 upgrade (#5303)

* Fix style
---
 apps/client/src/styles.scss | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index c13c3388f..6c9742f23 100644
--- a/apps/client/src/styles.scss
+++ b/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);
   }
 }