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,13 +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 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"},
@@ -69,12 +70,12 @@ export default function HomePage({ navigation, props }) {
         },
         filters: {
             fontSize: 20,
-          color: '#ACA279',
+            color: colors.cardTitle,
             flex: 1,
         },
         nbSelected: {
             fontSize: 11,
-          color: "#3F3C42",
+            color: colors.cardDetail,
             textAlign: "right",
         },
       
@@ -82,7 +83,7 @@ export default function HomePage({ navigation, props }) {
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 20,
-          backgroundColor: '#F2F0E4',
+            backgroundColor: colors.cardBackground,
             marginHorizontal: "3%",
             paddingBottom: "3%",
         },
@@ -91,19 +92,19 @@ export default function HomePage({ navigation, props }) {
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 20,
-          backgroundColor: '#F2F0E4',
+            backgroundColor: colors.cardBackground,
             paddingVertical: "3%",
             paddingHorizontal: "7%",
             marginHorizontal: "3%",
         },
         text: {
             fontSize: 20,
-          color: '#ACA279',
+            color: colors.welcomeText,
         },
         name: {
             fontSize: 20,
             fontWeight: "bold",
-          color: '#59BDCD',
+            color: colors.welcomeName,
         },
       
         ingredientSelection: {
@@ -121,7 +122,7 @@ export default function HomePage({ navigation, props }) {
     return (
         <SafeAreaProvider style={{flex: 1}}>
             <ScrollView>
-            <LinearGradient colors={theme === 'light' ? ['#2680AA', '#59BDCD'] : ['#222222', '#3F3C42']} style={styles.linearGradient}>
+                <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%"}}>

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
 }