reza fixed bottom navigation props handler

navigation/index.js

@@ -8,8 +8,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { connect } from "react-redux";
 import { user, publicApi } from "../src/redux/actions";
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 //components
 import OrderDetails from "../src/screens/OrderDetails";
@@ -50,7 +49,7 @@ import Colors from "../src/constants/Colors";
 import fontSize from "../src/constants/fontSize";
 
 const Tab = createBottomTabNavigator();
-const BottomTabNavigator = ({}) => {
+const BottomTabNavigator = ({ theme }) => {
   const insets = useSafeAreaInsets();
   const [headerShown, setHeaderShown] = React.useState(true);
   React.useEffect(() => {
@@ -58,6 +57,7 @@ const BottomTabNavigator = ({}) => {
       setHeaderShown(false);
     }, 600);
   }, []);
+
   return (
     <Tab.Navigator
       initialRouteName="HomeTab"
@@ -71,10 +71,11 @@ const BottomTabNavigator = ({}) => {
           transform: [{ scaleX: -1 }],
         },
         tabBarLabelPosition: "below-icon",
-        tabBarActiveTintColor: Colors.theme1["light"].green79,
+        tabBarActiveTintColor: Colors.theme1.green79,
         tabBarInactiveTintColor: "grey",
         tabBarStyle: {
-          backgroundColor: Colors.theme1["light"].white,
+          backgroundColor:
+            theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
           transform: [{ scaleX: -1 }],
           height: 65 + insets.bottom,
         },
@@ -89,8 +90,7 @@ const BottomTabNavigator = ({}) => {
     >
       <Tab.Screen
         name="HomeTab"
-        component={HomeStackScreen}
-        
+        children={() => <HomeStackScreen theme={theme} />}
         options={{
           title: "خانه",
           tabBarIcon: ({ focused, color }) =>
@@ -102,7 +102,7 @@ const BottomTabNavigator = ({}) => {
               >
                 <Path
                   d="M12.62 3.974 5.079 9.85a6.658 6.658 0 0 0-2.281 4.645v10.368a5.912 5.912 0 0 0 5.89 5.9h16.2a5.909 5.909 0 0 0 5.89-5.89V14.691a6.609 6.609 0 0 0-2.518-4.827l-8.644-6.058a6.278 6.278 0 0 0-6.996.168Z"
-                  fill={Colors.theme1["light"].green79}
+                  fill={Colors.theme1.green79}
                 />
                 <Path
                   data-name="Vector"
@@ -123,7 +123,7 @@ const BottomTabNavigator = ({}) => {
                 <Path
                   d="M12.62 3.974 5.079 9.85a6.658 6.658 0 0 0-2.281 4.645v10.368a5.912 5.912 0 0 0 5.89 5.9h16.2a5.909 5.909 0 0 0 5.89-5.89V14.691a6.609 6.609 0 0 0-2.518-4.827l-8.644-6.058a6.278 6.278 0 0 0-6.996.168Z"
                   fill="none"
-                  stroke={Colors.theme1["light"].green79}
+                  stroke={Colors.theme1.green79}
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -132,7 +132,7 @@ const BottomTabNavigator = ({}) => {
                   data-name="Vector"
                   d="M16.79 25.471v-6.693"
                   fill="none"
-                  stroke={Colors.theme1["light"].green79}
+                  stroke={Colors.theme1.green79}
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -143,7 +143,7 @@ const BottomTabNavigator = ({}) => {
       />
       <Tab.Screen
         name="ProductsTab"
-        component={ProductsStackScreen}
+        children={() => <ProductsStackScreen theme={theme} />}
         options={{
           title: "کتاب‌ها",
           tabBarIcon: ({ focused, color }) =>
@@ -155,7 +155,7 @@ const BottomTabNavigator = ({}) => {
               >
                 <Path
                   d="M32.207 24.227V6.798a2.869 2.869 0 0 0-3.179-2.875h-.088a27.857 27.857 0 0 0-10.35 3.422l-.249.159a1.641 1.641 0 0 1-1.552 0l-.361-.216A27.72 27.72 0 0 0 6.09 3.909a2.864 2.864 0 0 0-3.162 2.874v17.444a2.981 2.981 0 0 0 2.547 2.859l.425.058a37.976 37.976 0 0 1 10.892 3.524l.059.029a1.6 1.6 0 0 0 1.405 0 37.631 37.631 0 0 1 10.921-3.552l.483-.058a2.981 2.981 0 0 0 2.547-2.86Z"
-                  fill={Colors.theme1["light"].green79}
+                  fill={Colors.theme1.green79}
                 />
                 <Path
                   data-name="Vector"
@@ -175,7 +175,7 @@ const BottomTabNavigator = ({}) => {
               >
                 <G
                   fill="none"
-                  stroke={Colors.theme1["light"].green79}
+                  stroke={Colors.theme1.green79}
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -193,7 +193,7 @@ const BottomTabNavigator = ({}) => {
 
       <Tab.Screen
         name="VODTab"
-        component={VODStackScreen}
+        children={() => <VODStackScreen theme={theme} />}
         options={{
           unmountOnExit: true,
           unmountOnBlur: true,
@@ -204,8 +204,8 @@ const BottomTabNavigator = ({}) => {
                 <G data-name="Group 2000">
                   <Path
                     d="M25.421 29.241H8.974C4.04 29.241.75 26.392.75 19.744V10.25c0-6.651 3.29-9.5 8.224-9.5h16.447c4.935 0 8.229 2.849 8.229 9.5v9.5c0 6.642-3.294 9.491-8.229 9.491Z"
-                    fill={Colors.theme1["light"].green79}
-                    stroke={Colors.theme1["light"].green79}
+                    fill={Colors.theme1.green79}
+                    stroke={Colors.theme1.green79}
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={1.5}
@@ -228,7 +228,7 @@ const BottomTabNavigator = ({}) => {
                   <Path
                     d="M25.421 29.241H8.974C4.04 29.241.75 26.392.75 19.744V10.25c0-6.651 3.29-9.5 8.224-9.5h16.447c4.935 0 8.229 2.849 8.229 9.5v9.5c0 6.642-3.294 9.491-8.229 9.491Z"
                     fill="none"
-                    stroke={Colors.theme1["light"].green79}
+                    stroke={Colors.theme1.green79}
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={1.5}
@@ -238,7 +238,7 @@ const BottomTabNavigator = ({}) => {
                     data-name="Vector"
                     d="M12.427 14.995v-2.083c0-2.673 1.892-3.766 4.2-2.43l1.805 1.042 1.806 1.041c2.308 1.336 2.308 3.523 0 4.86l-1.806 1.041-1.805 1.046c-2.308 1.332-4.2.239-4.2-2.434v-2.083Z"
                     fill="none"
-                    stroke={Colors.theme1["light"].green79}
+                    stroke={Colors.theme1.green79}
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={1.5}
@@ -250,12 +250,12 @@ const BottomTabNavigator = ({}) => {
       />
       <Tab.Screen
         name="ShoppingCartTab"
-        component={CARTStackScreen}
+        children={() => <CARTStackScreen theme={theme} />}
         options={{
           // tabBarBadge: count,
           // tabBarBadgeStyle: {
           //   color: "white",
-          //   backgroundColor: Colors.theme1['light'].green79,
+          //   backgroundColor: Colors.theme1.['light'].green79,
           //   fontSize: fontSize.sm,
           // },
           title: "سبد خرید",
@@ -267,7 +267,7 @@ const BottomTabNavigator = ({}) => {
                 height={31.017}
               >
                 <G
-                  fill={Colors.theme1["light"].green79}
+                  fill={Colors.theme1.green79}
                   stroke={"white"}
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -289,7 +289,7 @@ const BottomTabNavigator = ({}) => {
               >
                 <G
                   fill="none"
-                  stroke={Colors.theme1["light"].green79}
+                  stroke={Colors.theme1.green79}
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -308,7 +308,7 @@ const BottomTabNavigator = ({}) => {
 
       <Tab.Screen
         name="ProfileTab"
-        component={PROFILEStackScreen}
+        children={() => <PROFILEStackScreen theme={theme} />}
         options={{
           title: "پروفایل",
           tabBarIcon: ({ focused, color }) =>
@@ -318,7 +318,7 @@ const BottomTabNavigator = ({}) => {
                 width={31.192}
                 height={31.192}
               >
-                <G fill={Colors.theme1["light"].green79}>
+                <G fill={Colors.theme1.green79}>
                   <Path d="M15.803 14.127a2.363 2.363 0 0 0-.429 0 5.777 5.777 0 1 1 .429 0Z" />
                   <Path
                     data-name="Vector"
@@ -334,7 +334,7 @@ const BottomTabNavigator = ({}) => {
               >
                 <G
                   fill="none"
-                  stroke={Colors.theme1["light"].green79}
+                  stroke={Colors.theme1.green79}
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -357,12 +357,15 @@ const BottomTabNavigator = ({}) => {
 };
 
 const HomeStack = createNativeStackNavigator();
-const HomeStackScreen = () => {
+const HomeStackScreen = ({ theme }) => {
   return (
     <HomeStack.Navigator
       screenOptions={{
         headerShown: false,
-        contentStyle: { backgroundColor: Colors.theme1["light"].white },
+        contentStyle: {
+          backgroundColor:
+            theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+        },
       }}
       initialRouteName="Home"
     >
@@ -382,12 +385,15 @@ const HomeStackScreen = () => {
 };
 
 const ProductsStack = createNativeStackNavigator();
-const ProductsStackScreen = () => {
+const ProductsStackScreen = ({ theme }) => {
   return (
     <ProductsStack.Navigator
       screenOptions={{
         headerShown: false,
-        contentStyle: { backgroundColor: Colors.theme1["light"].white },
+        contentStyle: {
+          backgroundColor:
+            theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+        },
       }}
       initialRouteName="Products"
     >
@@ -401,12 +407,15 @@ const ProductsStackScreen = () => {
 };
 
 const VODStack = createNativeStackNavigator();
-const VODStackScreen = () => {
+const VODStackScreen = ({ theme }) => {
   return (
     <VODStack.Navigator
       screenOptions={{
         headerShown: false,
-        contentStyle: { backgroundColor: Colors.theme1["light"].white },
+        contentStyle: {
+          backgroundColor:
+            theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+        },
       }}
     >
       <VODStack.Screen name="VOD" component={Videos} />
@@ -418,12 +427,15 @@ const VODStackScreen = () => {
 };
 
 const CARTStack = createNativeStackNavigator();
-const CARTStackScreen = () => {
+const CARTStackScreen = ({ theme }) => {
   return (
     <CARTStack.Navigator
       screenOptions={{
         headerShown: false,
-        contentStyle: { backgroundColor: Colors.theme1["light"].white },
+        contentStyle: {
+          backgroundColor:
+            theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+        },
       }}
     >
       <CARTStack.Screen name="ShoppingCart" component={ShoppingCart} />
@@ -434,12 +446,15 @@ const CARTStackScreen = () => {
 };
 
 const PROFILEStack = createNativeStackNavigator();
-const PROFILEStackScreen = () => {
+const PROFILEStackScreen = ({ theme }) => {
   return (
     <PROFILEStack.Navigator
       screenOptions={{
         headerShown: false,
-        contentStyle: { backgroundColor: Colors.theme1["light"].white },
+        contentStyle: {
+          backgroundColor:
+            theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+        },
       }}
     >
       <PROFILEStack.Screen name="Profile" component={Profile} />
@@ -456,7 +471,14 @@ const PROFILEStackScreen = () => {
 const prefix = Linking.createURL("/");
 
 const Stack = createNativeStackNavigator();
-const Navigation = ({ getStatus, isLogin, userProducts, ltr, setLTR }) => {
+const Navigation = ({
+  getStatus,
+  isLogin,
+  userProducts,
+  ltr,
+  setLTR,
+  theme,
+}) => {
   const linking = {
     prefixes: [prefix],
   };
@@ -480,14 +502,20 @@ const Navigation = ({ getStatus, isLogin, userProducts, ltr, setLTR }) => {
         // initialRouteName="Root"
         screenOptions={{
           headerShown: false,
-          contentStyle: { backgroundColor: Colors.theme1["light"].white },
+          contentStyle: {
+            backgroundColor:
+              theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+          },
         }}
       >
         <Stack.Screen name="Splash" component={Splash} />
         <Stack.Screen name="Login" component={Login} />
         <Stack.Screen name="Rules" component={Rules} />
         <Stack.Screen name="Otp" component={Otp} />
-        <Stack.Screen name="Root" component={BottomTabNavigator} />
+        <Stack.Screen
+          name="Root"
+          children={() => <BottomTabNavigator theme={theme} />}
+        />
         <Stack.Screen name="QR" component={QR} />
         <Stack.Screen name="Orders" component={OrdersFollowUp} />
         <Stack.Screen name="Order" component={OrderDetails} />
@@ -516,4 +544,5 @@ const mapDispatchToProps = {
   getStatus: user.getStatus,
   setLTR: publicApi.setLTR,
 };
+
 export default connect(mapStateToProps, mapDispatchToProps)(Navigation);

src/components/CustomTextInput.js

@@ -26,9 +26,6 @@ const FloatingLabelInput = ({
   ...props
 }) => {
   const [isFocused, setIsFocused] = React.useState(false);
-  const color = React.useMemo(() => {
-    return Colors.theme1[theme];
-  }, [theme]);
 
   const styles = StyleSheet.create({
     labelStyle: {
@@ -44,13 +41,15 @@ const FloatingLabelInput = ({
             : -Math.floor(fontSize.sm),
         },
       ],
-      color: !isFocused ? color.gray2077 : color.green79,
+      color: !isFocused ? Colors.theme1.gray2077 : Colors.theme1.green79,
     },
     inputStyle: {
       fontSize: fontSize.lg,
-      color: color.black,
+      color: Colors.theme1.black,
       borderWidth: 1,
-      borderColor: isFocused ? color.greenC8 : color.gray2077 + "66",
+      borderColor: isFocused
+        ? Colors.theme1.greenC8
+        : Colors.theme1.gray2077 + "66",
       textAlign: textAlign,
       fontFamily: "regular",
       direction: direction ? direction : "rtl",

src/components/Drawer.js

@@ -14,7 +14,7 @@ import {
 import { useNavigation } from "@react-navigation/native";
 import { asyncAwesomeAlert } from "../utils/AsyncWrappers";
 import { connect } from "react-redux";
-import { user } from "../redux/actions";
+import { user, publicApi } from "../redux/actions";
 import Svg, { Path, G } from "react-native-svg";
 import { AntDesign } from "@expo/vector-icons";
 
@@ -36,7 +36,14 @@ if (
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
-const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
+const Drawer = ({
+  position,
+  setBoxPosition,
+  user,
+  mobile,
+  theme,
+  setIsDark,
+}) => {
   const [height, setHeight] = useState(Dimensions.get("window").height);
   const [width, setWidth] = useState(Dimensions.get("window").width);
   const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
@@ -44,10 +51,6 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
   const [dropdownHeight, setDropdownHeight] = useState(0);
   const navigation = useNavigation();
 
-  const color = React.useMemo(() => {
-    return Colors.theme1[theme];
-  }, [theme]);
-
   const routes = React.useMemo(() => {
     return [
       {
@@ -62,7 +65,9 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
           >
             <G
               fill="none"
-              stroke="#292d32"
+              stroke={
+                theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white
+              }
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={1.5}
@@ -87,7 +92,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
             <G
               data-name="Group 1"
               fill="none"
-              stroke="#292d32"
+              stroke={theme === "light" ? "#292d32" : Colors.theme1.white}
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={1.5}
@@ -116,7 +121,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
             <G
               data-name="3dcube"
               fill="none"
-              stroke="#292d32"
+              stroke={theme === "light" ? "#292d32" : Colors.theme1.white}
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={1.5}
@@ -143,7 +148,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
           >
             <G
               fill="none"
-              stroke="#292d32"
+              stroke={theme === "light" ? "#292d32" : Colors.theme1.white}
               strokeLinecap="round"
               strokeWidth={1.5}
               strokeLinejoin="round"
@@ -173,7 +178,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
             <Path
               d="M8.67 14H4a2.006 2.006 0 0 0-2 2v6h6.67Z"
               fill="none"
-              stroke="#292d32"
+              stroke={theme === "light" ? "#292d32" : Colors.theme1.white}
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={1.5}
@@ -182,7 +187,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
               data-name="Vector"
               d="M13.33 10h-2.67a2.006 2.006 0 0 0-2 2v10h6.67V12a2 2 0 0 0-2-2ZM20 17h-4.67v5H22v-3a2.006 2.006 0 0 0-2-2ZM12.52 2.07l.53 1.06a.6.6 0 0 0 .42.31l.96.16c.61.1.76.55.32.98l-.75.75a.639.639 0 0 0-.16.54l.21.92c.17.73-.22 1.01-.86.63l-.9-.53a.618.618 0 0 0-.59 0l-.9.53c-.64.38-1.03.1-.86-.63l.21-.92a.63.63 0 0 0-.156-.54l-.74-.74c-.44-.44-.3-.88.32-.98l.96-.16a.666.666 0 0 0 .42-.31l.53-1.06c.286-.58.746-.58 1.036-.01Z"
               fill="none"
-              stroke="#292d32"
+              stroke={theme === "light" ? "#292d32" : Colors.theme1.white}
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={1.5}
@@ -204,7 +209,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
           >
             <G
               fill="none"
-              stroke="#292d32"
+              stroke={theme === "light" ? "#292d32" : Colors.theme1.white}
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={1.5}
@@ -233,7 +238,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
             <G
               data-name="call-calling"
               fill="none"
-              stroke="#292d32"
+              stroke={theme === "light" ? "#292d32" : Colors.theme1.white}
               strokeWidth={1.5}
             >
               <Path d="M21.97 18.33a2.545 2.545 0 0 1-.25 1.09 4.126 4.126 0 0 1-.68 1.02 4.508 4.508 0 0 1-1.64 1.18 5.022 5.022 0 0 1-1.95.38 8.334 8.334 0 0 1-3.26-.73 17.564 17.564 0 0 1-3.44-1.98 28.75 28.75 0 0 1-3.28-2.8 28.414 28.414 0 0 1-2.79-3.27 17.828 17.828 0 0 1-1.96-3.41A8.423 8.423 0 0 1 2 6.54a5.173 5.173 0 0 1 .36-1.93 4.6 4.6 0 0 1 1.15-1.67A2.93 2.93 0 0 1 5.59 2a1.879 1.879 0 0 1 .81.18 1.63 1.63 0 0 1 .67.56l2.32 3.27a3.422 3.422 0 0 1 .4.7 1.581 1.581 0 0 1 .14.61 1.357 1.357 0 0 1-.21.71 3.4 3.4 0 0 1-.56.71l-.76.79a.535.535 0 0 0-.16.4.908.908 0 0 0 .03.23c.03.08.06.14.08.2a8.3 8.3 0 0 0 .93 1.28c.45.52.93 1.05 1.45 1.58.54.53 1.06 1.02 1.59 1.47a7.675 7.675 0 0 0 1.29.92c.05.02.11.05.18.08a.69.69 0 0 0 .25.04.55.55 0 0 0 .41-.17l.76-.75a3.068 3.068 0 0 1 .72-.56 1.332 1.332 0 0 1 .71-.21 1.6 1.6 0 0 1 .61.13 3.868 3.868 0 0 1 .7.39l3.31 2.35a1.517 1.517 0 0 1 .55.64 2.052 2.052 0 0 1 .16.78Z" />
@@ -250,7 +255,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
         message: "",
       },
     ];
-  }, [user]);
+  }, [user, theme]);
 
   const Route = React.useCallback(
     ({ route }) => {
@@ -276,6 +281,10 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
               {
                 fontFamily: "regular",
                 fontSize: mobile ? fontSize.base : fontSize.lg,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.white,
               },
             ]}
           >
@@ -284,14 +293,14 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
         </TouchableOpacity>
       );
     },
-    [mobile, position]
+    [mobile, position, theme]
   );
 
   React.useEffect(() => {
     if (position === "0%") {
       setTimeout(() => {
         Animated.timing(fadeAnim, {
-          toValue: 0.5,
+          toValue: 0.7,
           duration: 300,
           useNativeDriver: true, // Add This line
         }).start();
@@ -334,25 +343,82 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
         style={[tw("w-1/5 h-full bg-black"), { opacity: fadeAnim }]}
       >
         <Pressable
-          style={tw("flex-1")}
+          style={tw("flex-1 items-center pt-12")}
           onPress={() => setBoxPosition()}
-        ></Pressable>
+        >
+          <AntDesign
+            name="close"
+            size={mobile ? 25 : 30}
+            color={Colors.theme1.white}
+            onPress={() => setBoxPosition()}
+          />
+        </Pressable>
       </Animated.View>
-      <View style={[tw("w-4/5 bg-white h-full flex")]}>
+      <View
+        style={[
+          tw("w-4/5 h-full flex"),
+          {
+            backgroundColor:
+              theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
+          },
+        ]}
+      >
         <View
           style={[
             tw("flex items-end pt-12 px-4"),
-            { backgroundColor: color.greenCF },
+            {
+              backgroundColor:
+                theme === "light"
+                  ? Colors.theme1.greenCF
+                  : Colors.theme1.blue90,
+            },
           ]}
         >
-          <View style={tw("flex flex-row-reverse w-full justify-between")}>
+          <View
+            style={tw(
+              "flex flex-row-reverse items-center w-full justify-between"
+            )}
+          >
             <Avatar souce={user?.picFileIds} size={width / 6} />
-            <AntDesign
-              name="close"
-              size={mobile ? 20 : 30}
-              color={color.white}
-              onPress={() => setBoxPosition()}
+            {theme === "light" ? (
+              <Svg
+                xmlns="http://www.w3.org/2000/svg"
+                onPress={() => setIsDark("dark")}
+                width={24}
+                height={24}
+                style={{ padding: 10 }}
+              >
+                <Path
+                  d="M2.03 12.42a10.506 10.506 0 0 0 18.93 5.3c.82-1.11.38-1.85-.99-1.6a9.494 9.494 0 0 1-2.08.14 9.324 9.324 0 0 1-8.91-9.12 8.9 8.9 0 0 1 .75-3.65c.54-1.24-.11-1.83-1.36-1.3a10.3 10.3 0 0 0-6.34 10.23Z"
+                  fill="#fff"
+                  data-name="vuesax/linear/moon"
+                />
+              </Svg>
+            ) : (
+              <Svg
+                xmlns="http://www.w3.org/2000/svg"
+                onPress={() => setIsDark("light")}
+                width={24}
+                height={24}
+                style={{ padding: 10 }}
+              >
+                <G data-name="vuesax/linear/sun">
+                  <Path
+                    d="M18.5 12A6.5 6.5 0 1 1 12 5.5a6.5 6.5 0 0 1 6.5 6.5Z"
+                    fill="#fff"
+                  />
+                  <Path
+                    data-name="Vector"
+                    d="m19.01 4.99.13-.13ZM4.86 19.14l.13-.13ZM12 2.08h0ZM12 22h0ZM2.08 12h0ZM22 12h0ZM4.99 4.99l-.13-.13Zm14.15 14.15-.13-.13"
+                    fill="none"
+                    stroke="#fff"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
                   />
+                </G>
+              </Svg>
+            )}
           </View>
 
           <View
@@ -383,7 +449,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
                 {user?.cellphone}
               </Text>
             </View>
-            <Svg
+            {/* <Svg
               data-name="vuesax/linear/arrow-left"
               xmlns="http://www.w3.org/2000/svg"
               width={24}
@@ -402,18 +468,18 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
                 strokeLinejoin="round"
                 strokeWidth={2}
               />
-            </Svg>
+            </Svg> */}
           </View>
         </View>
         <View style={tw("flex-1 flex")}>
-          <Pressable
+          {/* <Pressable
             style={[
               tw(
                 `flex flex-row justify-between items-center w-full flex-row-reverse px-4 overflow-hidden`
               ),
               {
                 borderBottomWidth: 1,
-                borderColor: color.grayE3,
+                borderColor: Colors.theme1.grayE3,
                 height: dropdownHeight,
               },
             ]}
@@ -428,7 +494,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
               style={{
                 fontSize: mobile ? fontSize.base : fontSize.xl,
                 fontFamily: "regular",
-                color: color.gray20,
+                color: Colors.theme1.gray20,
               }}
             >
               افزودن حساب کاربری جدید
@@ -439,12 +505,12 @@ const Drawer = ({ position, setBoxPosition, user, mobile, theme }) => {
                 marginTop: 3,
                 fontSize: fontSize.xl4,
                 fontFamily: "bold",
-                color: color.gray20 + "77",
+                color: Colors.theme1.gray20 + "77",
               }}
             >
               +
             </Text>
-          </Pressable>
+          </Pressable> */}
           <View style={tw("flex w-full px-4")}>
             {routes.map((route, index) => (
               <Route route={route} key={index} />
@@ -464,6 +530,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = {
   logout: user.logout,
+  setIsDark: publicApi.setIsDark,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Drawer);

src/components/Empty.js

@@ -16,7 +16,7 @@ const Empty = ({ text, buttonText, buttonAction, theme }) => {
             fontFamily: "regular",
             fontSize: fontSize.tiny,
             transform: [{ translateY: -50 }],
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
           },
         ]}
       >
@@ -26,7 +26,7 @@ const Empty = ({ text, buttonText, buttonAction, theme }) => {
         <Pressable
           style={[
             tw("py-2 px-5 rounded-sm"),
-            { backgroundColor: Colors.theme1[theme].greenCF },
+            { backgroundColor: Colors.theme1.greenCF },
           ]}
           onPress={() => buttonAction()}
         >

src/components/Header.js

@@ -15,7 +15,7 @@ function Header({ title, description, background }) {
         tw(`w-full flex  items-center pb-7`),
         {
           height: height / 4.5,
-          backgroundColor: Colors.theme1["light"].greenCF + "0F",
+          backgroundColor: Colors.theme1.greenCF + "0F",
         },
       ]}
     >
@@ -28,7 +28,7 @@ function Header({ title, description, background }) {
         style={[
           {
             fontSize: fontSize.xl,
-            color: Colors.theme1["light"].greenCF,
+            color: Colors.theme1.greenCF,
             fontFamily: "bold",
           },
         ]}
@@ -38,7 +38,7 @@ function Header({ title, description, background }) {
       <Text
         style={[
           {
-            color: Colors.theme1["light"].greenCF,
+            color: Colors.theme1.greenCF,
             fontSize: fontSize.sm,
             fontFamily: "regular",
             marginTop: 5

src/components/Navbar.js

@@ -25,7 +25,7 @@ import { connect } from "react-redux";
 import { userFavorite } from "../redux/actions";
 
 //style
-import Color from "../constants/Colors";
+import Colors from "../constants/Colors";
 import tw from "tailwind-rn";
 import fontSize from "../constants/fontSize";
 
@@ -55,8 +55,8 @@ const Navbar = ({
         style={[
           tw("rounded-md p-1"),
           {
-            backgroundColor: Color.theme1[theme].greenCF + "05",
-            borderColor: Color.theme1[theme].green79,
+            backgrounds: Colors.theme1.greenCF + "05",
+            borderColor: Colors.theme1.green79,
             borderWidth: 1,
             marginLeft: route === "AR" ? 10 : 0,
           },
@@ -70,13 +70,13 @@ const Navbar = ({
   return (
     <View
       style={[
-        tw(
-          "w-full flex flex-row-reverse justify-between bg-white items-center px-0"
-        ),
+        tw("w-full flex flex-row-reverse justify-between  items-center px-0"),
         {
           backgroundColor: headerOptions?.backgroundColor
             ? headerOptions?.backgroundColor
-            : "white",
+            : theme === "light"
+            ? Colors.theme1.white
+            : Colors.theme1.dark,
           height: 64,
         },
       ]}
@@ -97,7 +97,7 @@ const Navbar = ({
           style={{
             fontFamily: "demi",
             fontSize: fontSize.xl,
-            color: Color.theme1[theme].green79,
+            color: Colors.theme1.green79,
             paddingRight: 16,
           }}
         >
@@ -400,7 +400,7 @@ const Navbar = ({
         ) : null}
         {headerOptions?.bookmark ? (
           bookmarkLoading ? (
-            <ActivityIndicator size={20} color={Color.theme1[theme].green79} />
+            <ActivityIndicator size={20} color={Colors.theme1.green79} />
           ) : isActiveBookmark ? (
             <Ionicons
               name="bookmark"

src/components/Progress.js

@@ -13,14 +13,14 @@ function Progress({ percent, alignItems, theme }) {
         tw(
           `w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`
         ),
-        { backgroundColor: Colors.theme1[theme].green79 + "22" },
+        { backgroundColor: Colors.theme1.green79 + "22" },
       ]}
     >
       <View
         style={[
           tw("h-full rounded-full"),
           {
-            backgroundColor: Colors.theme1[theme].greenCF,
+            backgroundColor: Colors.theme1.greenCF,
             width: percent + "%",
             // backgroundColor: Color.theme1.light.blue4,
           },

src/components/Search.js

@@ -19,14 +19,14 @@ const Search = ({
   const styles = StyleSheet.create({
     inputStyle: {
       fontSize: fontSize.tiny,
-      color: Colors.theme1[theme].gray2077,
+      color: Colors.theme1.gray2077,
       borderWidth: 0.5,
-      borderColor: Colors.theme1[theme].gray20 + "88",
+      borderColor: Colors.theme1.gray20 + "88",
       paddingVertical: 10,
       paddingHorizontal: 10,
       direction: direction,
       textAlign: textAlign,
-      backgroundColor: Colors.theme1[theme].white,
+      backgroundColor: Colors.theme1.white,
       fontFamily: "regular",
     },
   });
@@ -36,7 +36,7 @@ const Search = ({
         style={[styles.inputStyle, tw("rounded-sm")]}
         onChangeText={(text) => onChange(text)}
         placeholder={placeholder}
-        placeholderTextColor={Colors.theme1[theme].gray20 + '88'}
+        placeholderTextColor={Colors.theme1.gray20 + '88'}
         value={value}
       />
       <Pressable style={tw("absolute left-3 top-3")}>

src/components/Select.js

@@ -21,7 +21,7 @@ function Select({
       buttonStyle={{
         width: width,
         borderWidth: 1,
-        borderColor: Colors.theme1[theme].gray2077 + "66",
+        borderColor: Colors.theme1.gray2077 + "66",
         borderRadius: 2,
         height: 48,
         backgroundColor: "white",
@@ -38,7 +38,7 @@ function Select({
         justifyContent: "flex-end",
         flex: 0,
         fontSize: fontSize.tiny,
-        color: Colors.theme1[theme].gray2077,
+        color: Colors.theme1.gray2077,
         fontFamily: "regular",
         // display: 'inline'
       }}
@@ -56,7 +56,7 @@ function Select({
           <Path
             d="m13.347 5.997-4.368 4.369a1.331 1.331 0 0 1-1.876 0L2.734 5.997"
             fill="none"
-            stroke={Colors.theme1[theme].gray2077 + "66"}
+            stroke={Colors.theme1.gray2077 + "66"}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}

src/constants/Colors.js

@@ -1,6 +1,5 @@
 const Colors = {
   theme1: {
-    light: {
     //green
     green79: "#52796F",
     greenBA: "#06BAC0",
@@ -39,48 +38,8 @@ const Colors = {
     orange1: "#FF6600",
     //black
     black: "#000000",
-      white: "#FFFFFF"
-    },
-    dark: {
-      //green
-      green79: "#52796F",
-      greenBA: "#06BAC0",
-      greenC8: "#76C893", 
-      greenCF: "#12CF7F",
-      greenD9: "#99D98C", 
-      greenDD: "#D5DDBC", 
-      greenFF: "#00FF80",
-      greenFF1: "#DEFFF1", 
-      //blue
-      blue90: "#235A90",
-      blueCB: "#98B2CB",
-      blueEB: "#2B8DEB",
-      blueFA: "#F8F9FA",
-      blueFA1: "#9CF1FA",
-      blueFD: "#F6F9FD",
-      blueFD1: "#F4F8FD",
-      blueFDOP: "rgba(6, 146, 255, 0.36)",
-      blueFF: "#E8FCFF",
-      blueFF1: "#E9F0FF",
-      //gray
-      gray20: "#202020",
-      gray2077: "#2F3E46",
-      grayE3: "#E3E3E3",
-      grayF9: "#F9F9F9", 
-      //red
-      redC0: "C01919",
-      redFF: "#FFE6E6",
-      redFF1: "#FF2020",
-      //yellow
-      yellow2: "#FDFFDA",
-      yellow3: "#EFFF00",
-      yellow4: "#FFEE00",
-      //orange
-      orange1: "#FF6600",
-      //black
-      black: "#FFFFFF",
-      white: "#000000"
-    },
+    white: "#FFFFFF",
+    dark : '#061B30',
   },
 };
 

src/redux/reducers/public.js

@@ -81,7 +81,7 @@ const publicApi = (state = initialState, action) => {
       return { ...state, ltr : true };
     case "public/setIsDark":
       // AsyncStorage.setItem("isDark", data);
-      return { ...state, location: false, error: null, isDark: data };
+      return { ...state, location: false, error: null, theme: data };
     case "active/video":
       return {
         ...state,

src/screens/AR/components/Book.js

@@ -38,7 +38,7 @@ const Book = ({ book, mobile, theme }) => {
             fontFamily: "bold",
             fontSize: fontSize.tiny,
             marginTop: 10,
-            color: Colors.theme1[theme].green79,
+            color: Colors.theme1.green79,
           },
         ]}
       >

src/screens/Activation/index.js

@@ -63,7 +63,7 @@ function Activation({ add, mobile, theme, route }) {
                     bookmark: false,
                     qr: true,
                     back: true,
-                    backgroundColor: Colors.theme1[theme].greenCF + "0F",
+                    backgroundColor: Colors.theme1.greenCF + "0F",
                   }}
                 />
                 <View style={tw("flex  w-full")}>
@@ -107,7 +107,7 @@ function Activation({ add, mobile, theme, route }) {
                 />
                 <CustomPressable
                   title={"تایید کد"}
-                  backgroundColor={Colors.theme1[theme].greenCF}
+                  backgroundColor={Colors.theme1.greenCF}
                   color={"white"}
                   border={{ color: "#196EC0", width: 0 }}
                   width={"100%"}
@@ -116,7 +116,7 @@ function Activation({ add, mobile, theme, route }) {
                 <Or />
                 <CustomPressable
                   title={"فعالسازی با کد QR"}
-                  backgroundColor={Colors.theme1[theme].greenD9}
+                  backgroundColor={Colors.theme1.greenD9}
                   color={"white"}
                   border={{ color: "#196EC0", width: 0 }}
                   width={"100%"}

src/screens/Address/index.js

@@ -226,7 +226,7 @@ const Address = ({
           style={{
             fontFamily: "bold",
             fontSize: mobile ? fontSize.lg : fontSize.xl2,
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1.gray20,
             textAlign: ios ? "right" : "auto",
           }}
         >
@@ -236,7 +236,7 @@ const Address = ({
           style={{
             fontFamily: "regular",
             fontSize: mobile ? fontSize.sm : fontSize.base,
-            color: Colors.theme1[colorScheme].gray20 + "aa",
+            color: Colors.theme1.gray20 + "aa",
             textAlign: ios ? "right" : "auto",
           }}
         >
@@ -440,7 +440,7 @@ const Address = ({
                     ? "ذخیره اطلاعات و بازگشت به صفحه قبل"
                     : "ثبت آدرس"
                 }
-                backgroundColor={Colors.theme1[colorScheme].greenCF}
+                backgroundColor={Colors.theme1.greenCF}
                 color={"white"}
                 border={{ color: "#196EC0", width: 0 }}
                 width={"100%"}

src/screens/Blog/index.js

@@ -111,7 +111,7 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
                       <Text
                         style={{
                           fontFamily: "regular",
-                          color: Colors.theme1[theme].white,
+                          color: Colors.theme1.white,
                           fontSize: fontSize.tiny,
                           textAlign: ios ? "right" : "auto",
                         }}
@@ -121,7 +121,7 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
                       <Text
                         style={{
                           fontFamily: "regular",
-                          color: Colors.theme1[theme].white,
+                          color: Colors.theme1.white,
                           fontSize: fontSize.tiny,
                           textAlign: ios ? "right" : "auto",
                         }}
@@ -134,7 +134,7 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
                     <Text
                       style={{
                         fontFamily: "regular",
-                        color: Colors.theme1[theme].white,
+                        color: Colors.theme1.white,
                         fontSize: fontSize.sm,
                         textAlign: ios ? "left" : "left",
                       }}
@@ -144,7 +144,7 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
                     <Text
                       style={{
                         fontFamily: "regular",
-                        color: Colors.theme1[theme].white,
+                        color: Colors.theme1.white,
                         fontSize: fontSize.sm,
                         textAlign: ios ? "left" : "left",
                       }}

src/screens/Blogs/layouts/Hashtags.js

@@ -15,7 +15,7 @@ export const Hashtags = ({ hashtags, theme }) => {
         tw(
           "flex flex-row-reverse py-1 pl-3 rounded-full items-center w-full mb-7"
         ),
-        {borderWidth : 2, borderColor : Colors.theme1[theme].greenFF1}
+        {borderWidth : 2, borderColor : Colors.theme1.greenFF1}
       ]}
     >
       <Svg xmlns="http://www.w3.org/2000/svg" width={31.486} height={19.692}>

src/screens/Blogs/layouts/Header.js

@@ -15,15 +15,15 @@ export const Header = ({ title, theme }) => {
           tw("py-2.5 pr-2.5 pl-5"),
           {
             fontSize: fontSize.base,
-            color: Colors.theme1[theme].white,
-            backgroundColor: Colors.theme1[theme].black,
+            color: Colors.theme1.white,
+            backgroundColor: Colors.theme1.black,
             fontFamily : 'bold'
           },
         ]}
       >
         {title}
       </Text>
-      <View style={{ width : '100%', backgroundColor : Colors.theme1[theme].grayE3, height : 2 }}></View>
+      <View style={{ width : '100%', backgroundColor : Colors.theme1.grayE3, height : 2 }}></View>
     </View>
   );
 };

src/screens/Blogs/layouts/New.js

@@ -35,7 +35,7 @@ export const New = ({ blog, theme }) => {
         style={{
           fontSize: fontSize.tiny,
           fontFamily: "bold",
-          color: Colors.theme1[theme].gray20,
+          color: Colors.theme1.gray20,
           marginTop: 5,
           textAlign: ios ? "right" : "auto",
         }}
@@ -46,7 +46,7 @@ export const New = ({ blog, theme }) => {
         style={{
           fontSize: fontSize.xs,
           fontFamily: "regular",
-          color: Colors.theme1[theme].gray2077,
+          color: Colors.theme1.gray2077,
           textAlign: ios ? "right" : "auto",
           marginTop: 5,
         }}

src/screens/Blogs/layouts/Single.js

@@ -109,7 +109,7 @@ export const Single = ({ blog, theme }) => {
             style={{
               fontFamily: "bold",
               fontSize: fontSize.lg,
-              color: Colors.theme1[theme].gray20,
+              color: Colors.theme1.gray20,
               textAlign: ios ? "right" : "auto",
             }}
           >
@@ -119,7 +119,7 @@ export const Single = ({ blog, theme }) => {
             style={{
               fontFamily: "regular",
               fontSize: fontSize.sm,
-              color: Colors.theme1[theme].gray2077,
+              color: Colors.theme1.gray2077,
               lineHeight: 25,
               marginTop: 10,
               textAlign: ios ? "right" : "auto",

src/screens/Blogs/layouts/Target.js

@@ -73,7 +73,7 @@ const Target = ({ blogs, theme }) => {
                 style={[
                   {
                     fontFamily: "bold",
-                    color: Colors.theme1[theme].gray20,
+                    color: Colors.theme1.gray20,
                     fontSize: fontSize.tiny,
                   },
                 ]}
@@ -84,7 +84,7 @@ const Target = ({ blogs, theme }) => {
                 style={[
                   {
                     fontFamily: "regular",
-                    color: Colors.theme1[theme].gray20,
+                    color: Colors.theme1.gray20,
                     fontSize: fontSize.xs,
                   },
                 ]}
@@ -98,7 +98,7 @@ const Target = ({ blogs, theme }) => {
               style={[
                 {
                   fontFamily: "bold",
-                  color: Colors.theme1[theme].gray20,
+                  color: Colors.theme1.gray20,
                   fontSize: fontSize.sm,
                 },
               ]}
@@ -110,7 +110,7 @@ const Target = ({ blogs, theme }) => {
                 tw("mt-0"),
                 {
                   fontFamily: "bold",
-                  color: Colors.theme1[theme].gray20,
+                  color: Colors.theme1.gray20,
                   fontSize: fontSize.sm,
                 },
               ]}

src/screens/Contact/index.js

@@ -45,7 +45,7 @@ function Contact({ info, theme }) {
           bookmark: false,
           qr: true,
           back: true,
-          backgroundColor: Colors.theme1[theme].greenCF + "0F",
+          backgroundColor: Colors.theme1.greenCF + "0F",
         }}
       />
       <Header

src/screens/Contact/layouts/Ticket.js

@@ -159,7 +159,7 @@ export const Ticket = ({
       <View style={tw("w-full px-4")}>
         <CustomPressable
           title={"ارسال پیام"}
-          backgroundColor={Colors.theme1[theme].greenCF}
+          backgroundColor={Colors.theme1.greenCF}
           color={"white"}
           border={{ color: "#196EC0", width: 0 }}
           width={"100%"}

src/screens/Contact/layouts/Tickets.js

@@ -56,7 +56,7 @@ export const Tickets = ({ tickets = [], theme }) => {
       <View style={tw("w-full px-4")}>
         <CustomPressable
           title={"ارسال تیکت جدید"}
-          backgroundColor={Colors.theme1[theme].greenCF}
+          backgroundColor={Colors.theme1.greenCF}
           color={"white"}
           border={{ color: "#196EC0", width: 0 }}
           width={"100%"}

src/screens/DeliveryForm/Address/index.js

@@ -36,13 +36,13 @@ const Address = ({
           {
             backgroundColor:
               userAddressId === address?.id
-                ? Colors.theme1[theme].greenCF + "15"
-                : Colors.theme1[theme].grayE3 + "44",
+                ? Colors.theme1.greenCF + "15"
+                : Colors.theme1.grayE3 + "44",
             borderWidth: 1.5,
             borderColor:
               userAddressId === address?.id
-                ? Colors.theme1[theme].greenCF
-                : Colors.theme1[theme].grayE3,
+                ? Colors.theme1.greenCF
+                : Colors.theme1.grayE3,
           },
           tw(
             `flex flex-row-reverse items-center w-full px-3 rounded-sm mt-2 ${
@@ -60,7 +60,7 @@ const Address = ({
           userAddressId !== address?.id ? (
             <ActivityIndicator
               size="small"
-              color={Colors.theme1[theme].greenC8}
+              color={Colors.theme1.greenC8}
             />
           ) : (
             <View
@@ -68,13 +68,13 @@ const Address = ({
                 tw("w-5 h-5 rounded-full"),
                 {
                   backgroundColor: active
-                    ? Colors.theme1[theme].greenCF
+                    ? Colors.theme1.greenCF
                     : "white",
                   borderWidth: userAddressId === address?.id ? 4 : 1,
                   borderColor:
                     userAddressId === address?.id
-                      ? Colors.theme1[theme].black
-                      : Colors.theme1[theme].gray20 + "33",
+                      ? Colors.theme1.black
+                      : Colors.theme1.gray20 + "33",
                 },
               ]}
             ></View>
@@ -112,8 +112,8 @@ const Address = ({
       <TouchableOpacity
         style={[
           {
-            backgroundColor: Colors.theme1[theme].grayE3 + "44",
-            borderColor: Colors.theme1[theme].gray2077 + "55",
+            backgroundColor: Colors.theme1.grayE3 + "44",
+            borderColor: Colors.theme1.gray2077 + "55",
             borderWidth: 1.5,
           },
           tw(
@@ -126,7 +126,7 @@ const Address = ({
           style={{
             fontFamily: "regular",
             fontSize: mobile ? fontSize.sm : fontSize.lg,
-            color: Colors.theme1[theme].gray2077,
+            color: Colors.theme1.gray2077,
           }}
         >
           یک آدرس جدید اضافه کنید
@@ -135,7 +135,7 @@ const Address = ({
           style={{
             marginRight: 5,
             fontSize: mobile ? fontSize.xl : fontSize.xl4,
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
           }}
         >
           +

src/screens/DeliveryForm/TransportDate/index.js

@@ -19,12 +19,12 @@ const TransportDate = ({ transportDate, mobile, theme }) => {
           tw(`flex flex-row-reverse justify-between items-center w-full px-3 ${mobile ? "py-3" : "py-2"} rounded-sm mt-3`),
           {
             backgroundColor: active
-              ? Colors.theme1[theme].greenCF + "15"
-              : Colors.theme1[theme].grayE3 + "44",
+              ? Colors.theme1.greenCF + "15"
+              : Colors.theme1.grayE3 + "44",
             borderWidth: 1.5,
             borderColor: active
-              ? Colors.theme1[theme].greenCF
-              : Colors.theme1[theme].grayE3,
+              ? Colors.theme1.greenCF
+              : Colors.theme1.grayE3,
           },
         ]}
         onPress={() => setActiveDate(time)}
@@ -34,8 +34,8 @@ const TransportDate = ({ transportDate, mobile, theme }) => {
             fontFamily: "regular",
             fontSize: mobile ? fontSize.tiny : fontSize.xl,
             color: active
-              ? Colors.theme1[theme].gray20
-              : Colors.theme1[theme].gray20,
+              ? Colors.theme1.gray20
+              : Colors.theme1.gray20,
           }}
         >
           {time.time}
@@ -57,8 +57,8 @@ const TransportDate = ({ transportDate, mobile, theme }) => {
                 fontFamily: "regular",
                 fontSize: mobile ? fontSize.sm : fontSize.base,
                 color: active
-                  ? Colors.theme1[theme].green20
-                  : Colors.theme1[theme].gray20,
+                  ? Colors.theme1.green20
+                  : Colors.theme1.gray20,
               }}
             >
               تکمیل ظرفیت
@@ -73,7 +73,7 @@ const TransportDate = ({ transportDate, mobile, theme }) => {
         style={{
           fontSize: mobile ? fontSize.base : fontSize.xl2,
           fontFamily: "bold",
-          color: Colors.theme1[theme].green79,
+          color: Colors.theme1.green79,
           textAlign : ios ? "right" : "auto",
         }}
       >

src/screens/DeliveryForm/TransportMethod/index.js

@@ -44,12 +44,12 @@ const TransportMethod = ({
             ),
             {
               backgroundColor: active
-                ? Colors.theme1[theme].greenCF + "15"
-                : Colors.theme1[theme].grayE3 + "44",
+                ? Colors.theme1.greenCF + "15"
+                : Colors.theme1.grayE3 + "44",
               borderWidth: 1.5,
               borderColor: active
-                ? Colors.theme1[theme].greenCF
-                : Colors.theme1[theme].grayE3,
+                ? Colors.theme1.greenCF
+                : Colors.theme1.grayE3,
             },
           ]}
           onPress={() =>
@@ -67,8 +67,8 @@ const TransportMethod = ({
               size="small"
               color={
                 factorInfo?.transportId === method?.id
-                  ? Colors.theme1[theme].greenC8
-                  : Colors.theme1[theme].gray20
+                  ? Colors.theme1.greenC8
+                  : Colors.theme1.gray20
               }
             />
           ) : (
@@ -77,8 +77,8 @@ const TransportMethod = ({
                 fontFamily: "regular",
                 fontSize: mobile ? fontSize.tiny : fontSize.xl2,
                 color: active
-                  ? Colors.theme1[theme].gray20
-                  : Colors.theme1[theme].gray20,
+                  ? Colors.theme1.gray20
+                  : Colors.theme1.gray20,
               }}
             >
               {method.name}
@@ -100,8 +100,8 @@ const TransportMethod = ({
                 fontFamily: "regular",
                 fontSize: mobile ? fontSize.base : fontSize.base,
                 color: active
-                  ? Colors.theme1[theme].green20
-                  : Colors.theme1[theme].gray20,
+                  ? Colors.theme1.green20
+                  : Colors.theme1.gray20,
               }}
             >
               {separate(method.price) + " " + "تومان"}
@@ -118,7 +118,7 @@ const TransportMethod = ({
         style={{
           fontSize: mobile ? fontSize.base : fontSize.xl,
           fontFamily: "bold",
-          color: Colors.theme1[theme].green79,
+          color: Colors.theme1.green79,
           textAlign: ios ? "right" : "auto",
         }}
       >

src/screens/DeliveryForm/index.js

@@ -63,7 +63,7 @@ const DeliveryForm = ({ list, form, getList, getFactorInfo, userId, payFactor, f
           </View>
           <CustomPressable
             title={"ادامه فرایند خرید"}
-            backgroundColor={Colors.theme1[theme].greenCF}
+            backgroundColor={Colors.theme1.greenCF}
             color={"white"}
             border={{ color: "#196EC0", width: 0 }}
             width={"100%"}

src/screens/Faq/components/Instance.js

@@ -15,10 +15,10 @@ function Instance({ question, selectFaq, mobile, theme }) {
         {
           backgroundColor: !question.active
             ? "#F9F9F9"
-            : Colors.theme1[theme].greenCF + "0a",
+            : Colors.theme1.greenCF + "0a",
           borderColor: !question.active
             ? "#DBDBDB"
-            : Colors.theme1[theme].greenCF,
+            : Colors.theme1.greenCF,
           borderWidth: 1.5,
         },
       ]}
@@ -29,7 +29,7 @@ function Instance({ question, selectFaq, mobile, theme }) {
             {
               width: "90%",
               textAlign: "right",
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "bold",
             },
@@ -38,9 +38,9 @@ function Instance({ question, selectFaq, mobile, theme }) {
           {question.title}
         </Text>
         {question.active ? (
-          <Entypo name="minus" size={18} color={Colors.theme1[theme].green79} />
+          <Entypo name="minus" size={18} color={Colors.theme1.green79} />
         ) : (
-          <Entypo name="plus" size={18} color={Colors.theme1[theme].green79} />
+          <Entypo name="plus" size={18} color={Colors.theme1.green79} />
         )}
       </View>
       {question.active ? (
@@ -48,7 +48,7 @@ function Instance({ question, selectFaq, mobile, theme }) {
           <Text
             style={[
               {
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 fontFamily: "light",
               },

src/screens/Faq/index.js

@@ -51,7 +51,7 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq, theme }
           bookmark: false,
           qr: true,
           back: true,
-          backgroundColor: Colors.theme1["light"].greenCF + "0F",
+          backgroundColor: Colors.theme1.greenCF + "0F",
         }}
       />
       <Header
@@ -85,7 +85,7 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq, theme }
           <Text
             style={[
               tw("w-full px-4 mt-10 text-center"),
-              { fontFamily: "bold", color : Colors.theme1[theme].gray20 + '77' },
+              { fontFamily: "bold", color : Colors.theme1.gray20 + '77' },
             ]}
           >
             موردی یافت نشد.

src/screens/Home/components/Blogs.js

@@ -87,7 +87,7 @@ const Blog = ({ blog, mobile, theme }) => {
           style={[
             tw("mb-1"),
             {
-              color: Colors.theme1[theme].gray20,
+              color: Colors.theme1.gray20,
               fontFamily: "regular",
               fontSize: mobile ? fontSize.sm : fontSize.lg,
               textAlign: ios ? "right" : "auto",
@@ -108,7 +108,7 @@ const Blog = ({ blog, mobile, theme }) => {
             <Text
               style={[
                 {
-                  color: Colors.theme1[theme].gray20,
+                  color: Colors.theme1.gray20,
                   fontFamily: "regular",
                   fontSize: mobile ? fontSize.xs : fontSize.base,
                 },
@@ -122,7 +122,7 @@ const Blog = ({ blog, mobile, theme }) => {
               style={[
                 tw("ml-1"),
                 {
-                  color: Colors.theme1[theme].gray20,
+                  color: Colors.theme1.gray20,
                   fontFamily: "regular",
                   fontSize: mobile ? fontSize.xs : fontSize.base,
                 },

src/screens/Home/components/Header.js

@@ -2,22 +2,26 @@ import React from "react";
 import { View, Text, Pressable } from "react-native";
 import { Entypo } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
-import {connect} from 'react-redux';
+import { connect } from "react-redux";
 
 import fontSize from "../../../constants/fontSize";
 import tw from "tailwind-rn";
 
 //Color
-import Color from "../../../constants/Colors";
+import Colors from "../../../constants/Colors";
 
 const Header = ({ title, route, mobile, theme, state = null }) => {
   const navigation = useNavigation();
   return (
-    <View style={tw(`w-full flex flex-row-reverse justify-between ${mobile ? "" : "mb-2"}`)}>
+    <View
+      style={tw(
+        `w-full flex flex-row-reverse justify-between ${mobile ? "" : "mb-2"}`
+      )}
+    >
       <Text
         style={[
           {
-            color: Color.theme1[theme].green79,
+            color: Colors.theme1.green79,
             fontFamily: "demi",
             fontSize: mobile ? fontSize.lg : fontSize.xl2,
           },
@@ -26,8 +30,15 @@ const Header = ({ title, route, mobile, theme, state = null }) => {
         {title}
       </Text>
       {route ? (
-        <Pressable onPress={() => navigation.navigate(route, state)} style={{transform: [{translateX : -fontSize.xl6 / 3}]}}>
-          <Entypo name="chevron-small-left" size={fontSize.xl6} color={Color.theme1[theme].green79} />
+        <Pressable
+          onPress={() => navigation.navigate(route, state)}
+          style={{ transform: [{ translateX: -fontSize.xl6 / 3 }] }}
+        >
+          <Entypo
+            name="chevron-small-left"
+            size={fontSize.xl6}
+            color={Colors.theme1.green79}
+          />
         </Pressable>
       ) : null}
     </View>
@@ -36,7 +47,7 @@ const Header = ({ title, route, mobile, theme, state = null }) => {
 
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
-  theme : state.publicApi.theme
-})
+  theme: state.publicApi.theme,
+});
 
 export default connect(mapStateToProps)(Header);

src/screens/Home/components/MyBooks.js

@@ -18,8 +18,8 @@ function MyBooks({ books, grades, theme }) {
         style={[
           tw(`w-full flex  rounded-md pt-3 overflow-hidden`),
           {
-            backgroundColor: Colors.theme1[theme].greenCF + "0F",
-            borderColor: Colors.theme1[theme].greenD9 + "",
+            backgroundColor: Colors.theme1.greenCF + "0F",
+            borderColor: Colors.theme1.greenD9 + "",
             borderWidth: 1,
           },
         ]}
@@ -28,7 +28,7 @@ function MyBooks({ books, grades, theme }) {
           style={[
             tw(`pr-4 ${ios ? "text-right" : ""} w-full`),
             {
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               fontFamily: "demi",
               fontSize: fontSize.lg,
             },
@@ -77,7 +77,7 @@ const Book = ({ book, grades, theme }) => {
         style={[
           tw("mt-2 pr-1"),
           {
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
             fontFamily: "bold",
             fontSize: fontSize.sm,
           },
@@ -89,7 +89,7 @@ const Book = ({ book, grades, theme }) => {
         style={[
           tw("pr-1"),
           {
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
             fontFamily: "light",
             fontSize: fontSize.sm,
           },

src/screens/Home/components/Videos.js

@@ -60,7 +60,7 @@ const Video = ({ video, mobile, grades, theme }) => {
         style={[
           tw("mt-2 px-1"),
           {
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
             fontFamily: "bold",
             fontSize: mobile ? fontSize.sm : fontSize.xl,
             textAlign: ios ? "right" : "auto",
@@ -73,7 +73,7 @@ const Video = ({ video, mobile, grades, theme }) => {
         style={[
           tw("mt-1 pr-1"),
           {
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
             fontFamily: "regular",
             fontSize: mobile ? fontSize.xs : fontSize.base,
             textAlign: ios ? "right" : "auto",

src/screens/Home/index.js

@@ -82,7 +82,6 @@ const styles = StyleSheet.create({
     // alignItems: "",
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,
     paddingHorizontal: 0,

src/screens/Login/index.js

@@ -98,7 +98,7 @@ function Login(props) {
             {
               fontSize: fontSize.xl2,
               fontFamily: "bold",
-              color: Colors.theme1[props.theme].black,
+              color: Colors.theme1.black,
             },
           ]}
         >
@@ -114,7 +114,7 @@ function Login(props) {
             {
               fontSize: fontSize.xl2,
               fontFamily: "bold",
-              color: Colors.theme1[props.theme].black,
+              color: Colors.theme1.black,
             },
           ]}
         >
@@ -146,11 +146,11 @@ function Login(props) {
         {!props.mobile ? <View style={tw("mt-10")}></View> : null}
         <TouchableHighlight
           disabled={loading}
-          underlayColor={Colors.theme1[props.theme].greenC8}
+          underlayColor={Colors.theme1.greenC8}
           style={[
             tw(`w-full py-3 rounded-sm ${props.mobile ? "" : "w-2/4"}`),
             {
-              backgroundColor: Colors.theme1[props.theme].greenCF,
+              backgroundColor: Colors.theme1.greenCF,
               alignItems: "center",
               justifyContent: "center",
               marginTop: 25,

src/screens/OrderDetails/components/Book.js

@@ -15,7 +15,7 @@ function Book({ book, mobile, grades, theme }) {
         tw("w-full flex flex-row-reverse justify-between py-3"),
         {
           borderBottomWidth: 1,
-          borderColor: Colors.theme1[theme].grayE3,
+          borderColor: Colors.theme1.grayE3,
         },
       ]}
     >
@@ -38,7 +38,7 @@ function Book({ book, mobile, grades, theme }) {
             style={[
               {
                 fontSize: mobile ? fontSize.base : fontSize.xl2,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontFamily: "bold",
               },
             ]}
@@ -50,7 +50,7 @@ function Book({ book, mobile, grades, theme }) {
               tw(" mt-2"),
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
-                color: Colors.theme1[theme].gray20 + "aa",
+                color: Colors.theme1.gray20 + "aa",
                 fontFamily: "regular",
               },
             ]}
@@ -62,7 +62,7 @@ function Book({ book, mobile, grades, theme }) {
               tw(" mt-1"),
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
-                color: Colors.theme1[theme].greenBA,
+                color: Colors.theme1.greenBA,
                 fontFamily: "regular",
               },
             ]}
@@ -90,7 +90,7 @@ function Book({ book, mobile, grades, theme }) {
             style={{
               fontFamily: "bold",
               fontSize: mobile ? fontSize.sm : fontSize.xl2,
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
             }}
           >
             تومان
@@ -99,7 +99,7 @@ function Book({ book, mobile, grades, theme }) {
             style={[
               tw(" mr-3"),
               {
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontSize: fontSize.xl,
                 fontFamily: "bold",
               },

src/screens/OrderDetails/index.js

@@ -82,14 +82,14 @@ function OrderDetails({ mobile, route, theme }) {
                 mobile ? "p-3" : "p-4"
               }`
             ),
-            { backgroundColor: Colors.theme1[theme].greenCF + "1a" },
+            { backgroundColor: Colors.theme1.greenCF + "1a" },
           ]}
         >
           <View style={tw("flex flex-row-reverse items-center")}>
             <Text
               style={[
                 {
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontSize: mobile
                     ? mobile
                       ? fontSize.sm
@@ -114,7 +114,7 @@ function OrderDetails({ mobile, route, theme }) {
             tw("w-full flex flex-row-reverse items-center py-4"),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1[theme].grayE3,
+              borderColor: Colors.theme1.grayE3,
             },
           ]}
         >
@@ -122,7 +122,7 @@ function OrderDetails({ mobile, route, theme }) {
             style={[
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontFamily: "bold",
               },
             ]}
@@ -135,7 +135,7 @@ function OrderDetails({ mobile, route, theme }) {
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
                 lineHeight: mobile ? 17 : "auto",
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontFamily: "regular",
               },
             ]}
@@ -148,7 +148,7 @@ function OrderDetails({ mobile, route, theme }) {
             tw("w-full flex flex-row-reverse justify-between py-4"),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1[theme].grayE3,
+              borderColor: Colors.theme1.grayE3,
             },
           ]}
         >
@@ -157,7 +157,7 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "bold",
                 },
               ]}
@@ -170,7 +170,7 @@ function OrderDetails({ mobile, route, theme }) {
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
                   lineHeight: mobile ? 17 : "auto",
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "regular",
                 },
               ]}
@@ -183,7 +183,7 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "bold",
                 },
               ]}
@@ -196,7 +196,7 @@ function OrderDetails({ mobile, route, theme }) {
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
                   lineHeight: mobile ? 17 : "auto",
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "regular",
                 },
               ]}
@@ -208,7 +208,7 @@ function OrderDetails({ mobile, route, theme }) {
         <View
           style={[
             tw("w-full rounded-md flex  p-4 items-end mt-2"),
-            { backgroundColor: Colors.theme1[theme].greenFF1 + "aa" },
+            { backgroundColor: Colors.theme1.greenFF1 + "aa" },
           ]}
         >
           <Text
@@ -219,7 +219,7 @@ function OrderDetails({ mobile, route, theme }) {
                     ? fontSize.sm
                     : fontSize.lg
                   : fontSize.lg,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontFamily: "bold",
               },
             ]}
@@ -235,7 +235,7 @@ function OrderDetails({ mobile, route, theme }) {
                     ? fontSize.sm
                     : fontSize.lg
                   : fontSize.lg,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontFamily: "regular",
               },
             ]}
@@ -254,7 +254,7 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "bold",
                 },
               ]}
@@ -266,7 +266,7 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "regular",
                 },
               ]}
@@ -280,7 +280,7 @@ function OrderDetails({ mobile, route, theme }) {
             tw("w-full flex flex-row-reverse justify-between py-4"),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1[theme].grayE3,
+              borderColor: Colors.theme1.grayE3,
             },
           ]}
         >
@@ -289,7 +289,7 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "bold",
                 },
               ]}
@@ -301,7 +301,7 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "regular",
                 },
               ]}
@@ -314,7 +314,7 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "bold",
                 },
               ]}
@@ -326,7 +326,7 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "regular",
                 },
               ]}
@@ -340,7 +340,7 @@ function OrderDetails({ mobile, route, theme }) {
             tw("w-full flex flex-row-reverse justify-between py-4"),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1[theme].grayE3,
+              borderColor: Colors.theme1.grayE3,
             },
           ]}
         >
@@ -350,7 +350,7 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "bold",
                 },
               ]}
@@ -362,7 +362,7 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "regular",
                 },
               ]}
@@ -377,7 +377,7 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "bold",
                 },
               ]}
@@ -389,7 +389,7 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "regular",
                 },
               ]}

src/screens/OrdersFollowUp/components/Order.js

@@ -42,7 +42,7 @@ function Order({ order, mobile, theme }) {
         tw("w-full flex  rounded-md overflow-hidden my-3"),
         {
           borderWidth: 1,
-          borderColor: Colors.theme1[theme].greenCF + "22",
+          borderColor: Colors.theme1.greenCF + "22",
         },
       ]}
     >
@@ -53,7 +53,7 @@ function Order({ order, mobile, theme }) {
               mobile ? "p-3" : "p-4"
             }`
           ),
-          { backgroundColor: Colors.theme1[theme].greenCF + "1a" },
+          { backgroundColor: Colors.theme1.greenCF + "1a" },
         ]}
       >
         <Text
@@ -61,7 +61,7 @@ function Order({ order, mobile, theme }) {
             tw("font-medium"),
             {
               fontSize: mobile ? fontSize.base : fontSize.xl,
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               fontFamily: mobile ? "regular" : "demi",
             },
           ]}
@@ -73,7 +73,7 @@ function Order({ order, mobile, theme }) {
             style={[
               tw("font-light"),
               {
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
                 fontFamily: mobile ? "bold" : "demi",
               },
@@ -116,7 +116,7 @@ function Order({ order, mobile, theme }) {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
                   fontFamily: "bold",
                   backgroundColor: "#F0FFF1",
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                 },
               ]}
             >
@@ -130,7 +130,7 @@ function Order({ order, mobile, theme }) {
               tw("my-3"),
               {
                 fontSize: mobile ? fontSize.tiny : fontSize.xl,
-                color: Colors.theme1[theme].gray20,
+                color: Colors.theme1.gray20,
                 fontFamily: "bold",
               },
             ]}
@@ -145,14 +145,14 @@ function Order({ order, mobile, theme }) {
               ),
               {
                 borderWidth: 1,
-                borderColor: Colors.theme1[theme].greenCF,
+                borderColor: Colors.theme1.greenCF,
               },
             ]}
           >
             <Text
               style={{
                 fontSize: mobile ? fontSize.base : fontSize.xl,
-                color: Colors.theme1[theme].greenCF,
+                color: Colors.theme1.greenCF,
                 fontFamily: "regular",
               }}
             >
@@ -168,7 +168,7 @@ function Order({ order, mobile, theme }) {
               <Path
                 d="M8.988 11.936 5.081 8.03a1.19 1.19 0 0 1 0-1.678l3.907-3.907"
                 fill="none"
-                stroke={Colors.theme1[theme].greenCF}
+                stroke={Colors.theme1.greenCF}
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 data-name="vuesax/linear/arrow-left"
@@ -180,7 +180,7 @@ function Order({ order, mobile, theme }) {
               tw("my-5"),
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
-                color: Colors.theme1[theme].gray20,
+                color: Colors.theme1.gray20,
                 fontFamily: "light",
               },
             ]}

src/screens/Otp/index.js

@@ -210,7 +210,7 @@ function Otp(props) {
             {
               fontSize: props.mobile ? fontSize.tiny : fontSize.base,
               fontFamily: "light",
-              color: Colors.theme1[props.theme].gray20,
+              color: Colors.theme1.gray20,
             },
           ]}
         >
@@ -218,7 +218,7 @@ function Otp(props) {
           یک کد تائیدیه به شماره
           <Text
             style={{
-              color: Colors.theme1[props.theme].greenCF,
+              color: Colors.theme1.greenCF,
               fontSize: fontSize.base,
               fontFamily: "demi",
             }}
@@ -238,7 +238,7 @@ function Otp(props) {
               {
                 fontSize: fontSize.xl5,
                 fontFamily: "bold",
-                color: Colors.theme1[props.theme].green79,
+                color: Colors.theme1.green79,
                 width: fontSize.xl5 + 40,
               },
             ]}
@@ -257,7 +257,7 @@ function Otp(props) {
               {
                 fontSize: fontSize.xl5,
                 fontFamily: "bold",
-                color: Colors.theme1[props.theme].green79,
+                color: Colors.theme1.green79,
                 width: fontSize.xl5 + 40,
               },
             ]}
@@ -276,7 +276,7 @@ function Otp(props) {
               {
                 fontSize: fontSize.xl5,
                 fontFamily: "bold",
-                color: Colors.theme1[props.theme].green79,
+                color: Colors.theme1.green79,
                 width: fontSize.xl5 + 40,
               },
             ]}
@@ -295,7 +295,7 @@ function Otp(props) {
               {
                 fontSize: fontSize.xl5,
                 fontFamily: "bold",
-                color: Colors.theme1[props.theme].green79,
+                color: Colors.theme1.green79,
                 width: fontSize.xl5 + 40,
               },
             ]}
@@ -318,7 +318,7 @@ function Otp(props) {
               }`
             ),
             {
-              backgroundColor: Colors.theme1[props.theme].greenCF,
+              backgroundColor: Colors.theme1.greenCF,
             },
           ]}
           onPress={() => submit()}
@@ -345,7 +345,7 @@ function Otp(props) {
                 {
                   fontFamily: "light",
                   fontSize: fontSize.base,
-                  color: Colors.theme1[props.theme].gray20,
+                  color: Colors.theme1.gray20,
                 },
               ]}
             >
@@ -364,7 +364,7 @@ function Otp(props) {
                     textAlign: "center",
                     fontFamily: "light",
                     fontSize: fontSize.base,
-                    color: Colors.theme1[props.theme].greenBA,
+                    color: Colors.theme1.greenBA,
                   }}
                 >
                   {"ارسال مجدد کد"}
@@ -382,7 +382,7 @@ function Otp(props) {
                     textAlign: "center",
                     fontFamily: "light",
                     fontSize: fontSize.base,
-                    color: Colors.theme1[props.theme].greenBA,
+                    color: Colors.theme1.greenBA,
                   }}
                 >
                   {"بازگشت به مرحله قبل و اصلاح شماره"}

src/screens/Product/components/Book.js

@@ -122,7 +122,7 @@ function Book({
               width: Dimensions.get("window").width,
               height: height - 110,
               zIndex: 1,
-              backgroundColor: Colors.theme1[theme].white + "60",
+              backgroundColor: Colors.theme1.white + "60",
             },
           ]}
         >
@@ -151,7 +151,7 @@ function Book({
           <View style={tw("flex  items-end")}>
             <Text
               style={{
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontSize: mobile ? fontSize.base : fontSize.xl3,
                 marginBottom: 5,
                 fontFamily: "bold",
@@ -162,7 +162,7 @@ function Book({
             </Text>
             <Text
               style={{
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 fontSize: mobile ? fontSize.tiny : fontSize.xl,
                 fontFamily: "regular",
               }}
@@ -186,7 +186,7 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -198,7 +198,7 @@ function Book({
         </View>
         <View
           style={{
-            backgroundColor: Colors.theme1[theme].green79 + "55",
+            backgroundColor: Colors.theme1.green79 + "55",
             height: 20,
             width: 2,
           }}
@@ -206,7 +206,7 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -218,7 +218,7 @@ function Book({
         </View>
         <View
           style={{
-            backgroundColor: Colors.theme1[theme].green79 + "55",
+            backgroundColor: Colors.theme1.green79 + "55",
             height: 20,
             width: 2,
           }}
@@ -226,7 +226,7 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -242,7 +242,7 @@ function Book({
           style={[
             tw("w-full text-right"),
             {
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "demi",
             },
@@ -254,13 +254,13 @@ function Book({
       </View>
       <View style={tw("flex flex-row-reverse justify-between flex-wrap py-3")}>
         <TouchableHighlight
-          underlayColor={Colors.theme1[theme].greenFF + "22"}
+          underlayColor={Colors.theme1.greenFF + "22"}
           style={[
             tw("flex flex-row-reverse w-full justify-between px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[theme].greenCF,
-              backgroundColor: Colors.theme1[theme].greenFF + "0a",
+              borderColor: Colors.theme1.greenCF,
+              backgroundColor: Colors.theme1.greenFF + "0a",
             },
           ]}
           onPress={() =>
@@ -290,7 +290,7 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 paddingVertical: 4,
               }}
             >
@@ -304,7 +304,7 @@ function Book({
                     tw("py-1 pr-2"),
                     {
                       fontFamily: "bold",
-                      color: Colors.theme1[theme].green79,
+                      color: Colors.theme1.green79,
                       fontSize: fontSize.sm,
                     },
                   ]}
@@ -316,13 +316,13 @@ function Book({
           </>
         </TouchableHighlight>
         <TouchableHighlight
-          underlayColor={Colors.theme1[theme].greenFF + "22"}
+          underlayColor={Colors.theme1.greenFF + "22"}
           style={[
             tw("flex flex-row-reverse justify-between px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[theme].greenCF,
-              backgroundColor: Colors.theme1[theme].greenFF + "0a",
+              borderColor: Colors.theme1.greenCF,
+              backgroundColor: Colors.theme1.greenFF + "0a",
               width: width - 32 - 8 - (fontSize.sm * 6 + 18),
             },
           ]}
@@ -353,7 +353,7 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 paddingVertical: 4,
               }}
             >
@@ -365,9 +365,9 @@ function Book({
                   tw("py-1 pr-2"),
                   {
                     borderRightWidth: 1,
-                    borderColor: Colors.theme1[theme].greenCF,
+                    borderColor: Colors.theme1.greenCF,
                     fontFamily: "bold",
-                    color: Colors.theme1[theme].green79,
+                    color: Colors.theme1.green79,
                     fontSize: fontSize.sm,
                   },
                 ]}
@@ -378,13 +378,13 @@ function Book({
           </>
         </TouchableHighlight>
         <TouchableHighlight
-          underlayColor={Colors.theme1[theme].greenFF + "22"}
+          underlayColor={Colors.theme1.greenFF + "22"}
           style={[
             tw("flex flex-row-reverse justify-center px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[theme].greenCF,
-              backgroundColor: Colors.theme1[theme].greenFF + "0a",
+              borderColor: Colors.theme1.greenCF,
+              backgroundColor: Colors.theme1.greenFF + "0a",
               width: fontSize.sm * 6 + 18,
             },
           ]}
@@ -394,7 +394,7 @@ function Book({
             style={{
               fontFamily: "bold",
               fontSize: fontSize.xs,
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               paddingVertical: 4,
             }}
           >
@@ -402,13 +402,13 @@ function Book({
           </Text>
         </TouchableHighlight>
         <TouchableHighlight
-          underlayColor={Colors.theme1[theme].greenFF + "22"}
+          underlayColor={Colors.theme1.greenFF + "22"}
           style={[
             tw("flex flex-row-reverse justify-between px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[theme].greenCF,
-              backgroundColor: Colors.theme1[theme].greenFF + "0a",
+              borderColor: Colors.theme1.greenCF,
+              backgroundColor: Colors.theme1.greenFF + "0a",
               width: width - 32 - 8 - (fontSize.sm * 6 + 18),
             },
           ]}
@@ -439,7 +439,7 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
                 paddingVertical: 4,
               }}
             >
@@ -452,7 +452,7 @@ function Book({
                   tw("py-1 pr-2"),
                   {
                     fontFamily: "bold",
-                    color: Colors.theme1[theme].green79,
+                    color: Colors.theme1.green79,
                     fontSize: fontSize.sm,
                   },
                 ]}
@@ -463,13 +463,13 @@ function Book({
           </>
         </TouchableHighlight>
         <TouchableHighlight
-          underlayColor={Colors.theme1[theme].greenFF + "22"}
+          underlayColor={Colors.theme1.greenFF + "22"}
           style={[
             tw("flex flex-row-reverse justify-center px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1[theme].greenCF,
-              backgroundColor: Colors.theme1[theme].greenFF + "0a",
+              borderColor: Colors.theme1.greenCF,
+              backgroundColor: Colors.theme1.greenFF + "0a",
               width: fontSize.sm * 6 + 18,
             },
           ]}
@@ -479,7 +479,7 @@ function Book({
             style={{
               fontFamily: "bold",
               fontSize: fontSize.xs,
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               paddingVertical: 4,
             }}
           >

src/screens/Product/components/Comments.js

@@ -148,13 +148,13 @@ const AddComment = ({ addComment, productId, ...props }) => {
         style={[
           tw("w-full mt-4 px-2 rounded-md"),
           {
-            backgroundColor: Colors.theme1[colorScheme].grayF9,
-            color: Colors.theme1[colorScheme].gray20,
+            backgroundColor: Colors.theme1.grayF9,
+            color: Colors.theme1.gray20,
             fontSize: fontSize.base,
             textAlign: "right",
             fontFamily: "light",
             borderWidth: 1,
-            borderColor: Colors.theme1[colorScheme].grayE3,
+            borderColor: Colors.theme1.grayE3,
             height : fontSize.base + 30
           },
         ]}
@@ -167,13 +167,13 @@ const AddComment = ({ addComment, productId, ...props }) => {
         style={[
           tw("w-full mt-4 py-4 px-2 rounded-md h-40"),
           {
-            backgroundColor: Colors.theme1[colorScheme].grayF9,
-            color: Colors.theme1[colorScheme].gray20,
+            backgroundColor: Colors.theme1.grayF9,
+            color: Colors.theme1.gray20,
             fontSize: fontSize.tiny,
             textAlign: "right",
             fontFamily: "light",
             borderWidth: 1,
-            borderColor: Colors.theme1[colorScheme].grayE3,
+            borderColor: Colors.theme1.grayE3,
             
           },
         ]}
@@ -186,8 +186,8 @@ const AddComment = ({ addComment, productId, ...props }) => {
       <View style={tw("w-full mt-4")}>
         <Pressable
           title="ارسال نظر"
-          backgroundColor={Colors.theme1[colorScheme].greenCF}
-          color={Colors.theme1[colorScheme].white}
+          backgroundColor={Colors.theme1.greenCF}
+          color={Colors.theme1.white}
           border={{ width: 0, color: null }}
           width={"40%"}
           onPress={() => addComment(commentForm)}

src/screens/Product/components/Info.js

@@ -132,7 +132,7 @@ const ProductQuestion = ({ list, mobile, theme }) => {
             } mb-4`
           ),
           {
-            backgroundColor: Colors.theme1[theme].greenFF1,
+            backgroundColor: Colors.theme1.greenFF1,
           },
         ]}
       >
@@ -140,7 +140,7 @@ const ProductQuestion = ({ list, mobile, theme }) => {
           style={[
             {
               fontSize: mobile ? fontSize.sm : fontSize.xl3,
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               fontFamily: "demi",
             },
           ]}
@@ -171,7 +171,7 @@ const ProductReviews = ({ list, mobile, theme }) => {
                 } mb-4`
               ),
               {
-                backgroundColor: Colors.theme1[theme].greenFF1 + "66",
+                backgroundColor: Colors.theme1.greenFF1 + "66",
               },
             ]}
           >
@@ -179,7 +179,7 @@ const ProductReviews = ({ list, mobile, theme }) => {
               style={[
                 {
                   fontSize: mobile ? fontSize.tiny : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontFamily: "bold",
                 },
               ]}
@@ -230,7 +230,7 @@ const ProductReviews = ({ list, mobile, theme }) => {
             "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-2"
           ),
           {
-            backgroundColor: Colors.theme1[theme].greenFF1,
+            backgroundColor: Colors.theme1.greenFF1,
           },
         ]}
       >
@@ -238,7 +238,7 @@ const ProductReviews = ({ list, mobile, theme }) => {
           style={[
             {
               fontSize: fontSize.sm,
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               fontFamily: "demi",
             },
           ]}
@@ -311,7 +311,7 @@ const ProductSpecifications = ({ list, mobile, theme }) => {
             "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-3 py-3 mb-4"
           ),
           {
-            backgroundColor: Colors.theme1[theme].greenFF1,
+            backgroundColor: Colors.theme1.greenFF1,
           },
         ]}
       >
@@ -319,7 +319,7 @@ const ProductSpecifications = ({ list, mobile, theme }) => {
           style={[
             {
               fontSize: fontSize.sm,
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               fontFamily: "demi",
             },
           ]}

src/screens/Product/components/LinkBox.js

@@ -20,7 +20,7 @@ function Description({ title, onPress, mobile, theme }) {
           }`
         ),
         {
-          backgroundColor: Colors.theme1[theme].greenCF + "15",
+          backgroundColor: Colors.theme1.greenCF + "15",
           // borderWidth : 1,
         },
       ]}
@@ -29,7 +29,7 @@ function Description({ title, onPress, mobile, theme }) {
         style={[
           {
             fontSize: mobile ? fontSize.sm : fontSize.lg,
-            color: Colors.theme1[theme].green79,
+            color: Colors.theme1.green79,
             fontFamily: "demi",
           },
           tw(""),
@@ -40,7 +40,7 @@ function Description({ title, onPress, mobile, theme }) {
       <Entypo
         name="chevron-small-left"
         size={20}
-        color={Colors.theme1[theme].green79}
+        color={Colors.theme1.green79}
       />
     </TouchableOpacity>
   );

src/screens/Product/components/Rates.js

@@ -83,7 +83,7 @@ const Progress = ({ data,theme, ...props }) => {
       <View
         style={[
           tw("rounded-md ml-2 flex-1"),
-          { height: 6, backgroundColor: Colors.theme1[theme].greenFF1 },
+          { height: 6, backgroundColor: Colors.theme1.greenFF1 },
         ]}
       >
         <View
@@ -91,7 +91,7 @@ const Progress = ({ data,theme, ...props }) => {
             tw("h-full rounded-md"),
             {
               width: data.value + "%",
-              backgroundColor: Colors.theme1[theme].greenCF,
+              backgroundColor: Colors.theme1.greenCF,
             },
           ]}
         ></View>

src/screens/Products/components/Main.js

@@ -75,7 +75,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
               {
                 width: mobile ? "auto" : width / 2.2,
                 borderWidth: 1,
-                borderColor: Colors.theme1[theme].grayE3,
+                borderColor: Colors.theme1.grayE3,
               },
               tw(`flex  mb-5 p-2 rounded-md ${mobile ? "w-full" : ""}`),
             ]}
@@ -100,7 +100,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                 {
                   fontFamily: "bold",
                   fontSize: fontSize.lg,
-                  color: Colors.theme1[theme].gray20,
+                  color: Colors.theme1.gray20,
                   textAlign: ios ? "right" : "auto",
                 },
               ]}
@@ -113,7 +113,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                 {
                   fontSize: fontSize.tiny,
                   fontFamily: "regular",
-                  color: Colors.theme1[theme].greenBA,
+                  color: Colors.theme1.greenBA,
                   textAlign: ios ? "right" : "auto",
                 },
               ]}
@@ -145,7 +145,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     width: mobile ? width / 2 - 25 : width / 3.2,
                     marginBottom: 15,
                     borderWidth: 1,
-                    borderColor: Colors.theme1[theme].grayE3,
+                    borderColor: Colors.theme1.grayE3,
                   },
                   tw("flex justify-between px-2 pt-2 rounded-md"),
                 ]}
@@ -186,7 +186,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                   </Text>
                   <Text
                     style={{
-                      color: Colors.theme1[theme].greenBA,
+                      color: Colors.theme1.greenBA,
                       fontSize: fontSize.tiny,
                       marginTop: 5,
                       fontFamily: "regular",
@@ -206,7 +206,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     style={[
                       tw("text-center ml-1"),
                       {
-                        color: Colors.theme1[theme].gray20,
+                        color: Colors.theme1.gray20,
                         fontFamily: "bold",
                         fontSize: fontSize.xl2,
                       },
@@ -217,7 +217,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                   <Text
                     style={{
                       fontSize: fontSize.sm,
-                      color: Colors.theme1[theme].gray2077,
+                      color: Colors.theme1.gray2077,
                       fontFamily: "regular",
                     }}
                   >
@@ -238,7 +238,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     width: mobile ? width / 2 - 25 : width / 3.2,
                     marginBottom: 15,
                     borderWidth: 1,
-                    borderColor: Colors.theme1[theme].grayE3,
+                    borderColor: Colors.theme1.grayE3,
                   },
                   tw("flex justify-between px-2 pt-2 rounded-md"),
                 ]}
@@ -279,7 +279,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                   </Text>
                   <Text
                     style={{
-                      color: Colors.theme1[theme].greenBA,
+                      color: Colors.theme1.greenBA,
                       fontSize: fontSize.tiny,
                       marginTop: 5,
                       fontFamily: "regular",
@@ -299,7 +299,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     style={[
                       tw("text-center ml-1"),
                       {
-                        color: Colors.theme1[theme].gray20,
+                        color: Colors.theme1.gray20,
                         fontFamily: "bold",
                         fontSize: fontSize.xl2,
                       },
@@ -310,7 +310,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                   <Text
                     style={{
                       fontSize: fontSize.sm,
-                      color: Colors.theme1[theme].gray2077,
+                      color: Colors.theme1.gray2077,
                       fontFamily: "regular",
                     }}
                   >

src/screens/Products/index.js

@@ -47,7 +47,6 @@ function Products({
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        // backgroundColor: "white",
       }}
     >
       <Drawer setBoxPosition={setBoxPosition} position={position} />

src/screens/Profile/components/List.js

@@ -211,7 +211,7 @@ const List = ({ mobile, theme }) => {
             ),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1[theme].grayE3 + "aa",
+              borderColor: Colors.theme1.grayE3 + "aa",
             },
           ]}
           onPress={() => page.onPress()}
@@ -223,7 +223,7 @@ const List = ({ mobile, theme }) => {
                 fontFamily: "regular",
                 marginTop: 5,
                 marginRight: mobile ? 10 : 20,
-                color: Colors.theme1[theme].gray20,
+                color: Colors.theme1.gray20,
                 fontSize: mobile ? fontSize.tiny : fontSize.lg,
               }}
             >

src/screens/Profile/components/ProfileAddress/index.js

@@ -47,13 +47,13 @@ const ProfileAddress = ({
           {
             backgroundColor:
               userAddressId === address?.id
-                ? Colors.theme1[theme].greenCF + "0a"
-                : Colors.theme1[theme].grayE3 + "44",
+                ? Colors.theme1.greenCF + "0a"
+                : Colors.theme1.grayE3 + "44",
             borderWidth: 2,
             borderColor:
               userAddressId === address?.id
-                ? Colors.theme1[theme].greenCF + "aa"
-                : Colors.theme1[theme].grayE3,
+                ? Colors.theme1.greenCF + "aa"
+                : Colors.theme1.grayE3,
           },
           tw(
             `flex flex-row-reverse items-center w-full px-3 py-2 rounded-md mt-2`
@@ -75,7 +75,7 @@ const ProfileAddress = ({
                   style={{
                     fontSize: fontSize.base,
                     fontFamily: "bold",
-                    color: Colors.theme1[theme].gray20,
+                    color: Colors.theme1.gray20,
                   }}
                 >
                   آدرس انتخابی شما
@@ -84,7 +84,7 @@ const ProfileAddress = ({
                   style={{
                     fontSize: fontSize.xs,
                     fontFamily: "regular",
-                    color: Colors.theme1[theme].gray20,
+                    color: Colors.theme1.gray20,
                     marginRight: 10,
                   }}
                 >
@@ -159,7 +159,7 @@ const ProfileAddress = ({
             {!active ? (
               <Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
                 <G
-                  fill={Colors.theme1[theme].gray20}
+                  fill={Colors.theme1.gray20}
                   data-name="vuesax/linear/more"
                 >
                   <Path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
@@ -176,8 +176,8 @@ const ProfileAddress = ({
             title={"مشاهده روی نقشه"}
             backgroundColor={
               active
-                ? Colors.theme1[theme].greenCF
-                : Colors.theme1[theme].gray20 + "66"
+                ? Colors.theme1.greenCF
+                : Colors.theme1.gray20 + "66"
             }
             color={"white"}
             border={{ color: "#196EC0", width: 0 }}
@@ -240,8 +240,8 @@ const ProfileAddress = ({
         <TouchableOpacity
           style={[
             {
-              backgroundColor: Colors.theme1[theme].greenCF + "05",
-              borderColor: Colors.theme1[theme].greenCF,
+              backgroundColor: Colors.theme1.greenCF + "05",
+              borderColor: Colors.theme1.greenCF,
               borderWidth: 1.5,
             },
             tw(
@@ -254,7 +254,7 @@ const ProfileAddress = ({
             style={{
               fontFamily: "bold",
               fontSize: fontSize.tiny,
-              color: Colors.theme1[theme].greenCF,
+              color: Colors.theme1.greenCF,
             }}
           >
             یک آدرس جدید اضافه کنید
@@ -264,7 +264,7 @@ const ProfileAddress = ({
               marginTop: 3,
               marginRight: 5,
               fontSize: fontSize.xl3,
-              color: Colors.theme1[theme].greenCF,
+              color: Colors.theme1.greenCF,
               fontFamily: "bold",
             }}
           >

src/screens/Profile/components/ProfileBookmark/index.js

@@ -111,7 +111,7 @@ const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
         tw("flex flex-row-reverse rounded-md justify-between px-3.5 py-2 mb-4"),
         {
           borderWidth: 1.5,
-          borderColor: Colors.theme1[theme].greenCF,
+          borderColor: Colors.theme1.greenCF,
         },
       ]}
       onPress={() =>
@@ -155,7 +155,7 @@ const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
             style={{
               fontFamily: "bold",
               fontSize: fontSize.tiny,
-              color: Colors.theme1[theme].gray20,
+              color: Colors.theme1.gray20,
               width: width / 3,
               textAlign: "right",
             }}
@@ -170,7 +170,7 @@ const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
                 marginTop: 5,
                 fontFamily: "regular",
                 fontSize: fontSize.sm,
-                color: Colors.theme1[theme].gray20,
+                color: Colors.theme1.gray20,
               }}
             >
               {"پایه" + " " + grades[bookmark?.product?.book?.gradeId]}
@@ -179,7 +179,7 @@ const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
         </View>
       </View>
       {selectedBookmark === bookmark ? (
-        <ActivityIndicator color={Colors.theme1[theme].greenCF} size={30} />
+        <ActivityIndicator color={Colors.theme1.greenCF} size={30} />
       ) : (
         <Pressable
           onPress={() => deleteAction(deleteItem({ id: bookmark.id }))}

src/screens/Profile/components/Trophy.js

@@ -17,7 +17,7 @@ const Trophy = ({theme}) => {
         tw(
           `w-full flex py-3 px-3 justify-between flex-row-reverse`
         ),
-        { backgroundColor: Colors.theme1[theme].yellow2 },
+        { backgroundColor: Colors.theme1.yellow2 },
       ]}
     >
       <View style={[tw(`flex flex-row-reverse`)]}>
@@ -55,7 +55,7 @@ const Trophy = ({theme}) => {
             fontFamily: "regular",
             fontSize: fontSize.tiny,
             marginRight: 10,
-            color: Colors.theme1[theme].green79,
+            color: Colors.theme1.green79,
           }}
         >
           {"امتیاز شما" + " " + 14560}
@@ -66,7 +66,7 @@ const Trophy = ({theme}) => {
           style={{
             fontFamily: "light",
             fontSize: fontSize.sm,
-            color: Colors.theme1[theme].green79,
+            color: Colors.theme1.green79,
           }}
         >
           مشاهده جوایز

src/screens/Profile/components/User.js

@@ -42,7 +42,7 @@ const User = ({ user, mobile, theme }) => {
             <Text
               style={{
                 fontSize: mobile ? fontSize.lg : fontSize.xl5,
-                color: Colors.theme1[theme].gray20,
+                color: Colors.theme1.gray20,
                 fontFamily: "bold",
               }}
             >
@@ -51,7 +51,7 @@ const User = ({ user, mobile, theme }) => {
             <Text
               style={{
                 fontSize: mobile ? fontSize.tiny : fontSize.xl2,
-                color: Colors.theme1[theme].gray20,
+                color: Colors.theme1.gray20,
                 fontFamily: "light",
                 marginTop: mobile ? 3 : 6,
                 textAlign: "right",
@@ -89,7 +89,7 @@ const User = ({ user, mobile, theme }) => {
                 tw(`flex items-center w-full pb-3 mb-3 flex-row-reverse pt-2`),
                 {
                   borderTopWidth: 1,
-                  borderColor: Colors.theme1[theme].grayE3,
+                  borderColor: Colors.theme1.grayE3,
                 },
               ]}
             >
@@ -97,7 +97,7 @@ const User = ({ user, mobile, theme }) => {
                 style={{
                   fontSize: mobile ? fontSize.base : fontSize.xl,
                   fontFamily: "bold",
-                  color: Colors.theme1[theme].gray20,
+                  color: Colors.theme1.gray20,
                 }}
               >
                 افزودن حساب کاربری جدید
@@ -108,7 +108,7 @@ const User = ({ user, mobile, theme }) => {
                   marginTop: 3,
                   fontSize: fontSize.xl2,
                   fontFamily: "bold",
-                  color: Colors.theme1[theme].gray20,
+                  color: Colors.theme1.gray20,
                 }}
               >
                 +

src/screens/Profile/index.js

@@ -81,7 +81,7 @@ function Profile({ mobile, theme, logout, loading }) {
           >
             {loading ? (
               <ActivityIndicator
-                color={Colors.theme1[theme].redC0}
+                color={Colors.theme1.redC0}
                 size={fontSize.xl}
               />
             ) : (
@@ -112,7 +112,7 @@ function Profile({ mobile, theme, logout, loading }) {
               style={{
                 fontSize: mobile ? fontSize.base : fontSize.xl,
                 fontFamily: "bold",
-                color: Colors.theme1[theme].redFF1,
+                color: Colors.theme1.redFF1,
                 marginRight: 4,
               }}
             >
@@ -143,7 +143,6 @@ const styles = StyleSheet.create({
     position: "relative",
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,
     paddingHorizontal: 16,

src/screens/QR/layouts/Scan/index.js

@@ -71,19 +71,19 @@ function Scan({ theme, route }) {
             {
               width: height / 3.5,
               borderWidth: 1,
-              borderColor: Colors.theme1[theme].greenCF,
+              borderColor: Colors.theme1.greenCF,
             },
           ]}
         >
           <Entypo
             name="back"
             size={width / 27}
-            style={{ marginRight: 5, color: Colors.theme1[theme].greenCF }}
+            style={{ marginRight: 5, color: Colors.theme1.greenCF }}
           />
           <Text
             style={[
               {
-                color: Colors.theme1[theme].greenCF,
+                color: Colors.theme1.greenCF,
                 fontSize: width / 27,
                 fontFamily: "regular",
               },

src/screens/QRContent/Tab/index.js

@@ -22,7 +22,7 @@ function Tab({ data, theme }) {
     <View
       style={[
         tw("w-full flex  rounded-md overflow-hidden mt-4"),
-        { borderWidth: 1, borderColor: Colors.theme1[theme].blue5 },
+        { borderWidth: 1, borderColor: Colors.theme1.blue5 },
       ]}
     >
       <View style={tw("w-full flex flex-row-reverse justify-between px-0.5")}>
@@ -34,10 +34,10 @@ function Tab({ data, theme }) {
               borderBottomWidth: 1,
               borderColor:
                 dataType === "all"
-                  ? Colors.theme1[theme].blue3
-                  : Colors.theme1[theme].blue5,
+                  ? Colors.theme1.blue3
+                  : Colors.theme1.blue5,
               backgroundColor:
-                dataType === "all" ? Colors.theme1[theme].blue3 : "white",
+                dataType === "all" ? Colors.theme1.blue3 : "white",
             },
           ]}
         >
@@ -46,7 +46,7 @@ function Tab({ data, theme }) {
               fontSize: width / 38,
               fontFamily: dataType === "all" ? "bold" : "light",
               textAlign: "center",
-              color: Colors.theme1[theme].blue5,
+              color: Colors.theme1.blue5,
             }}
           >
             تمامی محتوا
@@ -60,10 +60,10 @@ function Tab({ data, theme }) {
               borderBottomWidth: 1,
               borderColor:
                 dataType === "voice"
-                  ? Colors.theme1[theme].blue3
-                  : Colors.theme1[theme].blue5,
+                  ? Colors.theme1.blue3
+                  : Colors.theme1.blue5,
               backgroundColor:
-                dataType === "voice" ? Colors.theme1[theme].blue3 : "white",
+                dataType === "voice" ? Colors.theme1.blue3 : "white",
             },
           ]}
         >
@@ -72,7 +72,7 @@ function Tab({ data, theme }) {
               fontSize: width / 38,
               fontFamily: dataType === "voice" ? "bold" : "light",
               textAlign: "center",
-              color: Colors.theme1[theme].blue5,
+              color: Colors.theme1.blue5,
             }}
           >
             صوت
@@ -86,10 +86,10 @@ function Tab({ data, theme }) {
               borderBottomWidth: 1,
               borderColor:
                 dataType === "video"
-                  ? Colors.theme1[theme].blue3
-                  : Colors.theme1[theme].blue5,
+                  ? Colors.theme1.blue3
+                  : Colors.theme1.blue5,
               backgroundColor:
-                dataType === "video" ? Colors.theme1[theme].blue3 : "white",
+                dataType === "video" ? Colors.theme1.blue3 : "white",
             },
           ]}
         >
@@ -98,7 +98,7 @@ function Tab({ data, theme }) {
               fontSize: width / 38,
               fontFamily: dataType === "video" ? "bold" : "light",
               textAlign: "center",
-              color: Colors.theme1[theme].blue5,
+              color: Colors.theme1.blue5,
             }}
           >
             ویدئو
@@ -112,10 +112,10 @@ function Tab({ data, theme }) {
               borderBottomWidth: 1,
               borderColor:
                 dataType === "pdf"
-                  ? Colors.theme1[theme].blue3
-                  : Colors.theme1[theme].blue5,
+                  ? Colors.theme1.blue3
+                  : Colors.theme1.blue5,
               backgroundColor:
-                dataType === "pdf" ? Colors.theme1[theme].blue3 : "white",
+                dataType === "pdf" ? Colors.theme1.blue3 : "white",
             },
           ]}
         >
@@ -124,7 +124,7 @@ function Tab({ data, theme }) {
               fontSize: width / 38,
               fontFamily: dataType === "pdf" ? "bold" : "light",
               textAlign: "center",
-              color: Colors.theme1[theme].blue5,
+              color: Colors.theme1.blue5,
             }}
           >
             پی دی اف
@@ -138,10 +138,10 @@ function Tab({ data, theme }) {
               borderBottomWidth: 1,
               borderColor:
                 dataType === "ppt"
-                  ? Colors.theme1[theme].blue3
-                  : Colors.theme1[theme].blue5,
+                  ? Colors.theme1.blue3
+                  : Colors.theme1.blue5,
               backgroundColor:
-                dataType === "ppt" ? Colors.theme1[theme].blue3 : "white",
+                dataType === "ppt" ? Colors.theme1.blue3 : "white",
             },
           ]}
         >
@@ -150,7 +150,7 @@ function Tab({ data, theme }) {
               fontSize: width / 38,
               fontFamily: dataType === "ppt" ? "bold" : "light",
               textAlign: "center",
-              color: Colors.theme1[theme].blue5,
+              color: Colors.theme1.blue5,
             }}
           >
             پاور پوینت
@@ -164,10 +164,10 @@ function Tab({ data, theme }) {
               borderBottomWidth: 1,
               borderColor:
                 dataType === "links"
-                  ? Colors.theme1[theme].blue3
-                  : Colors.theme1[theme].blue5,
+                  ? Colors.theme1.blue3
+                  : Colors.theme1.blue5,
               backgroundColor:
-                dataType === "links" ? Colors.theme1[theme].blue3 : "white",
+                dataType === "links" ? Colors.theme1.blue3 : "white",
             },
           ]}
         >
@@ -176,7 +176,7 @@ function Tab({ data, theme }) {
               fontSize: width / 38,
               fontFamily: dataType === "links" ? "bold" : "light",
               textAlign: "center",
-              color: Colors.theme1[theme].blue5,
+              color: Colors.theme1.blue5,
             }}
           >
             لینک ها

src/screens/Rules/index.js

@@ -96,8 +96,8 @@ const Rules = ({ route, mobile, theme }) => {
             {
               fontFamily: "bold",
               fontSize: fontSize.sm,
-              color: Colors.theme1[theme].redC0,
-              backgroundColor: Colors.theme1[theme].redFF,
+              color: Colors.theme1.redC0,
+              backgroundColor: Colors.theme1.redFF,
             },
           ]}
         >
@@ -116,7 +116,7 @@ const Switch = ({ theme, active, setActive }) => {
     <View
       style={[
         tw("w-full flex flex-row"),
-        { borderWidth: 1, borderColor: Colors.theme1[theme].green79 },
+        { borderWidth: 1, borderColor: Colors.theme1.green79 },
       ]}
     >
       <Pressable
@@ -124,7 +124,7 @@ const Switch = ({ theme, active, setActive }) => {
           tw("flex-1 py-3 flex flex-row justify-center"),
           {
             backgroundColor: active
-              ? Colors.theme1[theme].green79 + '11'
+              ? Colors.theme1.green79 + '11'
               : "transparent",
           },
         ]}
@@ -134,7 +134,7 @@ const Switch = ({ theme, active, setActive }) => {
           style={{
             fontFamily: "regular",
             fontSize: fontSize.tiny,
-            color: Colors.theme1[theme].green79,
+            color: Colors.theme1.green79,
           }}
         >
           راهنمای استفاده
@@ -146,7 +146,7 @@ const Switch = ({ theme, active, setActive }) => {
           tw("flex-1 py-3 flex flex-row justify-center"),
           {
             backgroundColor: !active
-              ? Colors.theme1[theme].green79 + '11'
+              ? Colors.theme1.green79 + '11'
               : "transparent",
           },
         ]}
@@ -156,7 +156,7 @@ const Switch = ({ theme, active, setActive }) => {
           style={{
             fontFamily: "regular",
             fontSize: fontSize.tiny,
-            color: Colors.theme1[theme].green79,
+            color: Colors.theme1.green79,
           }}
         >
           شرایط و قوانین
@@ -175,8 +175,8 @@ const Rule = ({ rule, theme }) => {
           {
             fontFamily: "bold",
             fontSize: fontSize.sm,
-            color: Colors.theme1[theme].green79,
-            backgroundColor: Colors.theme1[theme].green79 + '11',
+            color: Colors.theme1.green79,
+            backgroundColor: Colors.theme1.green79 + '11',
           },
         ]}
       >
@@ -188,7 +188,7 @@ const Rule = ({ rule, theme }) => {
           {
             fontFamily: "regular",
             fontSize: fontSize.sm,
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
           },
         ]}
       >

src/screens/ShoppingCart/components/Code.js

@@ -39,7 +39,7 @@ function Code({ codeId, setCodeId, theme, loading }) {
       <View
         style={[
           tw("flex w-full flex-row-reverse rounded-sm mt-3"),
-          { borderWidth: 1.5, borderColor: Colors.theme1[theme].greenCF },
+          { borderWidth: 1.5, borderColor: Colors.theme1.greenCF },
         ]}
       >
         <TextInput
@@ -51,7 +51,7 @@ function Code({ codeId, setCodeId, theme, loading }) {
             { fontSize: fontSize.tiny, fontFamily: "regular" },
           ]}
           placeholder={"کد تخفیف دارید ؟"}
-          placeholderTextColor={Colors.theme1[theme].gray20 + "aa"}
+          placeholderTextColor={Colors.theme1.gray20 + "aa"}
           value={value}
         />
         <Pressable
@@ -59,7 +59,7 @@ function Code({ codeId, setCodeId, theme, loading }) {
           style={[
             tw("py-3 px-5"),
             {
-              backgroundColor: Colors.theme1[theme].greenCF,
+              backgroundColor: Colors.theme1.greenCF,
               borderTopLeftRadius: 1,
               borderBottomLeftRadius: 1,
             },
@@ -68,7 +68,7 @@ function Code({ codeId, setCodeId, theme, loading }) {
           {loading && requestFlag ? (
             <ActivityIndicator
               size={fontSize.tiny}
-              color={Colors.theme1[theme].white}
+              color={Colors.theme1.white}
               style={tw("px-2")}
             />
           ) : (

src/screens/ShoppingCart/components/Product.js

@@ -58,7 +58,7 @@ function Product({
         ),
         {
           borderBottomWidth: 1,
-          borderColor: Colors.theme1[theme].grayE3,
+          borderColor: Colors.theme1.grayE3,
           direction: "rtl",
         },
       ]}
@@ -83,7 +83,7 @@ function Product({
           <Text
             style={{
               fontSize: mobile ? fontSize.lg : fontSize.xl4,
-              color: Colors.theme1[theme].green79,
+              color: Colors.theme1.green79,
               marginBottom: 5,
               fontFamily: "bold",
             }}
@@ -93,7 +93,7 @@ function Product({
           <Text
             style={{
               fontSize: mobile ? fontSize.sm : fontSize.lg,
-              color: Colors.theme1[theme].gray2077,
+              color: Colors.theme1.gray2077,
               marginBottom: 3,
               fontFamily: "regular",
             }}
@@ -103,7 +103,7 @@ function Product({
           <Text
             style={{
               fontSize: mobile ? fontSize.sm : fontSize.lg,
-              color: Colors.theme1[theme].gray2077,
+              color: Colors.theme1.gray2077,
               fontFamily: "regular",
             }}
           >
@@ -145,7 +145,7 @@ function Product({
         <AntDesign
           name="close"
           size={mobile ? 20 : 30}
-          color={Colors.theme1[theme].redFF1}
+          color={Colors.theme1.redFF1}
           onPress={() =>
             submit(
               pushToCart(
@@ -183,14 +183,14 @@ function Product({
                   }`
                 ),
                 {
-                  borderColor: Colors.theme1[theme].greenCF,
+                  borderColor: Colors.theme1.greenCF,
                 },
               ]}
             >
               <Text
                 style={{
                   fontSize: mobile ? fontSize.xl : fontSize.xl4,
-                  color: Colors.theme1[theme].greenCF,
+                  color: Colors.theme1.greenCF,
                   fontFamily: "light",
                 }}
               >
@@ -201,7 +201,7 @@ function Product({
               <ActivityIndicator
                 style={tw("mx-2")}
                 size="small"
-                color={Colors.theme1[theme].greenBA}
+                color={Colors.theme1.greenBA}
               />
             ) : (
               <Text
@@ -209,7 +209,7 @@ function Product({
                   tw("mx-2.5"),
                   {
                     fontSize: fontSize.xl6,
-                    color: Colors.theme1[theme].greenBA,
+                    color: Colors.theme1.greenBA,
                     fontFamily: "bold",
                   },
                 ]}
@@ -235,14 +235,14 @@ function Product({
                   }`
                 ),
                 {
-                  borderColor: Colors.theme1[theme].greenCF,
+                  borderColor: Colors.theme1.greenCF,
                 },
               ]}
             >
               <Text
                 style={{
                   fontSize: mobile ? fontSize.xl : fontSize.xl4,
-                  color: Colors.theme1[theme].greenCF,
+                  color: Colors.theme1.greenCF,
                   fontFamily: "bold",
                 }}
               >

src/screens/ShoppingCart/index.js

@@ -41,7 +41,7 @@ const PriceStatus = ({ name, value, type, theme }) => {
           tw(""),
           {
             fontSize: fontSize.tiny,
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
             fontFamily: "bold",
           },
         ]}
@@ -54,8 +54,8 @@ const PriceStatus = ({ name, value, type, theme }) => {
             {
               color:
                 type === "error"
-                  ? Colors.theme1[theme].redFF1
-                  : Colors.theme1[theme].green79,
+                  ? Colors.theme1.redFF1
+                  : Colors.theme1.green79,
               fontSize: fontSize.xl,
               fontFamily: "bold",
             },
@@ -68,8 +68,8 @@ const PriceStatus = ({ name, value, type, theme }) => {
             {
               color:
                 type === "error"
-                  ? Colors.theme1[theme].redFF1
-                  : Colors.theme1[theme].green79,
+                  ? Colors.theme1.redFF1
+                  : Colors.theme1.green79,
               fontSize: fontSize.sm,
               fontFamily: "regular",
               marginRight: 4,
@@ -192,7 +192,7 @@ function ShoppingCart({
             <Text
               style={[
                 {
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontSize: fontSize.base,
                   fontFamily: "bold",
                 },
@@ -204,7 +204,7 @@ function ShoppingCart({
               <Text
                 style={[
                   {
-                    color: Colors.theme1[theme].green79,
+                    color: Colors.theme1.green79,
                     fontSize: fontSize.xl,
                     fontFamily: "bold",
                   },
@@ -215,7 +215,7 @@ function ShoppingCart({
               <Text
                 style={[
                   {
-                    color: Colors.theme1[theme].green79,
+                    color: Colors.theme1.green79,
                     fontSize: fontSize.sm,
                     fontFamily: "regular",
                     marginRight: 4,
@@ -232,14 +232,14 @@ function ShoppingCart({
                 tw(
                   "w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
                 ),
-                { backgroundColor: Colors.theme1[theme].greenC8 + "1a" },
+                { backgroundColor: Colors.theme1.greenC8 + "1a" },
               ]}
             >
               <Text
                 style={[
                   tw("mr-1"),
                   {
-                    color: Colors.theme1[theme].green79,
+                    color: Colors.theme1.green79,
                     fontSize: fontSize.sm,
                     fontFamily: "regular",
                   },
@@ -250,13 +250,13 @@ function ShoppingCart({
               <Ionicons
                 name="alert-circle-outline"
                 size={20}
-                color={Colors.theme1[theme].greenC8}
+                color={Colors.theme1.greenC8}
               />
             </Pressable>
 
             <CustomPressable
               title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
-              backgroundColor={Colors.theme1[theme].greenCF}
+              backgroundColor={Colors.theme1.greenCF}
               color={"white"}
               border={{ color: "#196EC0", width: 0 }}
               width={"100%"}

src/screens/Video/components/Season.js

@@ -40,7 +40,7 @@ const Season = ({
           tw("w-full flex  overflow-hidden mb-3"),
           {
             borderBottomWidth: 1,
-            borderColor: Colors.theme1[theme].grayE3,
+            borderColor: Colors.theme1.grayE3,
           },
         ]}
       >
@@ -56,7 +56,7 @@ const Season = ({
               {
                 fontFamily: "bold",
                 fontSize: mobile ? fontSize.base : fontSize.lg,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
               },
             ]}
           >
@@ -68,7 +68,7 @@ const Season = ({
                 {
                   fontFamily: "regular",
                   fontSize: mobile ? fontSize.base : fontSize.lg,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                 },
               ]}
             >
@@ -81,8 +81,8 @@ const Season = ({
                   borderWidth: 1,
                   borderColor:
                     Number(index) === 0
-                      ? Colors.theme1[theme].greenCF
-                      : Colors.theme1[theme].gray2077,
+                      ? Colors.theme1.greenCF
+                      : Colors.theme1.gray2077,
                 },
               ]}
               onPress={() =>
@@ -103,8 +103,8 @@ const Season = ({
                   fontSize: mobile ? fontSize.tiny : fontSize.lg,
                   color:
                     Number(index) === 0
-                      ? Colors.theme1[theme].greenCF
-                      : Colors.theme1[theme].gray2077,
+                      ? Colors.theme1.greenCF
+                      : Colors.theme1.gray2077,
                 }}
               >
                 نمایش
@@ -121,9 +121,9 @@ const Season = ({
         style={[
           tw("flex  rounded-sm py-3 px-3"),
           {
-            backgroundColor: Colors.theme1[theme].greenCF + "05",
+            backgroundColor: Colors.theme1.greenCF + "05",
             borderWidth: 1,
-            borderColor: Colors.theme1[theme].greenC8,
+            borderColor: Colors.theme1.greenC8,
           },
         ]}
         onPress={() => toggle(season[0].categoryId)}
@@ -134,7 +134,7 @@ const Season = ({
               {
                 fontFamily: "bold",
                 fontSize: mobile ? fontSize.base : fontSize.xl,
-                color: Colors.theme1[theme].green79,
+                color: Colors.theme1.green79,
               },
             ]}
           >
@@ -149,7 +149,7 @@ const Season = ({
               season[0].categoryId === activeSeason ? "arrow-up" : "arrow-down"
             }
             size={14}
-            color={Colors.theme1[theme].green79}
+            color={Colors.theme1.green79}
           />
         </View>
         {season[0]?.categoryId === activeSeason

src/screens/Video/index.js

@@ -130,7 +130,7 @@ function Product({
               <Text
                 style={{
                   marginTop: 5,
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontSize: mobile ? fontSize.base : fontSize.xl3,
                   marginBottom: 0,
                   fontFamily: "demi",
@@ -140,7 +140,7 @@ function Product({
               </Text>
               <Text
                 style={{
-                  color: Colors.theme1[theme].green79,
+                  color: Colors.theme1.green79,
                   fontSize: mobile ? fontSize.tiny : fontSize.xl,
                   marginTop: 10,
                   fontFamily: "regular",
@@ -164,7 +164,7 @@ function Product({
             title={`خرید با قیمت ${separate(
               book?.product[2]?.price || " "
             )} تومان`}
-            backgroundColor={Colors.theme1[theme].greenCF}
+            backgroundColor={Colors.theme1.greenCF}
             color={"white"}
             border={{ color: "#196EC0", width: 0 }}
             width={"100%"}

src/screens/VideoDisplay/components/Season/index.js

@@ -41,10 +41,10 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile, theme }) =>
           tw(`w-full flex  rounded-md overflow-hidden ${mobile ? "mb-3" : "mb-5"}`),
           {
             borderWidth: 1,
-            borderColor: Colors.theme1[theme].greenD9,
+            borderColor: Colors.theme1.greenD9,
             backgroundColor:
               activeUnit === unit
-                ? Colors.theme1[theme].greenCF
+                ? Colors.theme1.greenCF
                 : "transparent",
           },
         ]}
@@ -56,7 +56,7 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile, theme }) =>
             ),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1[theme].greenD9,
+              borderColor: Colors.theme1.greenD9,
             },
           ]}
         >
@@ -68,7 +68,7 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile, theme }) =>
                 color:
                   activeUnit === unit
                     ? "white"
-                    : Colors.theme1[theme].green79,
+                    : Colors.theme1.green79,
               },
             ]}
           >
@@ -82,12 +82,12 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile, theme }) =>
                 color:
                   activeUnit === unit
                     ? "white"
-                    : Colors.theme1[theme].green79,
+                    : Colors.theme1.green79,
                 borderRightWidth: 1,
                 borderColor:
                   activeUnit === unit
                     ? "white"
-                    : Colors.theme1[theme].green79,
+                    : Colors.theme1.green79,
                 paddingRight: 8,
               },
             ]}
@@ -109,7 +109,7 @@ const Season = ({ season, activeUnit, name, setVideoActive, mobile, theme }) =>
                 color:
                   activeUnit === unit
                     ? "white"
-                    : Colors.theme1[theme].green79,
+                    : Colors.theme1.green79,
               }}
             >
               نمایش

src/screens/VideoDisplay/index.js

@@ -79,7 +79,7 @@ function VideoDisplay({ route, mobile, theme }) {
               fontSize: fontSize.xl,
               fontFamily: "bold",
               marginTop: mobile ? 8 : 12,
-              color: Colors.theme1[theme].gray20,
+              color: Colors.theme1.gray20,
               textAlign: ios ? "right" : "auto",
             }}
           >

src/screens/Videos/components/MostViewedVideo.js

@@ -69,7 +69,7 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
               fontSize: mobile ? fontSize.base : fontSize.xl,
               marginTop: 5,
               paddingRight: 4,
-              color: Colors.theme1[theme].gray20,
+              color: Colors.theme1.gray20,
               fontFamily: "regular",
             }}
           >
@@ -85,7 +85,7 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
               <Text
                 style={[
                   {
-                    color: Colors.theme1[theme].gray20,
+                    color: Colors.theme1.gray20,
                     fontFamily: "bold",
                     fontSize: mobile ? fontSize.sm : fontSize.tiny,
                     marginRight: 3,
@@ -97,7 +97,7 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
               <Text
                 style={[
                   {
-                    color: Colors.theme1[theme].gray20,
+                    color: Colors.theme1.gray20,
                     fontFamily: "bold",
                     fontSize: mobile ? fontSize.xl : fontSize.xl3,
                   },
@@ -109,7 +109,7 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
 
             <Text
               style={{
-                color: Colors.theme1[theme].gray20,
+                color: Colors.theme1.gray20,
                 fontFamily: "light",
                 fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 marginTop: 0,

src/screens/Videos/components/NewestVideo.js

@@ -50,7 +50,7 @@ const NewestVideo = ({ videos, grades, mobile, theme }) => {
           style={{
             fontSize: mobile ? fontSize.base : fontSize.xl,
             marginTop: 5,
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
             fontFamily: "bold",
           }}
         >
@@ -58,7 +58,7 @@ const NewestVideo = ({ videos, grades, mobile, theme }) => {
         </Text>
         <Text
           style={{
-            color: Colors.theme1[theme].gray20,
+            color: Colors.theme1.gray20,
             fontFamily: "light",
             fontSize: mobile ? fontSize.tiny : fontSize.lg,
             marginTop: 5,

src/screens/Videos/index.js

@@ -92,7 +92,6 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,
     paddingHorizontal: 16,