From 1ea6021c8ae6f3cbad35742f4fec00af406fe848 Mon Sep 17 00:00:00 2001
From: Michel Roegl-Brunner <michel.roegl-brunner@htl-braunau.at>
Date: Mon, 20 Oct 2025 16:11:01 +0200
Subject: [PATCH] fix: improve toggle slider visibility with better contrast
 and blue ON state

- Darkened OFF state background (gray-300/gray-700)
- Added border to track for better definition
- Enhanced knob contrast with shadow
- Changed ON state to vibrant blue (blue-500/blue-600) for better visibility
- Makes toggle states immediately distinguishable at a glance
---
 src/app/_components/ui/toggle.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/_components/ui/toggle.tsx b/src/app/_components/ui/toggle.tsx
index ab337d8..3e46797 100644
--- a/src/app/_components/ui/toggle.tsx
+++ b/src/app/_components/ui/toggle.tsx
@@ -22,10 +22,10 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
             {...props}
           />
           <div className={cn(
-            "w-11 h-6 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 dark:after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-transform after:duration-300 after:ease-in-out transition-colors duration-300 ease-in-out",
+            "w-11 h-6 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 dark:after:border-gray-500 after:border after:rounded-full after:h-5 after:w-5 after:transition-transform after:duration-300 after:ease-in-out after:shadow-md transition-colors duration-300 ease-in-out border-2 border-gray-300 dark:border-gray-600",
             checked 
-              ? "bg-primary after:translate-x-full" 
-              : "bg-gray-200 dark:bg-gray-600",
+              ? "bg-blue-500 dark:bg-blue-600 after:translate-x-full" 
+              : "bg-gray-300 dark:bg-gray-700",
             className
           )} />
         </label>