Nightmode

1 files changed, 39 insertions, 4 deletions

diff --git a/src/App.js b/src/App.js
index ff5e712..9ea8330 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,8 +22,10 @@ class App extends Component {
     super();
     this.state = {
       boardList: [],
-      isLoaded: false
+      isLoaded: false,
+      nightMode: true
     };
+    this.toggleTheme = this.toggleTheme.bind(this);
   }
 
   componentDidMount() {
@@ -36,6 +38,18 @@ class App extends Component {
       });
   }
 
+  componentDidUpdate() {
+    if (this.state.nightMode) {
+      document.body.style.backgroundColor = "#313233";
+    } else {
+      document.body.style.backgroundColor = "#FFFFFF";
+    }
+  }
+
+  toggleTheme() {
+    this.setState({ nightMode: !this.state.nightMode });
+  }
+
   render() {
     if (!this.state.isLoaded) {
       if (!this.state.isLoaded) {
@@ -87,15 +101,36 @@ class App extends Component {
                 )}
               </Dropdown.Menu>
             </Dropdown>
+            <Menu.Menu position="right">
+              <Menu.Item as="a" onClick={this.toggleTheme}>
+                {this.state.nightMode ? (
+                  <Icon name="sun" />
+                ) : (
+                  <Icon name="moon" />
+                )}
+              </Menu.Item>
+            </Menu.Menu>
           </Container>
         </Menu>
         <Container className="main">
           <Router>
-            <Home boardList={this.state.boardList} path="/" />
-            <Thread boardList={this.state.boardList} path="/:dir/read/:id">
+            <Home
+              boardList={this.state.boardList}
+              path="/"
+              nightMode={this.state.nightMode}
+            />
+            <Thread
+              boardList={this.state.boardList}
+              path="/:dir/read/:id"
+              nightMode={this.state.nightMode}
+            >
               <Thread path=":active" />
             </Thread>
-            <Board boardList={this.state.boardList} path="/board/:dir" />
+            <Board
+              boardList={this.state.boardList}
+              path="/board/:dir"
+              nightMode={this.state.nightMode}
+            />
             <NotFound default />
           </Router>
         </Container>