From 6b0c60bb24059c9eb216f6ea65ffe58fd4e5bb9a Mon Sep 17 00:00:00 2001
From: Evin Sellin <evinism@gmail.com>
Date: Tue, 8 Jan 2019 01:01:32 -0800
Subject: [PATCH 1/2] basic dark theme, lame colors but acceptable

---
 public/style.css             | 78 +++++++++++++++++++++++++++++++++++-
 src/components/App/index.jsx | 14 ++++++-
 2 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/public/style.css b/public/style.css
index 7d962d1..ac2074e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,7 +1,6 @@
 body {
   margin: 0px;
   font-family: Roboto;
-
 }
 
 .app-wrapper {
@@ -220,3 +219,80 @@ aside button {
     width: 0px;  /* remove scrollbar space */
     background: transparent;  /* optional: just make scrollbar invisible */
 }
+
+/* Dark Mode */
+
+.dark-mode.app-wrapper {
+  color: #eeeeee;
+  background-color: #12141c;
+}
+
+.dark-mode header {
+  background-color: #333344;
+}
+
+.dark-mode .code {
+  background: #333333;
+}
+
+.dark-mode .lambda-input {
+  color: whitesmoke;
+}
+
+/* Dark mode REPL stuff */
+.dark-mode .repl .info {
+  color: whitesmoke;
+}
+
+.dark-mode .repl .result {
+  color: whitesmoke;
+}
+
+.dark-mode .repl .command {
+  color: #999999;
+}
+
+.dark-mode .repl .error {
+  color: #ff3333;
+}
+
+.dark-mode .repl .caret {
+  color: #676767;
+}
+
+.dark-mode .repl .prompt-caret {
+  color: #eeeeee;
+}
+
+.dark-mode .result i {
+  color: #aaaadd;
+}
+
+.dark-mode .repl {
+  border-left: 1px solid #33333a;
+}
+
+.dark-mode aside {
+  border-left: 3px dashed #33333a;
+}
+
+.dark-mode footer {
+  background-color: #333344;
+  color: #eeeeee;
+}
+
+.dark-mode .metadata {
+  color: whitesmoke;
+  border-left: 5px solid #33333a;
+}
+
+
+.dark-mode .secret.secret {
+  background: whitesmoke;
+  color: transparent;
+}
+
+.dark-mode .secret.secret:hover {
+  color: whitesmoke;
+  background-color: #333333;
+}
\ No newline at end of file
diff --git a/src/components/App/index.jsx b/src/components/App/index.jsx
index 67bd539..7ad93b2 100644
--- a/src/components/App/index.jsx
+++ b/src/components/App/index.jsx
@@ -23,6 +23,7 @@ const defaultState = {
   currentProblem: 0,
   gameStarted: false,
   shownProblem: 0,
+  darkMode: false,
 };
 
 class App extends React.Component {
@@ -79,14 +80,22 @@ class App extends React.Component {
     );
   }
 
+  _toggleDarkLight = () => {
+    this.setState({
+      darkMode: !this.state.darkMode,
+    });
+  }
+
   render() {
     const {
       gameStarted,
       shownProblem,
       currentProblem,
+      darkMode,
     } = this.state;
+
     return (
-      <div className="app-wrapper">
+      <div className={'app-wrapper' + (darkMode ? ' dark-mode' : '')}>
         <header>
           <h1>Lambda Explorer</h1>
         </header>
@@ -122,6 +131,9 @@ class App extends React.Component {
           <a href="https://github.com/evinism/lambda-explorer">Github</a>
           <a href="https://en.wikipedia.org/wiki/Lambda_calculus">Lambda Calculus Wiki</a>
           <a href="https://github.com/evinism/lambda-explorer/issues">Something not right?</a>
+          <a href="javascript:;" onClick={this._toggleDarkLight}>
+            {darkMode ? 'Light Theme' : 'Dark Theme'}
+          </a>
         </footer>
       </div>
     );

From d5de2065fd164427faa0b1523cfb333c36b76fa9 Mon Sep 17 00:00:00 2001
From: Evin Sellin <evinism@gmail.com>
Date: Tue, 8 Jan 2019 01:05:06 -0800
Subject: [PATCH 2/2] reduce header font weight under dark

---
 public/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/style.css b/public/style.css
index ac2074e..dc11f5d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -295,4 +295,8 @@ aside button {
 .dark-mode .secret.secret:hover {
   color: whitesmoke;
   background-color: #333333;
+}
+
+.dark-mode h1 {
+  font-weight: 300;
 }
\ No newline at end of file