theme

src/components/MyButton.tsx

@@ -4,12 +4,14 @@ import {
   ImageSourcePropType,
   ImageStyle,
   StyleProp,
-  Text,
   TouchableOpacity,
   ViewStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {MyIcon} from './MyIcon';
+import {useSelector} from 'react-redux';
+import {RootState} from '@redux/store';
+import { Text } from '@gluestack-ui/themed';
 
 interface MyImageButtonProps {
   image: ImageSourcePropType;
@@ -18,10 +20,14 @@ interface MyImageButtonProps {
 }
 
 export function MyImageButton({image, imageStyle, text}: MyImageButtonProps) {
+  const currentTheme = useSelector(
+    (state: RootState) => state.nonSaveVariables.themeColors,
+  );
+
   return (
     <TouchableOpacity
       style={{
-        backgroundColor: '#26263f',
+        backgroundColor: currentTheme.backgroundDark300,
         alignItems: 'center',
         padding: 10,
         flexDirection: 'row',
@@ -32,7 +38,6 @@ export function MyImageButton({image, imageStyle, text}: MyImageButtonProps) {
         style={{
           flex: 1,
           textAlign: 'center',
-          color: '#fff',
           fontSize: 18,
           fontWeight: 'bold',
         }}>
@@ -50,8 +55,12 @@ interface MyButtonProps {
 }
 
 export function MyButton({style, type, text, onPress}: MyButtonProps) {
+  const currentTheme = useSelector(
+    (state: RootState) => state.nonSaveVariables.themeColors,
+  );
+
   const ButtonText = () => (
-    <Text style={{color: '#fff', fontSize: 18, fontWeight: 'bold'}}>
+    <Text style={{color: currentTheme.white, fontSize: 18, fontWeight: 'bold'}}>
       {text}
     </Text>
   );
@@ -67,7 +76,7 @@ export function MyButton({style, type, text, onPress}: MyButtonProps) {
       onPress={onPress}>
       {type === 'primary' ? (
         <LinearGradient
-          colors={['#931278', '#6030da']}
+          colors={[currentTheme.secondary, currentTheme.primary]}
           start={{x: 0, y: 1}}
           end={{x: 1, y: 0}}
           style={{
@@ -80,7 +89,7 @@ export function MyButton({style, type, text, onPress}: MyButtonProps) {
       ) : (
         <View
           style={{
-            backgroundColor: '#37375c',
+            backgroundColor: currentTheme.backgroundDark200,
             alignItems: 'center',
             padding: 10,
             borderRadius: 10,

src/components/MyClickableText.tsx

@@ -1,4 +1,5 @@
-import {StyleProp, Text, TextStyle} from 'react-native';
+import { Text } from '@gluestack-ui/themed';
+import {StyleProp, TextStyle} from 'react-native';
 import {TouchableOpacity} from 'react-native';
 
 interface MyClickableTextProps {

src/components/MyDivider.tsx

@@ -1,7 +1,22 @@
-import {Text, View} from 'react-native';
+import { Text } from '@gluestack-ui/themed';
+import {RootState} from '@redux/store';
+import {View} from 'react-native';
+import {useSelector} from 'react-redux';
 
 export function MyDivider() {
-  return <View style={{flex: 1, height: 1, backgroundColor: '#3b3b60'}} />;
+  const currentTheme = useSelector(
+    (state: RootState) => state.nonSaveVariables.themeColors,
+  );
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        height: 1,
+        backgroundColor: currentTheme.backgroundDark200,
+      }}
+    />
+  );
 }
 
 interface MyDividerWithTextProps {
@@ -9,16 +24,34 @@ interface MyDividerWithTextProps {
 }
 
 export function MyDividerWithText({text}: MyDividerWithTextProps) {
+  const currentTheme = useSelector(
+    (state: RootState) => state.nonSaveVariables.themeColors,
+  );
+
   return (
     <View style={{flexDirection: 'row', alignItems: 'center'}}>
       <MyDivider />
-      <Text style={{color: '#909090', marginHorizontal: 10}}>{text}</Text>
+      <Text color={currentTheme.warmGray400} style={{marginHorizontal: 10}}>
+        {text}
+      </Text>
       <MyDivider />
     </View>
   );
 }
 
+export function MyVerticalDivider() {
+  const currentTheme = useSelector(
+    (state: RootState) => state.nonSaveVariables.themeColors,
+  );
 
-export function MyVerticalDivider(){
+  return (
-  return <View style={{height: 44, marginTop: 2, backgroundColor: "#444444", width: 1}} />
+    <View
-}
+      style={{
+        height: 44,
+        marginTop: 2,
+        backgroundColor: currentTheme.warmGray600,
+        width: 1,
+      }}
+    />
+  );
+}

src/components/MyInput.tsx

@@ -1,5 +1,8 @@
-import {KeyboardTypeOptions, Text, TextInput, View} from 'react-native';
+import {KeyboardTypeOptions, TextInput, View} from 'react-native';
 import {MyIcon} from './MyIcon';
+import {useSelector} from 'react-redux';
+import {RootState} from '@redux/store';
+import { Text } from '@gluestack-ui/themed';
 
 interface MyIconInputProps {
   text: string;
@@ -11,13 +14,31 @@ interface MyIconInputProps {
   disableContainer?: boolean;
 }
 
-export function MyIconInput({text, iconName, keyboardType, secureTextEntry, value, onChangeText, disableContainer}: MyIconInputProps) {
+export function MyIconInput({
+  text,
+  iconName,
+  keyboardType,
+  secureTextEntry,
+  value,
+  onChangeText,
+  disableContainer,
+}: MyIconInputProps) {
+  const currentTheme = useSelector(
+    (state: RootState) => state.nonSaveVariables.themeColors,
+  );
+
   return (
     <View
-      style={[{
+      style={[
-        flexDirection: 'row',
+        {
-        alignItems: 'center',
+          flexDirection: 'row',
-      }, !disableContainer && { backgroundColor: '#26263f', borderRadius: 10}]}>
+          alignItems: 'center',
+        },
+        !disableContainer && {
+          backgroundColor: currentTheme.backgroundDark300,
+          borderRadius: 10,
+        },
+      ]}>
       <View style={{marginLeft: 12}}>
         <MyIcon name={iconName} size={32} />
       </View>
@@ -26,10 +47,10 @@ export function MyIconInput({text, iconName, keyboardType, secureTextEntry, valu
         <Text>{text}</Text>
         <TextInput
           style={{
-            backgroundColor: '#212137',
+            backgroundColor: currentTheme.backgroundDark400,
             height: 40,
             borderRadius: 10,
-            paddingLeft: 10
+            paddingLeft: 10,
           }}
           keyboardType={keyboardType}
           secureTextEntry={secureTextEntry}

src/components/MyScreenContainer.tsx

@@ -2,7 +2,7 @@ import {ReactNode} from 'react';
 import {ScrollView, StyleProp, View, ViewStyle} from 'react-native';
 
 import { useSelector } from 'react-redux';
-import {RootState, store} from '@redux/store';
+import {RootState} from '@redux/store';
 
 
 interface MyScreenContainerProps {

src/components/MyTitle.tsx

@@ -1,4 +1,4 @@
-import { Text } from "react-native";
+import { Text } from "@gluestack-ui/themed";
 
 export function MyTitle({text}: {text: string}) {
     return (
@@ -7,7 +7,6 @@ export function MyTitle({text}: {text: string}) {
           fontSize: 24,
           fontWeight: 'bold',
           textAlign: 'center',
-          color: '#fff',
           padding: 20,        
         }}>
         {text}

src/configs/gluestack-ui.config.ts

@@ -211,9 +211,9 @@ export const gluestackUIConfig = createConfig({
       warmGray100: '#f5f5f4',
       warmGray200: '#e7e5e4',
       warmGray300: '#d6d3d1',
-      warmGray400: '#a8a29e',
+      warmGray400: '#a8a29e', // divider with text
       warmGray500: '#78716c',
-      warmGray600: '#57534e',
+      warmGray600: '#57534e', // vertical divider
       warmGray700: '#44403c',
       warmGray800: '#292524',
       warmGray900: '#1c1917',
@@ -311,6 +311,8 @@ export const gluestackUIConfig = createConfig({
       light700: '#44403c',
       light800: '#292524',
       light900: '#1c1917',
+      primary: '#6030da',
+      /*
       primary0: '#E5F1FB',
       primary50: '#CCE9FF',
       primary100: '#ADDBFF',
@@ -322,8 +324,8 @@ export const gluestackUIConfig = createConfig({
       primary700: '#004282',
       primary800: '#002851',
       primary900: '#011838',
-      primary950: '#000711',
+      primary950: '#000711', */
-      secondary0: '#F6F6F6',
+      /*secondary0: '#F6F6F6',
       secondary50: '#F3F3F3',
       secondary100: '#E9E9E9',
       secondary200: '#DADADA',
@@ -334,7 +336,8 @@ export const gluestackUIConfig = createConfig({
       secondary700: '#404040',
       secondary800: '#262626',
       secondary900: '#171717',
-      secondary950: '#0C0C0C',
+      secondary950: '#0C0C0C', */
+      secondary: '#931278',
       textLight0: '#FCFCFC',
       textLight50: '#F5F5F5',
       textLight100: '#E5E5E5',
@@ -343,7 +346,7 @@ export const gluestackUIConfig = createConfig({
       textLight400: '#A3A3A3',
       textLight500: '#8C8C8C',
       textLight600: '#737373',
-      textLight700: '#525252',
+      textLight700: '#fff', // text
       textLight800: '#404040',
       textLight900: '#262626',
       textLight950: '#171717',
@@ -383,11 +386,10 @@ export const gluestackUIConfig = createConfig({
       borderLight800: '#404040',
       borderLight900: '#262626',
       borderLight950: '#171717',
-
       backgroundDark50: '#3e3e88',
       backgroundDark100: '#393972',
-      backgroundDark200: '#32325c',
+      backgroundDark200: '#37375c', // divider
-      backgroundDark300: '#2b2b48',
+      backgroundDark300: '#26263f', // container
       backgroundDark400: '#212137', // primary background
       backgroundDark500: '#1c1c2a',
       backgroundDark600: '#16161f',

src/navigation/navigation.tsx

@@ -13,7 +13,7 @@ import ProfileTab, {
   ProfileStackNavigatorParamList,
 } from './tabs/main/ProfileTab';
 import {FadeInView} from '@helper/animations';
-import {Text, TouchableOpacity, View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {
   RegistrationScreenAnim,
@@ -23,6 +23,7 @@ import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {MyIcon} from '@components/MyIcon';
 import {useSelector} from 'react-redux';
 import {RootState, store as reduxStore} from '@redux/store';
+import { Text } from '@gluestack-ui/themed';
 
 export type RootStackNavigatorParamList = {
   Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
@@ -90,12 +91,16 @@ function ChatsTabAnim(props: any) {
 const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat'];
 
 function CustomTabBar(props: BottomTabBarProps) {
-  const {state, descriptors, navigation} = props;
+  const {state, navigation} = props;
 
   const lang = useSelector(
     (state: RootState) => state.appVariables.lang.navigation.home,
   );
 
+  const currentTheme = useSelector(
+    (state: RootState) => state.nonSaveVariables.themeColors,
+  );
+
   const tabNames = [
     lang.profile.tabName,
     lang.calendar.tabName,
@@ -104,12 +109,12 @@ function CustomTabBar(props: BottomTabBarProps) {
   ];
 
   return (
-    <View style={{backgroundColor: '#212137'}}>
+    <View style={{backgroundColor: currentTheme.backgroundDark400}}>
       <View
         style={{
           flexDirection: 'row',
           margin: 10,
-          backgroundColor: '#26263f',
+          backgroundColor: currentTheme.backgroundDark300,
           borderRadius: 20,
         }}>
         {state.routes.map((route, index) => {
@@ -136,8 +141,8 @@ function CustomTabBar(props: BottomTabBarProps) {
 
           // TODO: retrieve colors from theme
           const gradientColors = isFocused
-            ? ['#931278', '#6030da']
+            ? [currentTheme.secondary, currentTheme.primary]
-            : ['#26263f', '#26263f'];
+            : [currentTheme.backgroundDark300, currentTheme.backgroundDark300];
 
           return (
             <TouchableOpacity
@@ -165,11 +170,11 @@ function CustomTabBar(props: BottomTabBarProps) {
                 }}>
                 <MyIcon
                   name={tabBarIcons[index]}
-                  color={isFocused ? '#fff' : '#ccc'}
+                  color={isFocused ? currentTheme.white : '#ccc'}
                   size={20}
                 />
                 {isFocused && (
-                  <Text style={{color: '#fff'}}>{tabNames[index]}</Text>
+                  <Text>{tabNames[index]}</Text>
                 )}
               </LinearGradient>
             </TouchableOpacity>

src/navigation/registration/registration.tsx

@@ -10,7 +10,6 @@ import {
   Image,
   ScrollView,
   StyleSheet,
-  Text,
   TextInput,
   View,
 } from 'react-native';
@@ -30,6 +29,7 @@ import {KeyboardAvoidingView} from 'react-native';
 import {MyTitle} from '@components/MyTitle';
 import {useSelector} from 'react-redux';
 import {RootState} from '@redux/store';
+import { Text } from '@gluestack-ui/themed';
 
 export type RegistrationStackNavigatorParamList = {
   SignUpPreview: undefined;

src/navigation/tabs/main/ChatsTab.tsx

@@ -1,10 +1,10 @@
 import {MyScreenContainer} from '@components/MyScreenContainer';
+import { Text } from '@gluestack-ui/themed';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
 import {RootState} from '@redux/store';
-import {Text} from 'react-native';
 import {useSelector} from 'react-redux';
 
 export const ChatsTabName = 'Chats';

src/navigation/tabs/main/MapTab.tsx

@@ -1,10 +1,10 @@
 import { MyScreenContainer } from '@components/MyScreenContainer';
+import { Text } from '@gluestack-ui/themed';
 import {
   createNativeStackNavigator,
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
 import {RootState} from '@redux/store';
-import {Text} from 'react-native';
 import {useSelector} from 'react-redux';
 
 export const MapTabName = 'Map';