feat add colors context see next push if its working

LeftOvers/App.tsx

@@ -7,6 +7,7 @@ import ProfilesStackScreen from './navigation/ProfileStackScreen';
 import CookingStackScreen from './navigation/CookingStackScreen';
 import BottomBar from './navigation/BottomBar';
 import { ThemeProvider } from './theme/ThemeContext';
+import { ColorProvider } from './theme/ColorContext';
 
 
 const Tab = createBottomTabNavigator();
@@ -15,6 +16,7 @@ export default function App() {
     
     return (
         <ThemeProvider>
+            <ColorProvider>
                 <NavigationContainer>
                     <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/> }>
                         <Tab.Screen name='PROFILE' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profile' }} />
@@ -22,6 +24,7 @@ export default function App() {
                         <Tab.Screen name='COOKING' component={CookingStackScreen} options={{ headerShown: false, title: 'Cooking' }}/>
                     </Tab.Navigator>
                 </NavigationContainer>
+            </ColorProvider>
         </ThemeProvider>
     );
 }

LeftOvers/components/ProfileElement.tsx

@@ -1,4 +1,4 @@
-import {React, useState} from 'react';
+import React, { useState } from 'react';
 import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
 
 type Profile = {

LeftOvers/components/ValidateButton.tsx

@@ -78,9 +78,8 @@ export default function ValidateButton(props: ValidateButtonProps) {
                   width: "9%",
                   marginLeft: "2%",
                   marginRight: "3%",
-                    resizeMode: "contain",
+                  resizeMode: "contain",}}
-                    tintColor: props.colour,}}>
+                tintColor={props.colour}/>
-            </Image>
             <Text style={{
                 fontSize: 15,
                 color: props.colour,

LeftOvers/navigation/BottomBar.tsx

@@ -3,6 +3,8 @@ import { View, Text, TouchableOpacity, Image, Pressable } from 'react-native';
 import { GestureResponderEvent, StyleSheet } from 'react-native';
 import { BlurView } from 'expo-blur';
 import ThemeContext from '../theme/ThemeContext';
+import ColorContext from '../theme/ColorContext';
+import { LightTheme, DarkTheme } from '../theme/colors';
 
 import HomeIcon from '../assets/images/home.png';
 import ProfileIcon from '../assets/images/person_icon.png';
@@ -11,8 +13,10 @@ import LightIcon from '../assets/images/sun.png';
 import DarkIcon from '../assets/images/moon.png';
 
 
+
 export default function BottomBar({ state, descriptors, navigation }) {
-    const {theme, toggleTheme} = useContext(ThemeContext)
+    const {theme, toggleTheme} = useContext(ThemeContext);
+    const {colors, toggleColor} = useContext(ColorContext)
     const [iconThemeButton, setThemeIconButton] = useState(( theme === 'dark' ) ? LightIcon : DarkIcon)
     const [textThemeButton, setTextThemeButton] = useState(( theme === 'dark' ) ? 'Light' : 'Dark');
     
@@ -21,10 +25,12 @@ export default function BottomBar({ state, descriptors, navigation }) {
             setThemeIconButton(DarkIcon);
             setTextThemeButton("Dark");
             toggleTheme('light');
+            toggleColor(LightTheme)
         } else {
             setThemeIconButton(LightIcon);
             setTextThemeButton("Light");
             toggleTheme('dark')
+            toggleColor(DarkTheme)
         }
         console.log('TextThemeButton is now: ' + textThemeButton);
     }

LeftOvers/screens/HomePage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { StyleSheet, View, Text, Pressable, Image, ScrollView } from 'react-native';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
@@ -6,11 +6,14 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import ValidateButton from '../components/ValidateButton';
 import ProfileSelection from '../components/ProfileSelection';
 import FoodElementText from '../components/FoodElementText';
+import ThemeContext from '../theme/ThemeContext';
 
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 
 export default function HomePage({ navigation, props }) {
+  const {theme, toggleTheme} = useContext(ThemeContext);
+
   const profiles = [
       {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
       {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
@@ -38,71 +41,7 @@ export default function HomePage({ navigation, props }) {
     }
   };
 
-  return (
+  const styles = StyleSheet.create({
-    <SafeAreaProvider style={{flex: 1}}>
-        <ScrollView>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={styles.separator}/>
-                <View style={styles.welcome}>
-                    <View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
-                        <View style={{flexDirection: "row"}}>
-                            <Text style={styles.text}>Welcome </Text>
-                            <Text style={styles.name}>Rayhân</Text>
-                            <Text style={styles.text}>,</Text>
-                        </View>
-                        <Text style={styles.text}>Glad to see you again!</Text>
-                    </View>
-                </View>
-                <View style={styles.separator}/>
-                <View style={styles.profilesSelection}>
-                    <View style={styles.filterBar}>
-                        <Text style={styles.filters}>Profiles</Text>
-                        <Text style={styles.nbSelected}>2 selected</Text>
-                    </View>
-                    <View style={{marginTop: "3%"}}/>
-                    <ProfileSelection listProfile={profiles} disableSelection={true}/>
-                    <View style={{marginTop: "4%"}}/>
-                    <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
-                </View>
-                <View style={styles.separator}/>
-                <View style={styles.profilesSelection}>
-                    <View style={styles.filterBar}>
-                        <Text style={styles.filters}>Ingredient Stocks</Text>
-                    </View>
-                    <View style={{marginTop: "4%"}}/>
-                    <ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log('ManageStocks')}/>
-                </View>
-                <View style={styles.separator}/>
-                <View style={styles.profilesSelection}>
-                    <View style={styles.filterBar}>
-                        <Text style={styles.filters}>Cooking</Text>
-                    </View>
-                    <View style={{marginTop: "3%"}}/>
-                    <View style={styles.ingredientSelection}>
-                        <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
-                        <View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
-                            <Pressable onPress={decreaseCounter}>
-                                <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
-                            </Pressable>
-                            <FoodElementText title={ingredientList[cpt].title}/>
-                            <Pressable onPress={increaseCounter}>
-                                <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
-                            </Pressable>
-                        </View>
-                    </View>
-                    <View style={{marginTop: "4%"}}/>
-                    <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
-                    <View style={{marginTop: "3%"}}/>
-                    <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
-                </View>
-                <View style={{marginBottom: "20%"}}/>
-            </LinearGradient>
-        </ScrollView>
-    </SafeAreaProvider>
-  );
-}
-
-const styles = StyleSheet.create({
     container: {
       width: "100%",
       flex: 1,
@@ -176,22 +115,70 @@ const styles = StyleSheet.create({
           borderWidth: 2,
           borderColor: "#ACA279",
           padding: "2%"
-  },
+    }
+  });
+
+  return (
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
+            <LinearGradient colors={theme === 'light' ? ['#2680AA', '#59BDCD'] : ['#222222', '#3F3C42']} style={styles.linearGradient}>
+                <View style={styles.separator}/>
+                <View style={styles.welcome}>
+                    <View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
+                        <View style={{flexDirection: "row"}}>
+                            <Text style={styles.text}>Welcome </Text>
+                            <Text style={styles.name}>Rayhân</Text>
+                            <Text style={styles.text}>,</Text>
+                        </View>
+                        <Text style={styles.text}>Glad to see you again!</Text>
+                    </View>
+                </View>
+                <View style={styles.separator}/>
+                <View style={styles.profilesSelection}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Profiles</Text>
+                        <Text style={styles.nbSelected}>2 selected</Text>
+                    </View>
+                    <View style={{marginTop: "3%"}}/>
+                    <ProfileSelection listProfile={profiles} disableSelection={true}/>
+                    <View style={{marginTop: "4%"}}/>
+                    <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
+                </View>
+                <View style={styles.separator}/>
+                <View style={styles.profilesSelection}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Ingredient Stocks</Text>
+                    </View>
+                    <View style={{marginTop: "4%"}}/>
+                    <ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log('ManageStocks')}/>
+                </View>
+                <View style={styles.separator}/>
+                <View style={styles.profilesSelection}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Cooking</Text>
+                    </View>
+                    <View style={{marginTop: "3%"}}/>
+                    <View style={styles.ingredientSelection}>
+                        <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
+                        <View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
+                            <Pressable onPress={decreaseCounter}>
+                                <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                            </Pressable>
+                            <FoodElementText title={ingredientList[cpt].title}/>
+                            <Pressable onPress={increaseCounter}>
+                                <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                            </Pressable>
+                        </View>
+                    </View>
+                    <View style={{marginTop: "4%"}}/>
+                    <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
+                    <View style={{marginTop: "3%"}}/>
+                    <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
+                </View>
+                <View style={{marginBottom: "20%"}}/>
+            </LinearGradient>
+        </ScrollView>
+    </SafeAreaProvider>
+  );
+}
 
-  appName: {
-        fontSize: 20,
-        fontWeight: "bold",
-        color: '#3F3C42',
-        textAlign: "center",
-        flex: 0.8,
-  },
-  topBar: {
-        flexDirection: 'row',
-        width: "100%",
-        height: "11%",
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#F2F0E4',
-        paddingTop: "8%",
-  },
-});

LeftOvers/theme/ColorContext.tsx

@@ -0,0 +1,42 @@
+import React, {createContext, useState, useEffect} from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import { DarkTheme, LightTheme, Theme } from './colors';
+
+interface ColorContextType { 
+    colors: Theme, 
+    toggleColor: (Theme) => void 
+};
+
+const ColorContext = createContext<ColorContextType | null>(null);
+
+export const ColorProvider = ({ children }) => {
+    const [colors, setColors] = useState(LightTheme);
+
+    useEffect(() => {
+        const getColors = async () => {
+            try {
+                const savedColors = await AsyncStorage.getItem('colors');
+                if (savedColors) {
+                    setColors(JSON.parse(savedColors));
+                }
+            } catch (error) {
+                console.log('Error loading colors:', error);
+            }
+        };
+        getColors();
+    }, []);
+
+    const toggleColor = (newColors: Theme) => {
+        setColors(newColors);
+        AsyncStorage.setItem('colors', JSON.stringify(newColors))
+    };
+
+    return (
+        <ColorContext.Provider value={{colors, toggleColor}}>
+            {children}
+        </ColorContext.Provider>
+    );
+};
+
+export default ColorContext;

LeftOvers/theme/ThemeContext.tsx

@@ -9,7 +9,7 @@ interface ThemeContextType {
 
 const ThemeContext = createContext<ThemeContextType | null>(null);
 
-export const ThemeProvider = ({children}) => {
+export const ThemeProvider = ({ children }) => {
     const [theme, setTheme] = useState('light');
 
     useEffect(() => {

LeftOvers/theme/colors.ts

@@ -0,0 +1,57 @@
+const Ecru = '#ACA279'
+const Alabaster = '#F2F0E4'
+const Jet = '#3F3C42'
+const Moonstone = '#59BDCD'
+const Cerulean = '#2680AA'
+const Celeste = '#ADF3EA'
+const Tan = '#E0C293'
+const Pearl = '#E3DEC9'
+const EerieBlack = '#222222'
+const CarolinaBlue = '#8DB4D9'
+const SteelBlue = '#5882A8'
+
+export interface Theme {
+    primary: string,
+    primaryComplement: string,
+    cardBackground: string,
+    cardTitle: string,
+    cardDetail: string,
+    cardElementBackground: string,
+    cardElementText: string,
+    cardElementBorder: string,
+    cardElementTitle: string
+    ingredientBackground: string,
+    ingredientContent: string,
+    ingredientBorder: string,
+}
+
+export const LightTheme : Theme = {
+    primary: Cerulean,
+    primaryComplement: Moonstone, 
+    cardBackground: Alabaster,
+    cardTitle: Ecru,
+    cardDetail: Jet,
+    cardElementBackground: Pearl,
+    cardElementText: Jet,
+    cardElementBorder: Ecru,
+    cardElementTitle: Jet,
+    ingredientBackground: Pearl,
+    ingredientBorder: EerieBlack,
+    ingredientContent: Jet,
+}
+
+export const DarkTheme : Theme = {
+    primary: EerieBlack,
+    primaryComplement: Jet,
+    cardBackground: Jet,
+    cardTitle: Ecru,
+    cardDetail: Alabaster,
+    cardElementBackground: SteelBlue,
+    cardElementText: Jet,
+    cardElementTitle: Alabaster,
+    cardElementBorder: SteelBlue,
+    ingredientBackground: EerieBlack,
+    ingredientBorder: SteelBlue,
+    ingredientContent: Alabaster
+}
+