From 7fa011a89a498a0c39078fe468feaa41768d9530 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 16 Jun 2022 20:48:02 -0400
Subject: [PATCH] Set the color for the Switch component based on the theme
 (#6397)

---
 app/components/option_item/index.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/components/option_item/index.tsx b/app/components/option_item/index.tsx
index bed915ef8..8dc9e11a7 100644
--- a/app/components/option_item/index.tsx
+++ b/app/components/option_item/index.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback} from 'react';
-import {StyleProp, Switch, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
+import {Platform, StyleProp, Switch, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
 import {useTheme} from '@context/theme';
@@ -96,10 +96,19 @@ const OptionItem = ({
             />
         );
     } else if (type === OptionType.TOGGLE) {
+        const trackColor = Platform.select({
+            ios: {true: theme.buttonBg, false: changeOpacity(theme.centerChannelColor, 0.16)},
+            default: {true: changeOpacity(theme.buttonBg, 0.32), false: changeOpacity(theme.centerChannelColor, 0.24)},
+        });
+        const thumbColor = Platform.select({
+            android: selected ? theme.buttonBg : '#F3F3F3', // Hardcoded color specified in ticket MM-45143
+        });
         actionComponent = (
             <Switch
                 onValueChange={action}
                 value={selected}
+                trackColor={trackColor}
+                thumbColor={thumbColor}
                 testID={`${testID}.toggled.${selected}`}
             />
         );