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,13 +16,15 @@ export default function App() {
     
     return (
         <ThemeProvider>
-            <NavigationContainer>
-                <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/> }>
-                    <Tab.Screen name='PROFILE' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profile' }} />
-                    <Tab.Screen name='HOME' component={HomeStackScreen} options={{ headerShown: false, title: 'Home' }}/>
-                    <Tab.Screen name='COOKING' component={CookingStackScreen} options={{ headerShown: false, title: 'Cooking' }}/>
-                </Tab.Navigator>
-            </NavigationContainer>
+            <ColorProvider>
+                <NavigationContainer>
+                    <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/> }>
+                        <Tab.Screen name='PROFILE' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profile' }} />
+                        <Tab.Screen name='HOME' component={HomeStackScreen} options={{ headerShown: false, title: 'Home' }}/>
+                        <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

@@ -72,15 +72,14 @@ export default function ValidateButton(props: ValidateButtonProps) {
                 padding: "2%",
                 paddingRight: "3%",}}>
             <Image 
-                source={imageSource} 
+                source={imageSource}
                 style={{
-                    height: "90%",
-                    width: "9%",
-                    marginLeft: "2%",
-                    marginRight: "3%",
-                    resizeMode: "contain",
-                    tintColor: props.colour,}}>
-            </Image>
+                  height: "90%",
+                  width: "9%",
+                  marginLeft: "2%",
+                  marginRight: "3%",
+                  resizeMode: "contain",}}
+                tintColor={props.colour}/>
             <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,10 +41,87 @@ export default function HomePage({ navigation, props }) {
     }
   };
 
+  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",
+    },
+  
+    profilesSelection: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: 20,
+          backgroundColor: '#F2F0E4',
+          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',
+    },
+  
+    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={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
+            <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%"}}>
@@ -102,96 +182,3 @@ export default function HomePage({ navigation, props }) {
   );
 }
 
-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",
-  },
-
-  profilesSelection: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 20,
-        backgroundColor: '#F2F0E4',
-        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',
-  },
-
-  ingredientSelection: {
-        width: "90%",
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 20,
-        backgroundColor: '#E3DEC9',
-        borderWidth: 2,
-        borderColor: "#ACA279",
-        padding: "2%"
-  },
-
-  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
+}
+