partage de la couleur du background (theme pour l'instant) a tout les screens 💄

App.tsx

@@ -24,8 +24,6 @@ import {
 import { Provider } from 'react-redux';
 
 export default function App() {
-    //safearea
-    //mettre le navigateur ayant le princ
 
   return (
     <Provider store={store}>

screens/HomeScreen.tsx

@@ -1,16 +1,22 @@
-
 import { StyleSheet, Text, View, TouchableNativeFeedback } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NavigationContainer } from '@react-navigation/native';
 import StackNavigation from '../navigation/StackNavigation' 
 import { Colors } from 'react-native/Libraries/NewAppScreen';
+import {useDispatch, useSelector} from 'react-redux';
+
+
+
 
 //import Button from 'react-bootstrap/Button';
 
 // @ts-ignore //(ta gueule pour l'erreur sur navigation)
 export default function HomeScreen({navigation}) {
+    //@ts-ignore
+    const mode = useSelector(state => state.appReducer.mode);
+
     return (
-        <View style={styles.container}>
+        <View style={mode === 'light' ? styles.container_light : styles.container_dark}>
             <View style={styles.centered}>
                 <Text style={styles.title}>Mes super Nounours !</Text>
             </View>
@@ -20,18 +26,20 @@ export default function HomeScreen({navigation}) {
                 <Text style={styles.textStyle}>Nous sommes actuellement dans l'écran d'accueil !</Text>
             </View>
         
-            <View>
-                <Text style={styles.t3}> Vous cherchez une entités ? </Text>
-                <TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
-                    <Text style={styles.ButtonStyle}> Consulter la liste global !</Text>
-                </TouchableNativeFeedback>
-            </View>
+            <View style={styles.MidArea}>
+                <View>
+                    <Text style={styles.t3}> Vous cherchez une entités ? </Text>
+                    <TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
+                        <Text style={styles.ButtonStyle}> Consulter la liste global !</Text>
+                    </TouchableNativeFeedback>
+                </View>
 
-            <View>
-                <Text style={styles.t3}> Vous avez des entités favorites ? </Text>
-                <TouchableNativeFeedback onPress={() => navigation.navigate("ListFav")}>
-                    <Text style={styles.ButtonStyle}>Aller sur la page de favoris !</Text>
-                </TouchableNativeFeedback>
+                <View>
+                    <Text style={styles.t3}> Vous avez des entités favorites ? </Text>
+                    <TouchableNativeFeedback onPress={() => navigation.navigate("ListFav")}>
+                        <Text style={styles.ButtonStyle}>Aller sur la page de favoris !</Text>
+                    </TouchableNativeFeedback>
+                </View>
             </View>
         </View>
     )
@@ -56,7 +64,11 @@ export default function HomeScreen({navigation}) {
         paddingTop: 50,
         paddingBottom: 50,
         margin: 40,
+        padding: 2,
+
         borderRadius: 15,
+        borderWidth:5,
+        borderColor:"#ababab"
     },
     textStyle: {
         textAlign: "center",
@@ -73,5 +85,22 @@ export default function HomeScreen({navigation}) {
     t3 :{
         fontSize : 20,
         fontWeight: 'bold',
-    }
+    },
+    container_light: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    container_dark: {
+        flex: 1,
+        backgroundColor: '#121212',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text_light: {
+        marginBottom: 20,
+        color: '#000'
+    },
+
 });

screens/ListFav.tsx

@@ -3,7 +3,6 @@ import { StatusBar } from 'expo-status-bar';
 import React, { useState } from "react";
 
 import {setFavList } from '../redux/actions/action_setFavList';
-
 //redux
 import {useDispatch, useSelector} from 'react-redux';
 import {useEffect} from 'react';
@@ -72,9 +71,10 @@ const Item = ({title}) => (
 
 export default function Main(){
     const [count, setCount] = useState(0);
-    
+    //@ts-ignore
+    const mode = useSelector(state => state.appReducer.mode);
     return (
-        <View style={styles.container}>
+        <View style={mode === 'light' ? styles.container_light : styles.container_dark}>
             <Text>Maman, J4AI UNE LISTE DE FAVORIS ! !</Text>
             <StatusBar style="auto" />
             <Text>{count}</Text>
@@ -106,5 +106,17 @@ const styles = StyleSheet.create({
     },
     title: {
         fontStyle: "italic",
+    },
+    container_light: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    container_dark: {
+        flex: 1,
+        backgroundColor: '#121212',
+        alignItems: 'center',
+        justifyContent: 'center',
     }
 });

screens/ListScreen.tsx

@@ -32,13 +32,11 @@ const Item = ({url}) => (
 //@ts-ignore
 export default function ListScreen({navigation}){
     const [count, setCount] = useState(0);
-
-    // get the current theme
+    
     //@ts-ignore
     const theme = useSelector(state => state.theme);
     //@ts-ignore
     const nList = useSelector(state => state.appReducer.cards);
-    
     //@ts-ignore
     const mode = useSelector(state => state.appReducer.mode);
 
@@ -56,12 +54,6 @@ export default function ListScreen({navigation}){
         loadCards();
     }, [dispatch]);
 
-    //* Themes *//
-    
-    // define a component mode state
-
-    //const [mode, setMode] = useState(theme.mode);
-
     // Handle changing the theme mode
 
     //@ts-ignore
@@ -69,11 +61,6 @@ export default function ListScreen({navigation}){
         dispatch(switchMode(mode === 'light' ? 'dark' : 'light'));
     }
 
-    // Update the app Incase the theme mode changes
-    // useEffect(() => { 
-    //     setMode(theme.mode);
-    // }, [theme]);
-
 
 
     return (