From ea3b71276c26995e10dca5e826b101aa3596d83e Mon Sep 17 00:00:00 2001
From: Violet Caulfield <42452695+anultravioletaurora@users.noreply.github.com>
Date: Thu, 5 Mar 2026 05:00:12 -0600
Subject: [PATCH] fix switches not being marked as active

---
 src/components/Global/helpers/switch-with-label.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Global/helpers/switch-with-label.tsx b/src/components/Global/helpers/switch-with-label.tsx
index 44e82a92..7cf8f794 100644
--- a/src/components/Global/helpers/switch-with-label.tsx
+++ b/src/components/Global/helpers/switch-with-label.tsx
@@ -1,4 +1,4 @@
-import { SizeTokens, XStack, Separator, Switch, styled } from 'tamagui'
+import { SizeTokens, XStack, Separator, Switch, styled, getToken, useTheme } from 'tamagui'
 import { Label } from './text'
 import { triggerHaptic } from '../../../hooks/use-haptic-feedback'
 
@@ -24,6 +24,8 @@ export function SwitchWithLabel(props: SwitchWithLabelProps) {
 		props.onCheckedChange(checked)
 	}
 
+	const theme = useTheme()
+
 	return (
 		<XStack alignItems='center' gap='$3'>
 			<Switch
@@ -31,7 +33,10 @@ export function SwitchWithLabel(props: SwitchWithLabelProps) {
 				size={props.size}
 				checked={props.checked}
 				onCheckedChange={handleCheckedChange}
-				backgroundColor={props.checked ? '$success' : '$borderColor'}
+				backgroundColor={'$borderColor'}
+				activeStyle={{
+					backgroundColor: theme.success.val,
+				}}
 				borderColor={'$borderColor'}
 			>
 				<JellifySliderThumb transition='bouncy' />