From c2f62634bca6ac6610a330bf54751d3ef7cc2e0e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 10 May 2018 17:58:45 +0200
Subject: [PATCH] initial state based on time of day

---
 src/components/molecules/ThemeSwitch.jsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/ThemeSwitch.jsx b/src/components/molecules/ThemeSwitch.jsx
index 18c2229..94189f8 100644
--- a/src/components/molecules/ThemeSwitch.jsx
+++ b/src/components/molecules/ThemeSwitch.jsx
@@ -7,12 +7,16 @@ class ThemeSwitch extends Component {
   constructor(props) {
     super(props)
 
-    this.state = {
-      dark: false
-    }
+    this.state = { dark: false }
   }
 
   componentDidMount() {
+    const now = new Date().getHours()
+
+    if (now >= 19 || now <= 7) {
+      this.setState({ dark: true })
+    }
+
     this.toggleTheme()
   }
 
@@ -22,7 +26,7 @@ class ThemeSwitch extends Component {
 
   isDark = () => this.state.dark === true
 
-  toggleState = () => {
+  handleChange = () => {
     this.setState({ dark: !this.isDark() })
   }
 
@@ -36,11 +40,12 @@ class ThemeSwitch extends Component {
         <label className="checkbox">
           <span className="checkbox__label">Toggle Night Mode</span>
           <input
-            onClick={this.toggleState}
+            onChange={this.handleChange}
             type="checkbox"
             name="toggle"
             value="toggle"
             aria-describedby="toggle"
+            checked={this.state.dark}
           />
           <span
             id="toggle"