Add dark theme

port and revamp insin/react-hn#96

Author: arnaudj

public/css/style.css

@@ -62,6 +62,12 @@ span.control:hover {
   font-size: 13.3333px;
   font-family: Verdana, Geneva, sans-serif;
 }
+
+.Dark__app__wrap {
+  background-color: #222;
+  color: #e3e3e3;
+}
+
 .App__header {
   color: #00d8ff;
   background-color: #222;
@@ -70,6 +76,11 @@ span.control:hover {
   vertical-align: middle;
   position: relative;
 }
+.Dark__app__wrap .App__header {
+  background: #333;
+  color: #fff;
+}
+
 .App__settings {
   position: absolute;
   top: 6px;
@@ -106,6 +117,11 @@ span.control:hover {
 .App__header a.active {
   color: #fff;
 }
+
+.Dark__app__wrap .App__header a.active {
+  color: #00d8ff;
+}
+
 .App__homelink {
   text-decoration: none;
   font-weight: bold;
@@ -126,6 +142,9 @@ span.control:hover {
   color: #333;
   padding: 6px 0;
 }
+.Dark__app__wrap .App__footer {
+  color: #d3d3d3;
+}
 .App__footer a {
   color: inherit;
   text-decoration: underline;
@@ -137,6 +156,9 @@ span.control:hover {
   margin-top: 1em;
   margin-bottom: .5em;
 }
+.Dark__app__wrap .Items__list {
+  color: #d3d3d3;
+}
 .ListItem {
   margin-bottom: 16px;
 }
@@ -164,6 +186,9 @@ span.control:hover {
   color: #000;
   text-decoration: none;
 }
+.Dark__app__wrap .Paginator a {
+  color: #e3e3e3;
+}
 .Paginator a:hover {
   text-decoration: underline;
 }
@@ -181,6 +206,11 @@ span.control:hover {
   text-decoration: none;
   color: #000;
 }
+
+.Dark__app__wrap .Item__title a {
+  color: #e3e3e3;
+}
+
 .Item__title a:hover {
   text-decoration: underline;
 }
@@ -288,6 +318,9 @@ span.control:hover {
 .Comment__text a {
   color: #000;
 }
+.Dark__app__wrap .Comment__text a {
+  color: #e3e3e3;
+}
 .Comment__text a:visited {
   color: #666;
 }

src/App.js

@@ -37,32 +37,32 @@ var App = React.createClass({
 
   toggleSettings(e) {
     e.preventDefault()
-    this.setState({showSettings: !this.state.showSettings})
+    this.setState({ showSettings: !this.state.showSettings })
   },
 
   render() {
-    return <div className="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>{' '}
-        <Link to="/news" activeClassName="active" className="App__homelink">React HN</Link>{' '}
-        <Link to="/newest" activeClassName="active">new</Link>{' | '}
-        <Link to="/newcomments" activeClassName="active">comments</Link> {' | '}
-        <Link to="/show" activeClassName="active">show</Link>{' | '}
-        <Link to="/ask" activeClassName="active">ask</Link>{' | '}
-        <Link to="/jobs" activeClassName="active">jobs</Link>
-        <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"/>}
-      </div>
-      <div className="App__content">
-        {this.props.children}
-      </div>
-      <div className="App__footer">
-        {`react-hn v${__VERSION__} | `}
-        <a href="https://github.com/insin/react-hn">insin/react-hn</a>
-      </div>
+    return <div className={SettingsStore.switchDarkTheme ? 'Dark__app__wrap App' : 'App'} onClick={this.state.showSettings && this.toggleSettings}>
+      <div className={SettingsStore.switchDarkTheme ? 'Dark__app__wrap App__wrap' : 'App__wrap'}>
+        <div className="App__header">
+          <Link to="/news" className="App__homelinkicon"><img src="img/logo.png" width="16" height="16" alt="" /></Link>{' '}
+          <Link to="/news" activeClassName="active" className="App__homelink">React HN</Link>{' '}
+          <Link to="/newest" activeClassName="active">new</Link>{' | '}
+          <Link to="/newcomments" activeClassName="active">comments</Link> {' | '}
+          <Link to="/show" activeClassName="active">show</Link>{' | '}
+          <Link to="/ask" activeClassName="active">ask</Link>{' | '}
+          <Link to="/jobs" activeClassName="active">jobs</Link>
+          <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" />}
+        </div>
+        <div className="App__content">
+          {this.props.children}
+        </div>
+        <div className="App__footer">
+          {`react-hn v${__VERSION__} | `}
+          <a href="https://github.com/insin/react-hn">insin/react-hn</a>
+        </div>
       </div>
     </div>
   }

src/Settings.js

@@ -50,6 +50,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="switchDarkTheme">
+            <input type="checkbox" name="switchDarkTheme" id="switchDarkTheme" checked={SettingsStore.switchDarkTheme}/> switch dark theme
+          </label>
+          <p>Switch to dark theme.</p>
+        </div>
         <div className="Settings__setting">
           <table>
             <tbody>

src/stores/SettingsStore.js

@@ -8,6 +8,7 @@ var SettingsStore = {
   replyLinks: true,
   showDead: false,
   showDeleted: false,
+  switchDarkTheme: false,
   titleFontSize: 18,
   listSpacing: 16,
 
@@ -24,6 +25,7 @@ var SettingsStore = {
       replyLinks: this.replyLinks,
       showDead: this.showDead,
       showDeleted: this.showDeleted,
+      switchDarkTheme: this.switchDarkTheme,
       titleFontSize: this.titleFontSize,
       listSpacing: this.listSpacing
     }))