🔨 debut dark theme, pas du tout fini car marche a moitié dans page settings

src/components/OptionComponent.tsx

@@ -11,28 +11,43 @@ type OptionComponentProps = {
 }
 
 export default function OptionComponent(props: OptionComponentProps) {
-    const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+    const [isDarkTheme, setIsDarkTheme] = useState(false);
+    const toggleSwitch = () => setIsDarkTheme(previousState => !previousState);
+    if (isDarkTheme) {
+        return (
+            <View style={styleDark.container}>
+                <Text style={styleDark.text}>{props.nameOption}</Text>
+                <Switch trackColor={{ false: '#767577' }}
+                    onValueChange={toggleSwitch}
+                    value={isDarkTheme}></Switch>
+    
+            </View>
+        )
+    }
     return (
         <>
             <View style={styles.container}>
                 <Text style={styles.text}>{props.nameOption}</Text>
-                <Switch trackColor={{ false: '#767577' }}    
+                <Switch trackColor={{ false: '#767577' }}
                     onValueChange={toggleSwitch}
-                    value={isEnabled}></Switch>
+                    value={isDarkTheme}></Switch>
+
             </View>
+            <View style={styles.separator} />
+
         </>
 
     )
 }
 
-const styles = StyleSheet.create({
+const styleDark = StyleSheet.create({
     container: {
         flex: 0,
         flexDirection: 'row',
         justifyContent: 'space-evenly',
         alignItems: 'center',
         width: '80%',
+        backgroundColor: 'black',
     },
     separator: {
         marginVertical: 4,
@@ -40,9 +55,28 @@ const styles = StyleSheet.create({
         height: 1,
         width: '90%',
     },
-    teaserImage: {
-        width: 50,
-        height: 50,
+    text: {
+        fontWeight: "bold",
+        color: "white",
+        margin: 10,
+        width: '100%',
+    },
+});
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+        width: '80%',
+    },
+    separator: {
+        marginVertical: 4,
+        backgroundColor: "rgba(223,223,223,1)",
+        height: 1,
+        width: '90%',
     },
     text: {
         fontWeight: "bold",

src/screen/Settings.tsx

@@ -6,10 +6,6 @@ import OptionComponent from '../components/OptionComponent';
 
 export default function Settings() {
 
-    const [meteo, setMeteo] = useState("Meteo");
-    const [city, setCity] = useState<City>(new City("Paris", 48.856614, 2.3522219));
-
-
     return (
         <View style={styles.container}>
             <SafeAreaView/>
@@ -18,12 +14,17 @@ export default function Settings() {
     );
 }
 
+
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
+        flex: 0,
         backgroundColor: '#fff',
         alignItems: 'center',
-        justifyContent: 'flex-start',
-        paddingTop: 20,
+        justifyContent: 'center',
+        flexDirection: 'column',
+        marginTop: 20,
+        width: '90%',
+        padding: 10,
+        borderRadius: 10,
     },
 });