From 5d58861e98669714cae2ae5cad5fdd143c41dfb1 Mon Sep 17 00:00:00 2001
From: Useff Chase <useffc@gmail.com>
Date: Mon, 29 Oct 2018 20:37:56 -0400
Subject: [PATCH 1/3] noodling with dark theme

---
 app/components/Settings.jsx     |   1 +
 stylesheets/v2-classic-dark.css | 108 ++++++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 stylesheets/v2-classic-dark.css

diff --git a/app/components/Settings.jsx b/app/components/Settings.jsx
index 6aec1aff..7d3047a1 100644
--- a/app/components/Settings.jsx
+++ b/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>
diff --git a/stylesheets/v2-classic-dark.css b/stylesheets/v2-classic-dark.css
new file mode 100644
index 00000000..ed8c4696
--- /dev/null
+++ b/stylesheets/v2-classic-dark.css
@@ -0,0 +1,108 @@
+*: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 {
+  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);
+}

From 4df4029dfa907bc9fb2c860e6640eac2ace3a009 Mon Sep 17 00:00:00 2001
From: Noah Chase <nchase@gmail.com>
Date: Sat, 12 Jan 2019 06:24:25 -0500
Subject: [PATCH 2/3] move style choice outside of react to avoid flash of
 mis-styled content

---
 app/components/index.jsx | 1 -
 app/reducer-root.js      | 2 ++
 templates/react.ejs.html | 5 +++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/index.jsx b/app/components/index.jsx
index 494e1514..b8608ec3 100644
--- a/app/components/index.jsx
+++ b/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)}
diff --git a/app/reducer-root.js b/app/reducer-root.js
index 4acf0005..1f6d07e4 100644
--- a/app/reducer-root.js
+++ b/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
     });
diff --git a/templates/react.ejs.html b/templates/react.ejs.html
index 496e1a38..ea262f3c 100644
--- a/templates/react.ejs.html
+++ b/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 %>
     <% } %>

From 888fc6cc2069a2aada8cc29915b1470d011cdae9 Mon Sep 17 00:00:00 2001
From: Noah Chase <nchase@gmail.com>
Date: Sat, 12 Jan 2019 06:25:10 -0500
Subject: [PATCH 3/3] add a couple of additional dark styles (loading, a couple
 of text areas, killed light atom borders

---
 stylesheets/v2-classic-dark.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/stylesheets/v2-classic-dark.css b/stylesheets/v2-classic-dark.css
index ed8c4696..c4a81635 100644
--- a/stylesheets/v2-classic-dark.css
+++ b/stylesheets/v2-classic-dark.css
@@ -58,6 +58,7 @@ body {
 }
 
 .post {
+  border-width: 0;
   box-shadow: 0 0 1px currentColor;
 
   &:hover {
@@ -106,3 +107,15 @@ body {
 .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;
+}