diff --git a/public/css/style.css b/public/css/style.css
index 248e88f..b2d24f1 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -62,6 +62,11 @@ 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 +75,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 +116,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 +141,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 +155,9 @@ span.control:hover {
   margin-top: 1em;
   margin-bottom: .5em;
 }
+.Dark__app__wrap .Items__list {
+  color: #d3d3d3;
+}
 .ListItem {
   margin-bottom: 16px;
 }
@@ -164,6 +185,9 @@ span.control:hover {
   color: #000;
   text-decoration: none;
 }
+.Dark__app__wrap .Paginator a {
+  color: #e3e3e3;
+}
 .Paginator a:hover {
   text-decoration: underline;
 }
@@ -181,6 +205,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 +317,9 @@ span.control:hover {
 .Comment__text a {
   color: #000;
 }
+.Dark__app__wrap .Comment__text a {
+  color: #e3e3e3;
+}
 .Comment__text a:visited {
   color: #666;
 }
diff --git a/src/App.js b/src/App.js
index 56cffa4..fa16764 100644
--- a/src/App.js
+++ b/src/App.js
@@ -50,7 +50,7 @@ var App = React.createClass({
 
   render() {
     return <div className="App" onClick={this.state.showSettings && this.toggleSettings}>
-      <div className="App__wrap">
+      <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>{' '}
diff --git a/src/Settings.js b/src/Settings.js
index faa2603..9342a86 100644
--- a/src/Settings.js
+++ b/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="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>
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index ee4c861..e0bb8f1 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -8,6 +8,7 @@ var SettingsStore = {
   replyLinks: true,
   showDead: false,
   showDeleted: false,
+  switchDarkTheme:false,
   titleFontSize: 18,
   listSpacing: 16,
   offlineMode: false,
@@ -25,6 +26,7 @@ var SettingsStore = {
       replyLinks: this.replyLinks,
       showDead: this.showDead,
       showDeleted: this.showDeleted,
+      switchDarkTheme: this.switchDarkTheme,
       titleFontSize: this.titleFontSize,
       listSpacing: this.listSpacing,
       offlineMode: this.offlineMode