From c1644039f3646ef23b2b6b6433c2ad60828ed1ef Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sat, 29 Nov 2025 13:23:22 +0100
Subject: [PATCH] fix(shared-ui): improve toggle active state styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add glow effect (box-shadow) when toggle is active
- Add hover brightness effect for active state
- Add proper dark mode support for active state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/settings/SettingsToggle.svelte        | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/shared-ui/src/settings/SettingsToggle.svelte b/packages/shared-ui/src/settings/SettingsToggle.svelte
index 68ce3a707..183c2518b 100644
--- a/packages/shared-ui/src/settings/SettingsToggle.svelte
+++ b/packages/shared-ui/src/settings/SettingsToggle.svelte
@@ -173,8 +173,15 @@
 	}
 
 	.settings-toggle__switch--on {
-		background-color: hsl(var(--primary));
+		background: hsl(var(--primary));
 		border-color: hsl(var(--primary));
+		box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
+	}
+
+	:global(.dark) .settings-toggle__switch--on {
+		background: hsl(var(--primary));
+		border-color: hsl(var(--primary));
+		box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3);
 	}
 
 	.settings-toggle__thumb {
@@ -195,6 +202,19 @@
 		transform: translateX(1.25rem);
 	}
 
+	.settings-toggle__switch:hover:not(:disabled) {
+		border-color: rgba(0, 0, 0, 0.2);
+	}
+
+	:global(.dark) .settings-toggle__switch:hover:not(:disabled) {
+		border-color: rgba(255, 255, 255, 0.25);
+	}
+
+	.settings-toggle__switch--on:hover:not(:disabled) {
+		filter: brightness(1.1);
+		border-color: hsl(var(--primary));
+	}
+
 	.settings-toggle__switch:focus-visible {
 		outline: 2px solid hsl(var(--primary) / 0.4);
 		outline-offset: 2px;