Dark theme

app/components/Settings.jsx

@@ -222,6 +222,7 @@ var Settings = createReactClass({
               >
                 <option value="default">default</option>
                 <option value="classic">classic</option>
+                <option value="classic-dark">classic dark</option>
                 <option value="neoclassical">neoclassical</option>
                 <option value="giko">giko</option>
               </select>

app/components/index.jsx

@@ -23,7 +23,6 @@ module.exports = createReactClass({
   render: function() {
     return (
       <div className="routerContainer">
-        <link rel="stylesheet" href={`/stylesheets/v2-${this.props.value.settings.style}.css`} />
         <Router
           history={browserHistory}
           createElement={createElement(this.props)}

app/reducer-root.js

@@ -39,6 +39,8 @@ function handleSettings(state, action) {
   if (action.type === 'STYLECHANGE') {
     localStorage.setItem('forumStyleValue', action.value);
 
+    document.getElementById('forumstylesheet').href = `/stylesheets/v2-${window.localStorage.getItem('forumStyleValue')}.css`;
+
     return Object.assign({}, state, {
       style: action.value
     });

stylesheets/v2-classic-dark.css

@@ -0,0 +1,121 @@
+*:focus {
+  outline-color: hsla(200, 100%, 50%, 0.75);
+}
+
+@font-face {
+  font-family: 'Avenir';
+  src: url('/fonts/AvenirLTStd-Roman.otf') format('opentype');
+}
+
+body {
+  font-family: 'Avenir', sans-serif;
+  background: #212733;
+  color: #d9d9d9;
+}
+
+.accent {
+  color: #00bbff;
+}
+
+.action:focus {
+  outline: none;
+}
+
+.action:before,
+.action:after {
+  color: #d9d9d9;
+  opacity: 0;
+  font-size: 128.5%;
+  transition-property: opacity;
+  transition-duration: 200ms;
+}
+
+.focusAction {
+  color: #d9d9d9;
+}
+
+.v-Atom {
+  background: #212733;
+}
+
+.filter,
+.input {
+  border: none;
+  box-shadow: 0 0 5px black inset;
+}
+
+.input--secondary {
+  color: #00bbff;
+  box-shadow: 0 0 2px black;
+}
+
+.input--toggle {
+  border-color: #00bbff;
+}
+
+.input--toggle.isActive {
+  background: #00bbff;
+}
+
+.post {
+  border-width: 0;
+  box-shadow: 0 0 1px currentColor;
+
+  &:hover {
+    box-shadow: 0 0 4px currentColor;
+  }
+}
+.post.isNew {
+  border-color: #00bbff;
+}
+
+.post .actionContainer {
+  margin-bottom: -1em;
+  padding: 1em 0;
+  border-top: 1px solid currentColor;
+}
+
+.connectionBar-name {
+  background-color: #00bbff;
+}
+
+.controlBar-control:hover,
+.controlBar-control:focus {
+  border-bottom-color: #00bbff;
+}
+
+.v-Divider {
+  border-bottom-color: #00bbff;
+}
+
+.v-Progress {
+  border-bottom-color: #00bbff;
+}
+
+.footerBar a:hover,
+.footerBar a:focus {
+  border-top-color: #00bbff;
+}
+
+.content a,
+.content blockquote,
+.content .blockquote {
+  border-color: #00bbff;
+}
+
+.content blockquote,
+.content .blockquote  {
+  background-color: hsla(0, 0%, 50%, 0.05);
+}
+
+textarea, input,
+.data-callout,
+.input--toggle {
+  background: inherit;
+  color: inherit;
+}
+
+.loader {
+  background: #212733;
+  color: #d9d9d9;
+}

templates/react.ejs.html

@@ -17,6 +17,11 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/homeicon.png" />
     <link rel="icon" sizes="192x192" href="/homeicon.png" />
     <link rel="icon" href="/favicon.png?12-22-2016" />
+    <link rel="stylesheet" id="forumstylesheet" />
+    <script>
+      document.getElementById('forumstylesheet').href = '/stylesheets/v2-' + window.localStorage.getItem('forumStyleValue') + '.css';
+    </script>
+
     <% if (user && user.id !== 0) { %>
       <%- user.custom_code %>
     <% } %>