color provider is working, use color context from now to define colors !

LeftOvers/navigation/BottomBar.tsx

@@ -16,7 +16,7 @@ import DarkIcon from '../assets/images/moon.png';
 
 export default function BottomBar({ state, descriptors, navigation }) {
     const {theme, toggleTheme} = useContext(ThemeContext);
-    const {colors, toggleColor} = useContext(ColorContext)
+    const {colors, toggleColors} = useContext(ColorContext)
     const [iconThemeButton, setThemeIconButton] = useState(( theme === 'dark' ) ? LightIcon : DarkIcon)
     const [textThemeButton, setTextThemeButton] = useState(( theme === 'dark' ) ? 'Light' : 'Dark');
     
@@ -25,12 +25,12 @@ export default function BottomBar({ state, descriptors, navigation }) {
             setThemeIconButton(DarkIcon);
             setTextThemeButton("Dark");
             toggleTheme('light');
-            toggleColor(LightTheme)
+            toggleColors(LightTheme)
         } else {
             setThemeIconButton(LightIcon);
             setTextThemeButton("Light");
             toggleTheme('dark')
-            toggleColor(DarkTheme)
+            toggleColors(DarkTheme)
         }
         console.log('TextThemeButton is now: ' + textThemeButton);
     }

LeftOvers/navigation/HomeStackScreen.tsx

@@ -7,6 +7,7 @@ import Profiles from '../screens/Profiles';
 import CreateProfile from '../screens/CreateProfile';
 import ModifyProfile from '../screens/ModifyProfile';
 import ThemeContext from '../theme/ThemeContext';
+import ColorContext from '../theme/ColorContext';
 import { HeaderTitle } from './Utils';
 
 import appLogo from '../assets/images/logo.png';
@@ -23,6 +24,7 @@ function AppIcon() {
 
 export default function HomeStackScreen() {
     const {theme, toggleTheme} = useContext(ThemeContext)
+    const {colors, toggleColors} = useContext(ColorContext)
     
     return (
         <HomeStack.Navigator>
@@ -30,7 +32,7 @@ export default function HomeStackScreen() {
                 name='Home'
                 component={HomePage}
                 options={{
-                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
+                    headerStyle: {backgroundColor: colors.cardBackground},
 
                     headerLeft: () => (
                         <AppIcon/>
@@ -50,7 +52,7 @@ export default function HomeStackScreen() {
                 name='Profiles'
                 component={Profiles}
                 options={{
-                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
+                    headerStyle: {backgroundColor: colors.cardBackground},
                     headerTitle: () => (
                       <HeaderTitle title='Profiles'/>
                     )
@@ -60,7 +62,7 @@ export default function HomeStackScreen() {
                 name='ProfileModification'
                 component={ModifyProfile}
                 options={{
-                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
+                    headerStyle: {backgroundColor: colors.cardBackground},
                     headerTitle: () => (
                         <HeaderTitle title='Profile Modification'/>
                     )

LeftOvers/navigation/Utils.tsx

@@ -1,16 +1,16 @@
 import React, { useContext } from 'react';
 import { Text, StyleSheet } from 'react-native';
 
-import ThemeContext from '../theme/ThemeContext';
+import ColorContext from '../theme/ColorContext';
 
 export function HeaderTitle(props) {
-    const {theme, toggleTheme} = useContext(ThemeContext);
+    const {colors, toggleColors} = useContext(ColorContext)
 
     const styles = StyleSheet.create({
         headerTitle: {
             fontSize: 20,
             fontWeight: "bold",
-            color: theme === 'light' ? '#3F3C42' : '#F2F0E4',
+            color: colors.cardDetail,
         }
     })
 

LeftOvers/screens/HomePage.tsx

@@ -6,179 +6,180 @@ 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 ColorContext from '../theme/ColorContext';
 
 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 {colors, toggleColors} = useContext(ColorContext);
 
-  const profiles = [
-      {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
-      {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
-      {name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
-      {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
-  ]
+    const profiles = [
+        {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
+        {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
+        {name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
+        {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
+    ]
 
-  const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
+    const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
 
-  const [cpt, setCpt] = useState(0);
-  const decreaseCounter = () => {
-    if (cpt > 0) {
-      setCpt(cpt - 1);
-    }
-    else {
-      setCpt(ingredientList.length - 1);
-    }
-  };
-  const increaseCounter = () => {
-    if (cpt < ingredientList.length - 1) {
-      setCpt(cpt + 1);
-    }
-    else {
-      setCpt(0);
-    }
-  };
+    const [cpt, setCpt] = useState(0);
+    const decreaseCounter = () => {
+        if (cpt > 0) {
+            setCpt(cpt - 1);
+        }
+        else {
+            setCpt(ingredientList.length - 1);
+        }
+    };
+    const increaseCounter = () => {
+        if (cpt < ingredientList.length - 1) {
+            setCpt(cpt + 1);
+        }
+        else {
+            setCpt(0);
+        }
+    };
 
-  const styles = StyleSheet.create({
-    container: {
-      width: "100%",
-      flex: 1,
-      backgroundColor: '#3F3C42',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    linearGradient: {
-      width: "100%",
-      flex: 1,
-      padding: "2%",
-      paddingTop: 0,
-    },
-    separator: {
-      marginTop: "6%"
-    },
+    const styles = StyleSheet.create({
+        container: {
+            width: "100%",
+            flex: 1,
+            backgroundColor: '#3F3C42',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        linearGradient: {
+            width: "100%",
+            flex: 1,
+            padding: "2%",
+            paddingTop: 0,
+        },
+        separator: {
+            marginTop: "6%"
+        },
         
-    filterBar: {
-          flexDirection: "row",
-          width: "85%",
-          paddingTop: "3%",
-          paddingBottom: "2%",
-          alignItems: "flex-end",
-          justifyContent: "center",
-    },
-    filters: {
-          fontSize: 20,
-          color: '#ACA279',
-          flex: 1,
-    },
-    nbSelected: {
-          fontSize: 11,
-          color: "#3F3C42",
-          textAlign: "right",
-    },
+        filterBar: {
+            flexDirection: "row",
+            width: "85%",
+            paddingTop: "3%",
+            paddingBottom: "2%",
+            alignItems: "flex-end",
+            justifyContent: "center",
+        },
+        filters: {
+            fontSize: 20,
+            color: colors.cardTitle,
+            flex: 1,
+        },
+        nbSelected: {
+            fontSize: 11,
+            color: colors.cardDetail,
+            textAlign: "right",
+        },
       
-    profilesSelection: {
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: 20,
-          backgroundColor: '#F2F0E4',
-          marginHorizontal: "3%",
-          paddingBottom: "3%",
-    },
+        profilesSelection: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 20,
+            backgroundColor: colors.cardBackground,
+            marginHorizontal: "3%",
+            paddingBottom: "3%",
+        },
       
-    welcome: {
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: 20,
-          backgroundColor: '#F2F0E4',
-          paddingVertical: "3%",
-          paddingHorizontal: "7%",
-          marginHorizontal: "3%",
-    },
-    text: {
-          fontSize: 20,
-          color: '#ACA279',
-      },
-      name: {
-          fontSize: 20,
-          fontWeight: "bold",
-          color: '#59BDCD',
-    },
+        welcome: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 20,
+            backgroundColor: colors.cardBackground,
+            paddingVertical: "3%",
+            paddingHorizontal: "7%",
+            marginHorizontal: "3%",
+        },
+        text: {
+            fontSize: 20,
+            color: colors.welcomeText,
+        },
+        name: {
+            fontSize: 20,
+            fontWeight: "bold",
+            color: colors.welcomeName,
+        },
       
-    ingredientSelection: {
-          width: "90%",
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: 20,
-          backgroundColor: '#E3DEC9',
-          borderWidth: 2,
-          borderColor: "#ACA279",
-          padding: "2%"
-    }
-  });
+        ingredientSelection: {
+            width: "90%",
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 20,
+            backgroundColor: '#E3DEC9',
+            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>
+    return (
+        <SafeAreaProvider style={{flex: 1}}>
+            <ScrollView>
+                <LinearGradient colors={[colors.primary, colors.primaryComplement]} 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>
-                        <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 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={{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 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={{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 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={{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>
-  );
+                    <View style={{marginBottom: "20%"}}/>
+                </LinearGradient>
+            </ScrollView>
+        </SafeAreaProvider>
+    );
 }
 

LeftOvers/theme/ColorContext.tsx

@@ -1,11 +1,11 @@
 import React, {createContext, useState, useEffect} from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-import { DarkTheme, LightTheme, Theme } from './colors';
+import { LightTheme, Theme } from './colors';
 
 interface ColorContextType { 
     colors: Theme, 
-    toggleColor: (Theme) => void 
+    toggleColors: (Theme) => void 
 };
 
 const ColorContext = createContext<ColorContextType | null>(null);
@@ -27,13 +27,13 @@ export const ColorProvider = ({ children }) => {
         getColors();
     }, []);
 
-    const toggleColor = (newColors: Theme) => {
+    const toggleColors = (newColors: Theme) => {
         setColors(newColors);
         AsyncStorage.setItem('colors', JSON.stringify(newColors))
     };
 
     return (
-        <ColorContext.Provider value={{colors, toggleColor}}>
+        <ColorContext.Provider value={{colors, toggleColors}}>
             {children}
         </ColorContext.Provider>
     );

LeftOvers/theme/colors.ts

@@ -23,6 +23,10 @@ export interface Theme {
     ingredientBackground: string,
     ingredientContent: string,
     ingredientBorder: string,
+    buttonBackground: string,
+    buttonDetail: string,
+    welcomeText: string,
+    welcomeName: string,
 }
 
 export const LightTheme : Theme = {
@@ -38,13 +42,17 @@ export const LightTheme : Theme = {
     ingredientBackground: Pearl,
     ingredientBorder: EerieBlack,
     ingredientContent: Jet,
+    buttonBackground: Pearl,
+    buttonDetail: Moonstone,
+    welcomeText: Ecru,
+    welcomeName: Moonstone
 }
 
 export const DarkTheme : Theme = {
     primary: EerieBlack,
     primaryComplement: Jet,
     cardBackground: Jet,
-    cardTitle: Ecru,
+    cardTitle: Alabaster,
     cardDetail: Alabaster,
     cardElementBackground: SteelBlue,
     cardElementText: Jet,
@@ -52,6 +60,10 @@ export const DarkTheme : Theme = {
     cardElementBorder: SteelBlue,
     ingredientBackground: EerieBlack,
     ingredientBorder: SteelBlue,
-    ingredientContent: Alabaster
+    ingredientContent: Alabaster,
+    buttonBackground: Jet,
+    buttonDetail: CarolinaBlue,
+    welcomeText: SteelBlue,
+    welcomeName:Alabaster
 }