Implemented dark and light theme globally with styled components Hoo…

package.json

@@ -10,8 +10,10 @@
     "axios": "^0.19.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.4.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.3.5"
   },
   "scripts": {
     "predeploy": "npm run build",

src/App.js

@@ -1,60 +1,83 @@
-import React, { Component } from "react";
+ import React from "react";
 import PhotoContextProvider from "./context/PhotoContext";
 import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
 import Header from "./components/Header";
 import Item from "./components/Item";
 import Search from "./components/Search";
 import NotFound from "./components/NotFound";
+import { ThemeProvider } from "styled-components";
+import GlobalStyles from "./global";
+import { ToggleIcon } from "./global";
+import usePersistedState from "./hooks/usePersistedState";
+import dark from "./Styles/dark";
+import light from "./Styles/light";
+
+import { BsFillMoonFill, BsFillSunFill } from "react-icons/bs";
+function App() {
+
+  const [theme, setTheme] = usePersistedState("theme-app", dark);
 
-class App extends Component {
   // Prevent page reload, clear input, set URL and push history on submit
-  handleSubmit = (e, history, searchInput) => {
+  const handleSubmit = (e, history, searchInput) => {
     e.preventDefault();
     e.currentTarget.reset();
     let url = `/search/${searchInput}`;
     history.push(url);
   };
 
-  render() {
+
+
+  const toggleTheme = () => {
+    setTheme(theme.title === "light" ? dark : light);
+  };
+  const toggleIcon =  theme.title === "light" ? <BsFillMoonFill /> : <BsFillSunFill />;
+
     return (
       <PhotoContextProvider>
-        <HashRouter basename="/SnapScout">
-          <div className="container">
-            <Route
-              render={props => (
-                <Header
-                  handleSubmit={this.handleSubmit}
-                  history={props.history}
-                />
-              )}
-            />
-            <Switch>
-              <Route
-                exact
-                path="/"
-                render={() => <Redirect to="/mountain" />}
-              />
-
+         <ToggleIcon onClick={toggleTheme}> {toggleIcon} </ToggleIcon>
+        <ThemeProvider theme={theme}>
+          <HashRouter basename="/SnapScout">
+            <div className="container">
               <Route
-                path="/mountain"
-                render={() => <Item searchTerm="mountain" />}
-              />
-              <Route path="/beach" render={() => <Item searchTerm="beach" />} />
-              <Route path="/bird" render={() => <Item searchTerm="bird" />} />
-              <Route path="/food" render={() => <Item searchTerm="food" />} />
-              <Route
-                path="/search/:searchInput"
-                render={props => (
-                  <Search searchTerm={props.match.params.searchInput} />
+                render={(props) => (
+                  <Header
+                    handleSubmit={handleSubmit}
+                    history={props.history}
+                  />
                 )}
               />
-              <Route component={NotFound} />
-            </Switch>
-          </div>
-        </HashRouter>
+              <GlobalStyles />
+              <Switch>
+                <Route
+                  exact
+                  path="/"
+                  render={() => <Redirect to="/mountain" />}
+                />
+
+                <Route
+                  path="/mountain"
+                  render={() => <Item searchTerm="mountain" />}
+                />
+                <Route
+                  path="/beach"
+                  render={() => <Item searchTerm="beach" />}
+                />
+                <Route path="/bird" render={() => <Item searchTerm="bird" />} />
+                <Route path="/food" render={() => <Item searchTerm="food" />} />
+                <Route
+                  path="/search/:searchInput"
+                  render={(props) => (
+                    <Search searchTerm={props.match.params.searchInput} />
+                  )}
+                />
+                <Route component={NotFound} />
+              </Switch>
+            </div>
+          </HashRouter>
+        </ThemeProvider>
       </PhotoContextProvider>
     );
   }
-}
+
 
 export default App;

src/Styles/dark.js

@@ -0,0 +1,17 @@
+export default {
+  title: "dark",
+
+  colors: {
+    primary: "#383A59",
+    secondary: "#25273C",
+
+    background: "#181823",
+    backgroundStrong: "#2d2d41",
+    backgroundButtonSelected: "#4e46be",
+    backgroundButton: "#BD93F9",
+    text: "#fff",
+  },
+
+
+
+}

src/Styles/light.js

@@ -0,0 +1,15 @@
+export  default {
+  title: "light",
+
+  colors: {
+    primary: "#38AECC",
+    secondary: "#FCFFFD",
+
+    background: "#7CA5B8",
+    backgroundStrong: "#D6EDFF",
+    backgroundButtonSelected: "#7569f1",
+    backgroundButton: "#2C2C34",
+
+    text: "#333",
+  },
+} 

src/components/Container.js

@@ -12,6 +12,7 @@ const Container = ({ searchTerm }) => {
 
   return (
     <div className="photo-container">
+
       {loading ? <Loader /> : <Gallery data={images} />}
     </div>
   );

src/components/Form.js

@@ -3,35 +3,38 @@ import React, { useState } from "react";
 const Form = ({ handleSubmit, history }) => {
   const [searchEntry, setSearchEntry] = useState("");
   // update search text state
-  const updateSearchInput = e => {
+  const updateSearchInput = (e) => {
     setSearchEntry(e.target.value);
   };
   return (
-    <form
-      className="search-form"
-      onSubmit={e => handleSubmit(e, history, searchEntry)}
-    >
-      <input
-        type="text"
-        name="search"
-        placeholder="Search..."
-        onChange={updateSearchInput}
-        value={searchEntry}
-      />
-      <button
-        type="submit"
-        className={`search-button ${searchEntry.trim() ? "active" : null}`}
-        disabled={!searchEntry.trim()}
+    <>
+      <form
+        className="search-form"
+        onSubmit={(e) => handleSubmit(e, history, searchEntry)}
       >
-        <svg height="32" width="32">
-          <path
-            d="M19.427 21.427a8.5 8.5 0 1 1 2-2l5.585 5.585c.55.55.546 1.43 0 1.976l-.024.024a1.399 1.399 0 0 1-1.976 0l-5.585-5.585zM14.5 21a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z"
-            fill="#ffffff"
-            fillRule="evenodd"
-          />
-        </svg>
-      </button>
-    </form>
+        <input
+          type="text"
+          name="search"
+          placeholder="Search..."
+          onChange={updateSearchInput}
+          value={searchEntry}
+        />
+        <button
+          type="submit"
+          className={`search-button ${searchEntry.trim() ? "active" : null}`}
+          disabled={!searchEntry.trim()}
+        >
+          <svg height="32" width="32">
+            <path
+              d="M19.427 21.427a8.5 8.5 0 1 1 2-2l5.585 5.585c.55.55.546 1.43 0 1.976l-.024.024a1.399 1.399 0 0 1-1.976 0l-5.585-5.585zM14.5 21a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z"
+              fill="#ffffff"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+      </form>
+
+    </>
   );
 };