Update UI in Dark Mode

Tuong Tran · Tuong Tran · commit 814a9ef67a09 · 2019-10-20T09:48:53.000-04:00
diff --git a/src/App.js b/src/App.js
@@ -19,10 +19,17 @@ class App extends React.Component {
     super(props);
     this.state = {
       count: 5,
-      posts1: []
+      posts1: [],
+      isDark: false
     }
   }
 
+  isDarkTheme = (dark) => {
+    this.setState({
+      isDark: dark
+    })
+  }
+
   componentDidMount() {
     var newPosts = [];
     const posts = markdownFiles.forEach(
@@ -96,8 +103,10 @@ class App extends React.Component {
     return (
       <div>
         <BrowserRouter>
-          <Navigation />
-          <Route exact path="/" component={Herocontent} />
+          <Navigation dark = {this.isDarkTheme}/>
+          <Route exact path="/" component={() => (
+              <Herocontent isDark = {this.state.isDark}/>
+          )} />
           <Route path="/login" component={Login} />
           <Fragment>
             <section className="section">
diff --git a/src/Components/Herocontent.js b/src/Components/Herocontent.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import Main from './Main';
 
-const Herocontent = () => (
+const Herocontent = (props) => (
   <Fragment>
     <div className="main thememain-blue">
       <div className="container main hero-content-main">
@@ -32,7 +32,7 @@ const Herocontent = () => (
         </div>
       </div>
     </div>
-    <Main />
+    <Main isDark = {props.isDark}/>
   </Fragment>
 );
 
diff --git a/src/Components/Main.js b/src/Components/Main.js
@@ -18,7 +18,7 @@ class Main extends React.Component {
 
   render() {
     return (
-      <div className="main thememain-white">
+      <div className={this.props.isDark ? 'main thememain-dark' : 'main thememain-white'}>
         {
           titleMetaData.map((title) =>
             <div className="container content-main">
diff --git a/src/Components/Navigation.js b/src/Components/Navigation.js
@@ -1,13 +1,13 @@
 import React from "react";
 import { Link } from 'react-router-dom';
 
-const Navigation = () => {
+const Navigation = (props) => {
   const [currentmode, changeState] = React.useState("Light Mode");
   const DocBody = document.getElementById("Apptheme");
   const changemode = () => {
     currentmode === "Light Mode"
-      ? ((DocBody.className = "thememain-dark"), changeState("Dark Mode"))
-      : ((DocBody.className = "thememain-white "), changeState("Light Mode"));
+      ? ((DocBody.className = "thememain-dark"), changeState("Dark Mode"), props.dark(true))
+      : ((DocBody.className = "thememain-white "), changeState("Light Mode"), props.dark(false));
   };
   return (
     <div className="main thememain-header">
diff --git a/src/style.css b/src/style.css
@@ -37,6 +37,10 @@
   background: #fff;
 }
 
+.thememain-white h3 {
+  color: #333;
+}
+
 .thememain-white .thememain-header {
   background: linear-gradient(165deg, #6e60cc, #484389);
   color: #fff;

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ class Main extends React.Component {`
`18`	`18`
`19`	`19`	`render() {`
`20`	`20`	`return (`
`21`		`- <div className="main thememain-white">`
	`21`	`+ <div className={this.props.isDark ? 'main thememain-dark' : 'main thememain-white'}>`
`22`	`22`	`{`
`23`	`23`	`titleMetaData.map((title) =>`
`24`	`24`	`<div className="container content-main">`