Feature/Dark mode

public/css/style.css

@@ -1,5 +1,7 @@
+html {
+  background-color: #00d8ff;
+}
 body {
-  background-color: #fff;
   margin: 0;
 }
 form {
@@ -53,6 +55,14 @@ span.control:hover {
   }
 }
 
+.App {
+  background: #fff;
+  overflow: auto;
+  min-height: 100vh;
+}
+.App--dark {
+  background: #000;
+}
 .App__wrap {
   width: 90%;
   max-width: 1280px;
@@ -62,6 +72,10 @@ span.control:hover {
   font-size: 13.3333px;
   font-family: Verdana, Geneva, sans-serif;
 }
+.App--dark .App__wrap{
+  background-color: #222;
+  color: #aaa;
+}
 .App__header {
   color: #00d8ff;
   background-color: #222;
@@ -70,6 +84,10 @@ span.control:hover {
   vertical-align: middle;
   position: relative;
 }
+.App--dark .App__header{
+  color: #eee;
+  background-color: #333;
+}
 .App__settings {
   position: absolute;
   top: 6px;
@@ -106,6 +124,9 @@ span.control:hover {
 .App__header a.active {
   color: #fff;
 }
+.App--dark .App__header a.active{
+  color: #00d8ff;
+}
 .App__homelink {
   text-decoration: none;
   font-weight: bold;
@@ -126,6 +147,10 @@ span.control:hover {
   color: #333;
   padding: 6px 0;
 }
+.App--dark .App__footer{
+  color: #eee;
+  border-top: 1px solid #000;
+}
 .App__footer a {
   color: inherit;
   text-decoration: underline;
@@ -164,6 +189,9 @@ span.control:hover {
   color: #000;
   text-decoration: none;
 }
+.App--dark .Paginator a{
+  color: #eee;
+}
 .Paginator a:hover {
   text-decoration: underline;
 }
@@ -177,16 +205,25 @@ span.control:hover {
   color: #666;
   font-size:18px;
 }
+.App--dark .Item__title {
+  color: #aaa;
+}
 .Item__title a {
   text-decoration: none;
   color: #000;
 }
+.App--dark .Item__title a{
+  color: #eee;
+}
 .Item__title a:hover {
   text-decoration: underline;
 }
 .Item__title a:visited {
   color: #666;
 }
+.App--dark .Item__title a:visited{
+  color: #aaa;
+}
 .Item__meta {
   color: #666;
 }
@@ -231,6 +268,9 @@ span.control:hover {
 .Comment--new > .Comment__content {
   background-color: #ffffde;
 }
+.App--dark .Comment--new > .Comment__content {
+  background-color: #333;
+}
 /* Highlights a comment and its descendants on hover -- too distracting?
 .Comment:hover > .Comment__content {
   background-color: #fff;
@@ -288,9 +328,15 @@ span.control:hover {
 .Comment__text a {
   color: #000;
 }
+.App--dark .Comment__text a{
+  color: #ccc;
+}
 .Comment__text a:visited {
   color: #666;
 }
+.App--dark .Comment__text a:visited{
+  color: #ddd;
+}
 .Comment__text p:last-child, .Comment__text pre:last-child {
   margin-bottom: 0;
 }

src/App.js

@@ -26,7 +26,11 @@ var App = React.createClass({
 
   componentDidMount() {
     // Empty the prebooted HTML and hydrate using live results from Firebase
-    this.setState({ prebootHTML: '', showChildren: true })
+    this.setState({
+      prebootHTML: '',
+      showChildren: true,
+      darkMode: SettingsStore.darkMode
+    })
   },
 
   componentWillUnmount() {
@@ -48,8 +52,12 @@ var App = React.createClass({
     this.setState({showSettings: !this.state.showSettings})
   },
 
+  toggleDarkMode() {
+    this.setState({darkMode: !this.state.darkMode})
+  },
+
   render() {
-    return <div className="App" onClick={this.state.showSettings && this.toggleSettings}>
+    return <div className={this.state.darkMode ? 'App App--dark' : 'App'} onClick={this.state.showSettings && this.toggleSettings}>
       <div className="App__wrap">
       <div className="App__header">
         <Link to="/news" className="App__homelinkicon"><img src="img/logo.png" width="16" height="16" alt="" /></Link>{' '}
@@ -62,7 +70,7 @@ var App = React.createClass({
         <a className="App__settings" tabIndex="0" onClick={this.toggleSettings} onKeyPress={this.toggleSettings}>
           {this.state.showSettings ? 'hide settings' : 'settings'}
         </a>
-        {this.state.showSettings && <Settings key="settings"/>}
+        {this.state.showSettings && <Settings key="settings" toggleDarkMode={this.toggleDarkMode}/>}
       </div>
       <div className="App__content">
         <div dangerouslySetInnerHTML={{ __html: this.state.prebootHTML }}/>

src/Settings.js

@@ -56,6 +56,12 @@ var Settings = React.createClass({
           </label>
           <p>Show comments flagged as deleted in threads.</p>
         </div>
+        <div className="Settings__setting Settings__setting--checkbox">
+          <label htmlFor="darkMode">
+            <input type="checkbox" name="darkMode" id="darkMode" checked={SettingsStore.darkMode} onChange={this.props.toggleDarkMode}/> Use dark mode
+          </label>
+          <p>Use dark mode for better readability in low light</p>
+        </div>
         <div className="Settings__setting">
           <table>
             <tbody>

src/stores/SettingsStore.js

@@ -11,6 +11,7 @@ var SettingsStore = {
   titleFontSize: 18,
   listSpacing: 16,
   offlineMode: false,
+  darkMode: false,
 
   load() {
     var json = storage.get(STORAGE_KEY)
@@ -27,7 +28,8 @@ var SettingsStore = {
       showDeleted: this.showDeleted,
       titleFontSize: this.titleFontSize,
       listSpacing: this.listSpacing,
-      offlineMode: this.offlineMode
+      offlineMode: this.offlineMode,
+      darkMode: this.darkMode
     }))
   }
 }