Dark and light mode

Author: Infinite-Null

Components/ChatPage/AiThinking.js

@@ -42,15 +42,14 @@ export const AiThinking = () => {
                 }}>Thinking...</Text>
             </View>
             <View style={{
-                color:Style1.color4,
                 padding:15,
                 paddingTop:2,
                 paddingLeft:27,
                 marginTop:3,
                 fontSize:17,
             }}>
                 <TypeWriter minDelay={1} maxDelay={1} typing={writing} style={{
-                    color:"rgb(208,208,208)"
+                    color:Style1.color4
                 }} onTypingEnd={()=>{
                     if(writing===-1){
                         setRandom(Math.floor(Math.random() * 7))

Components/Homepage/TopPart.js

@@ -3,10 +3,9 @@ import {useContext} from "react";
 import Context from "../../Context/Context";
 
 export const TopPart = () => {
-    const {Style1}=useContext(Context)
     return (
         <View style={{
-            height:200,
+            height:160,
             alignItems:"center",
             justifyContent:"center"
         }}>

Context/ContextState.js

@@ -1,25 +1,40 @@
 import Context from "./Context";
+import {useEffect, useState} from "react";
 
 
 
 const ContextState=(props)=>{
-    const Style1={
-        color1:"#dbe4f3",
-        color2:"#769bea",
-        color3:"#282828",
-        color4:"white",
-        color5:"#1f1f1f",
-    color6:"gray"
-    }
-    // const Style1={
-    //     color1:"#03142a",
-    //     color2:"#4a7feb",
-    //     color3:"#f6f6f6",
-    //     color4:"black",
-    //     color5:"white",
-    //     color6:"gray"
-    // }
-    return <Context.Provider value={{Style1}}>
+    const [darkMode,setDarkmode]=useState(false)
+    const [Style1,setStyle]=useState({
+        color1:"#03142a",
+        color2:"#4a7feb",
+        color3:"#f6f6f6",
+        color4:"black",
+        color5:"white",
+        color6:"gray"
+    })
+    useEffect(() => {
+        if(darkMode){
+            setStyle({
+                color1:"#dbe4f3",
+                color2:"#769bea",
+                color3:"#282828",
+                color4:"white",
+                color5:"#1f1f1f",
+                color6:"gray"
+            })
+        }else{
+            setStyle({
+                color1:"#03142a",
+                color2:"#4a7feb",
+                color3:"#f6f6f6",
+                color4:"black",
+                color5:"white",
+                color6:"gray"
+            })
+        }
+    }, [darkMode]);
+    return <Context.Provider value={{Style1,darkMode,setDarkmode}}>
         {props.children}
     </Context.Provider>
 }

Screens/HomePage.js

@@ -5,15 +5,32 @@ import {EachFeaturesCard} from "../Components/Homepage/EachFeaturesCard";
 import {Heading} from "../Components/Global/Heading";
 import {TopPart} from "../Components/Homepage/TopPart";
 import {EachHistory} from "../Components/Homepage/EachHistory";
+import ToggleSwitch from "toggle-switch-react-native";
 
 export const HomePage = ({navigation}) => {
-    const {Style1}=useContext(Context)
+    const {Style1,setDarkmode,darkMode}=useContext(Context)
     return (
             <ImageBackground source={require("../Assets/artem-bryzgalov-r2CAjGQ0gSI-unsplash.jpg")} style={{flex:1,height:"100%",width:"100"}}>
                 <View style={{
                     flex:1,
                     backgroundColor:"rgba(0,0,0,0.37)"
                 }}>
+                    <View style={{
+                        alignItems:"flex-end",
+                        paddingRight:10,
+                        paddingTop:10,
+                        marginTop:6,
+                    }}>
+                        <ToggleSwitch
+                            isOn={darkMode}
+                            onColor="green"
+                            offColor="rgb(45,45,45)"
+                            label={"Dark Mode"}
+                            labelStyle={{ color: "white", fontWeight: "500" }}
+                            size="medium"
+                            onToggle={isOn => setDarkmode(isOn)}
+                        />
+                    </View>
 
                     <TopPart/>
                     <View style={{

package-lock.json

@@ -25,7 +25,8 @@
     "react-native-svg": "^13.14.0",
     "react-native-syntax-highlighter": "^2.1.0",
     "react-native-toast-notifications": "^3.4.0",
-    "react-native-typewriter": "^0.7.0"
+    "react-native-typewriter": "^0.7.0",
+    "toggle-switch-react-native": "^3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",