Add dark Mode

Author: PrinceSumberia

src/App.js

@@ -1,13 +1,31 @@
-import React from "react";
+import React, { Component } from "react";
 import "./App.css";
 import CovidApp from "./components/CovidApp";
+import Paper from "./components/Paper";
 
-function App() {
-  return (
-    <div>
-      <CovidApp />
-    </div>
-  );
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDarkMode: false,
+    };
+    this.setDarkMode = this.setDarkMode.bind(this);
+  }
+
+  setDarkMode(e) {
+    this.setState({ isDarkMode: e.target.checked });
+  }
+
+  render() {
+    return (
+      <Paper isDarkMode={this.state.isDarkMode}>
+        <CovidApp
+          setDarkMode={this.setDarkMode}
+          isDarkMode={this.state.isDarkMode}
+        />
+      </Paper>
+    );
+  }
 }
 
 export default App;

src/components/CodeApp.css

@@ -0,0 +1,66 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.darkModeButton {
+  margin-left: auto;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #FA6400;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #FA6400;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

src/components/CovidApp.js

@@ -3,6 +3,7 @@ import Overview from "./Overview";
 import Navbar from "./Navbar";
 import { withStyles } from "@material-ui/styles";
 import colors from "../colors";
+import "./CodeApp.css";
 
 const styles = {
   root: {
@@ -12,7 +13,8 @@ const styles = {
   navBar: {
     flex: "0 0 10%",
     backgroundColor: colors.darkPurple,
-    color: "rgba(255,255,255,.9)",
+    color: (props) =>
+      props.isDarkMode ? "rgba(255,255,255,.87)" : "rgba(255,255,255,.9)",
     textTransform: "capitalize",
     display: "flex",
     justifyContent: "center",
@@ -21,12 +23,18 @@ const styles = {
     flex: 1,
     padding: "4rem",
   },
+  header: {
+    display: "flex",
+    alignItems: "center",
+  },
   heading: {
     fontWeight: "500",
-    color: colors.darkPurple,
+    color: (props) =>
+      props.isDarkMode ? "rgb(245, 245, 245)" : colors.darkPurple,
+    display: "inline-block",
     "& span": {
-      color: colors.purple,
       fontWeight: "900",
+      color: colors.purple,
       marginRight: "1rem",
     },
   },
@@ -40,18 +48,26 @@ class CovidApp extends Component {
   }
 
   render() {
-    const { classes } = this.props;
+    const { classes, setDarkMode, isDarkMode } = this.props;
 
     return (
       <div className={classes.root}>
         <div className={classes.navBar}>
-          <Navbar />
+          <Navbar isDarkMode={isDarkMode} />
         </div>
         <div className={classes.mainContent}>
-          <h1 className={classes.heading}>
-            <span>Covid-19</span> India Trend
-          </h1>
-          <Overview />
+          <div className={classes.header}>
+            <h1 className={classes.heading}>
+              <span>Covid-19</span> India Trend
+            </h1>
+            <div className="darkModeButton">
+              <label className="switch">
+                <input type="checkbox" onChange={setDarkMode} />
+                <span className="slider round"></span>
+              </label>
+            </div>
+          </div>
+          <Overview isDarkMode={isDarkMode} />
         </div>
       </div>
     );

src/components/DisplayPanels.js

@@ -7,7 +7,7 @@ const styles = {
     width: "15%",
     display: "flex",
     flexDirection: "column",
-    backgroundColor: "#fff",
+    backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
     marginBottom: "3.5rem",
     marginTop: "3.5rem",
     padding: "1.5rem 3rem",

src/components/Navbar.js

@@ -34,7 +34,7 @@ const styles = {
     padding: "1rem 0",
   },
   active: {
-    color: colors.purple,
+    color: (props) => (props.isDarkMode ? "rgb(245, 245, 245)" : colors.purple),
     position: "relative",
     zIndex: "10",
     animation: "$float 2s ease infinite",
@@ -45,7 +45,8 @@ const styles = {
       width: "165%",
       height: "110%",
       display: "block",
-      backgroundColor: "rgb(245, 245, 245)",
+      backgroundColor: (props) =>
+        props.isDarkMode ? colors.lightPurple : "rgb(245, 245, 245)",
       transform: "translateX(-1rem) skewX(10deg)",
       borderRadius: "25px",
       zIndex: 10,
@@ -58,7 +59,8 @@ const styles = {
       display: "block",
       top: 0,
       left: 0,
-      backgroundColor: colors.lightPurple,
+      backgroundColor: (props) =>
+        props.isDarkMode ? "rgba(255,255,255,.6)" : colors.lightPurple,
       transform: "translate(-.9rem, .4rem) skew(10deg, -5deg)",
       borderRadius: "25px",
     },

src/components/Overview.js

@@ -68,10 +68,6 @@ const styles = {
     },
   },
 
-  // refreshIcon: {
-  //   marginRight: "1rem",
-  // },
-
   refreshIcon: {
     fontSize: "10rem",
     animationName: "$rotation",
@@ -155,7 +151,7 @@ class Overview extends Component {
   render() {
     const { confirmed, recovered, deaths, activeCases } = this.state.currentDay;
     const dataChange = this.state.dataChanges;
-    const { classes } = this.props;
+    const { classes, isDarkMode } = this.props;
     const { isLoading } = this.state;
 
     if (isLoading) {
@@ -172,21 +168,25 @@ class Overview extends Component {
           <DisplayPanels
             title="Confirmed"
             number={confirmed}
+            isDarkMode={isDarkMode}
             dataChange={dataChange.confirmed}
           />
           <DisplayPanels
             title="Active"
             number={activeCases}
+            isDarkMode={isDarkMode}
             dataChange={dataChange.activeCases}
           />
           <DisplayPanels
             title="Recovered"
             number={recovered}
+            isDarkMode={isDarkMode}
             dataChange={dataChange.recovered}
           />
           <DisplayPanels
             title="Deceased"
             number={deaths}
+            isDarkMode={isDarkMode}
             dataChange={dataChange.deaths}
           />
         </div>

src/components/Paper.js

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+import { withStyles } from "@material-ui/styles";
+
+const styles = {
+  darkMode: {
+    backgroundColor: "#121212",
+    color: "rgba(255,255,255,.87)",
+  },
+};
+
+class Paper extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const { isDarkMode, classes } = this.props;
+    return (
+      <div className={isDarkMode && classes.darkMode}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(Paper);

src/index.css

@@ -10,8 +10,6 @@ html {
   box-sizing: border-box;
 }
 
-
-
 body {
   font-family: 'Roboto',
     sans-serif;