From 45f412456cb9f9806e0f89730636739b18006a9b Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Wed, 3 Jun 2026 16:02:55 +0700
Subject: [PATCH] Improve switch contrast in zinc theme

---
 packages/app/src/components/ui/switch.test.tsx | 1 +
 packages/app/src/components/ui/switch.tsx      | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/ui/switch.test.tsx b/packages/app/src/components/ui/switch.test.tsx
index be5bb5dad..8f775d6da 100644
--- a/packages/app/src/components/ui/switch.test.tsx
+++ b/packages/app/src/components/ui/switch.test.tsx
@@ -10,6 +10,7 @@ const { theme } = vi.hoisted(() => ({
     colors: {
       surface3: "#333",
       accent: "#0a84ff",
+      accentForeground: "#fff",
       palette: { white: "#fff" },
     },
   },
diff --git a/packages/app/src/components/ui/switch.tsx b/packages/app/src/components/ui/switch.tsx
index 67ba7e8df..fb2c77b06 100644
--- a/packages/app/src/components/ui/switch.tsx
+++ b/packages/app/src/components/ui/switch.tsx
@@ -53,6 +53,11 @@ export function Switch({
   }));
 
   const thumbAnimatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [theme.colors.palette.white, theme.colors.accentForeground],
+    ),
     transform: [{ translateX: progress.value * thumbTravel }],
   }));
 
@@ -116,7 +121,6 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "center",
   },
   thumb: {
-    backgroundColor: theme.colors.palette.white,
     shadowColor: "rgba(0, 0, 0, 0.25)",
     shadowOffset: { width: 0, height: 1 },
     shadowRadius: 2,