toggle light mode

src/App.js

@@ -2,9 +2,13 @@ import React, { useState, useEffect } from "react";
 import LangDropdown from "./components/LangDropdown";
 import SearchBar from "./components/SearchBar";
 import SearchResult from "./components/SearchResult";
+import LightSwitch from "./components/LightSwitch";
 import axios from "axios";
 import Fuse from "fuse.js";
 
+import SunImg from "./img/sun.png"
+import MoonImg from "./img/moon.png"
+
 const fpb = null;
 
 // eslint-disable-next-line
@@ -104,6 +108,8 @@ function App() {
   const [searchParams, setSearchParams] = useState({ title: "" });
   const [searchResults, setSearchResults] = useState([]);
   const [sectionResults, setSectionResults] = useState([]);
+ 	const [lightMode, setLightMode] = useState(true);
+
   // eslint-disable-next-line
   const [error, setError] = useState("");
 
@@ -199,7 +205,12 @@ function App() {
       });
   }
   return (
-    <div className="frontPage">
+    <div className="frontPage" style={{color: lightMode ? "black" : "white", backgroundColor: lightMode ? "white" : "black"}}>
+	<img src={lightMode ? SunImg: MoonImg}
+	onClick = {()=>setLightMode(!lightMode)} style={{width: "100px", height: "100px",display: "block",
+													  marginLeft: "auto",
+													  marginRight: "auto",
+													  }}/>
 	 <h1>Free Programming Books</h1>
       <div>
         <SearchBar changeParameter={changeParameter} />

src/components/LightSwitch.js

@@ -0,0 +1,14 @@
+import React, { useState, useEffect } from "react";
+
+function LightSwitch(App){
+	const [lightMode, setLightMode] = useState(false);
+	return (
+		<img src={lightMode ? "https://toppng.com/uploads/preview/sun-11545692406nbrflpmao0.png" : "https://www.kindpng.com/picc/m/293-2939577_clip-art-drawing-of-moon-and-stars-star.png"}
+		onClick = {()=>setLightMode(!lightMode)} style={{width: "100px", height: "100px",display: "block",
+														  marginLeft: "auto",
+														  marginRight: "auto",
+														  }}/>
+	)
+}
+
+export default LightSwitch;