From be42a1df55142beadac40a60427133f9c15f3b55 Mon Sep 17 00:00:00 2001
From: Matthijs Groen <matthijs@kabisa.nl>
Date: Thu, 22 Nov 2018 13:33:14 +0100
Subject: [PATCH 1/3] Start on dark / light theme

---
 src/report-html-template.js | 71 ++++++++++++++++++++++++++++++++-----
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/src/report-html-template.js b/src/report-html-template.js
index 10f3ec3..ea7dcf1 100644
--- a/src/report-html-template.js
+++ b/src/report-html-template.js
@@ -23,6 +23,15 @@ ${body}
 </html>
 `;
 
+const currentDate = () => {
+  const date = new Date();
+  const pad = number => (number < 10 ? "0" + number : number);
+
+  return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
+    date.getUTCDate()
+  )}T${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}`;
+};
+
 const documentContent = ({ title, contents, toc, singleRoot }) =>
   `<header>
     <h1>${title}</h1>
@@ -46,14 +55,32 @@ const documentContent = ({ title, contents, toc, singleRoot }) =>
   <article>
     ${contents}
   </article>
+  <footer>
+    <p>Date: ${currentDate()} - <a href="#theme/dark">Dark</a> - <a href="#theme/light">Light</a></p>
+  </footer>
   </main>
   <script type="text/javascript">
     document.querySelector("header button").addEventListener("click", function() {
       document.getElementsByTagName("html")[0].classList.toggle("menu-open");
     });
+    const htmlTag = document.getElementsByTagName("html")[0];
     document.querySelector("nav").addEventListener("click", function(event) {
       if (event.target.tagName !== "A") return;
-      document.getElementsByTagName("html")[0].classList.remove("menu-open");
+      htmlTag.classList.remove("menu-open");
+    });
+
+    document.querySelector("main footer").addEventListener("click", function(event) {
+      if (event.target.getAttribute("href").startsWith("#theme/")) {
+        event.preventDefault();
+        if (event.target.getAttribute("href") === "#theme/dark") {
+          htmlTag.classList.remove("theme-light");
+          htmlTag.classList.add("theme-dark");
+        }
+        if (event.target.getAttribute("href") === "#theme/light") {
+          htmlTag.classList.remove("theme-dark");
+          htmlTag.classList.add("theme-light");
+        }
+      }
     });
   </script>
 `;
@@ -73,6 +100,19 @@ html {
     --highlightText: hotpink;
     --itemHeadingBackground: #eee;
     --diagramBackground: #f8f8f8;
+    --background: white;
+    --borderColor: #ccc;
+    --textColor: #111;
+}
+
+.theme-dark {
+    --subtleText: #777;
+    --highlightText: hotpink;
+    --itemHeadingBackground: #eee;
+    --diagramBackground: #f8f8f8;
+    --background: #333;
+    --borderColor: lightblue;
+    --textColor: #ddd;
 }
 
 html {
@@ -82,6 +122,9 @@ html {
 html, body {
     margin: 0;
     padding: 0;
+    background: var(--background);
+    overflow-x: hidden;
+    color: var(--textColor);
 }
 
 a {
@@ -97,8 +140,9 @@ a:active, a:focus, a:hover {
 }
 
 header {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--borderColor);
     padding: 1rem;
+    background: var(--background);
 }
 
 header button {
@@ -106,18 +150,18 @@ header button {
 }
 
 main {
-    display: flex;
     overflow: hidden;
     margin-left: 300px;
+    background: var(--background);
 }
 
 nav {
     position: sticky;
     top: 0;
-    height: 100vh;
+    max-height: 100vh;
     padding: 1rem 2rem 1rem 1rem;
     z-index: 5;
-    background: white;
+    background: var(--background);
     width: 300px;
     float: left;
     overflow: auto;
@@ -143,7 +187,12 @@ article {
     width: 100%;
     overflow: hidden;
     padding: 1rem 2rem;
-    border-left: 1px solid #ccc;
+    border-left: 1px solid var(--borderColor);
+}
+
+article + footer {
+    padding: 1rem 2rem;
+    border-left: 1px solid var(--borderColor);
 }
 
 code {
@@ -217,18 +266,20 @@ dfn {
     display: block;
     pointer-events: none;
     opacity: 0;
-    transition: opacity 0.2s;
+    transition: opacity 0.2s, transform 0.2s;
     position: absolute;
     top: 0;
     right: 0;
+    transform: translateX(300px);
     padding-top: 3rem;
-    background: white;
+    background: var(--background);
     box-shadow: 0 0 0 1000000rem rgba(0, 0, 0, 0.35);
   }
 
   .menu-open nav {
     pointer-events: auto;
     opacity: 1;
+    transform: translateX(0px);
   }
 
   nav a {
@@ -240,6 +291,10 @@ dfn {
     border-left: 0;
     padding: 1rem;
   }
+  article + footer {
+    padding: 1rem;
+    border-left: 0;
+  }
 }
 
 /* EBNF text representation styling */

From 116271069626b28598d71ed36f1aad3d6869a001 Mon Sep 17 00:00:00 2001
From: Matthijs Groen <matthijs@kabisa.nl>
Date: Thu, 22 Nov 2018 13:38:24 +0100
Subject: [PATCH 2/3] Remove unneeded backgrounds

---
 src/report-html-template.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/report-html-template.js b/src/report-html-template.js
index ea7dcf1..4ed14f2 100644
--- a/src/report-html-template.js
+++ b/src/report-html-template.js
@@ -142,7 +142,6 @@ a:active, a:focus, a:hover {
 header {
     border-bottom: 1px solid var(--borderColor);
     padding: 1rem;
-    background: var(--background);
 }
 
 header button {
@@ -152,7 +151,6 @@ header button {
 main {
     overflow: hidden;
     margin-left: 300px;
-    background: var(--background);
 }
 
 nav {

From 0884737b8c4c1d315f4cc2b1480e073c4f96d69e Mon Sep 17 00:00:00 2001
From: Matthijs Groen <matthijs@kabisa.nl>
Date: Fri, 23 Nov 2018 23:17:34 +0100
Subject: [PATCH 3/3] Setup dark theme

---
 src/report-html-template.js | 93 +++++++++++++++++++++++++------------
 1 file changed, 63 insertions(+), 30 deletions(-)

diff --git a/src/report-html-template.js b/src/report-html-template.js
index 4ed14f2..65ba309 100644
--- a/src/report-html-template.js
+++ b/src/report-html-template.js
@@ -33,7 +33,20 @@ const currentDate = () => {
 };
 
 const documentContent = ({ title, contents, toc, singleRoot }) =>
-  `<header>
+  `
+  <script type="text/javascript">
+    const htmlTag = document.getElementsByTagName("html")[0];
+    const options = (document.location.search || "")
+      .slice(1)
+      .split("&")
+      .map(kv => kv.split("="))
+      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+    if (options["theme"]) {
+      htmlTag.classList.add("theme-" + options["theme"]);
+    }
+  </script>
+  <header>
     <h1>${title}</h1>
     <button type="button"></button>
   </header>
@@ -56,32 +69,17 @@ const documentContent = ({ title, contents, toc, singleRoot }) =>
     ${contents}
   </article>
   <footer>
-    <p>Date: ${currentDate()} - <a href="#theme/dark">Dark</a> - <a href="#theme/light">Light</a></p>
+    <p>Date: ${currentDate()} - <a href="?theme=dark">Dark</a> - <a href="?theme=light">Light</a></p>
   </footer>
   </main>
   <script type="text/javascript">
     document.querySelector("header button").addEventListener("click", function() {
       document.getElementsByTagName("html")[0].classList.toggle("menu-open");
     });
-    const htmlTag = document.getElementsByTagName("html")[0];
     document.querySelector("nav").addEventListener("click", function(event) {
       if (event.target.tagName !== "A") return;
       htmlTag.classList.remove("menu-open");
     });
-
-    document.querySelector("main footer").addEventListener("click", function(event) {
-      if (event.target.getAttribute("href").startsWith("#theme/")) {
-        event.preventDefault();
-        if (event.target.getAttribute("href") === "#theme/dark") {
-          htmlTag.classList.remove("theme-light");
-          htmlTag.classList.add("theme-dark");
-        }
-        if (event.target.getAttribute("href") === "#theme/light") {
-          htmlTag.classList.remove("theme-dark");
-          htmlTag.classList.add("theme-light");
-        }
-      }
-    });
   </script>
 `;
 
@@ -99,20 +97,48 @@ html {
     --subtleText: #777;
     --highlightText: hotpink;
     --itemHeadingBackground: #eee;
-    --diagramBackground: #f8f8f8;
     --background: white;
     --borderColor: #ccc;
     --textColor: #111;
+
+    --diagramBackground: #f8f8f8;
+    --diagramLines: black;
+    --diagramText: black;
+    --terminalLines: black;
+    --terminalFill: #feffdf;
+    --nonTerminalLines: black;
+    --nonTerminalFill: #feffdf;
+    --specialSequenceLines: black;
+    --specialSequenceFill: #ffe79a;
+
+    --ebnfCodeBackground: #e8e8e8;
+    --ebnfIdentifier: #ef5a5a;
+    --ebnfTerminal: #ffa952;
+    --ebnfBaseColor: #777;
 }
 
 .theme-dark {
     --subtleText: #777;
     --highlightText: hotpink;
-    --itemHeadingBackground: #eee;
-    --diagramBackground: #f8f8f8;
+    --itemHeadingBackground: #444;
     --background: #333;
     --borderColor: lightblue;
     --textColor: #ddd;
+
+    --diagramBackground: #222;
+    --diagramLines: lightblue;
+    --diagramText: #a7d129;
+    --terminalLines: #a7d129;
+    --terminalFill: #3e432e;
+    --nonTerminalLines: #a7d129;
+    --nonTerminalFill: #3e432e;
+    --specialSequenceLines: #a7d129;
+    --specialSequenceFill: #616f39;
+
+    --ebnfCodeBackground: #3e432e;
+    --ebnfIdentifier: lightblue;
+    --ebnfTerminal: #a7d129;
+    --ebnfBaseColor: #ddd;
 }
 
 html {
@@ -123,7 +149,6 @@ html, body {
     margin: 0;
     padding: 0;
     background: var(--background);
-    overflow-x: hidden;
     color: var(--textColor);
 }
 
@@ -191,6 +216,7 @@ article {
 article + footer {
     padding: 1rem 2rem;
     border-left: 1px solid var(--borderColor);
+    background: var(--itemHeadingBackground);
 }
 
 code {
@@ -230,6 +256,10 @@ dfn {
 
 /* Responsiveness */
 @media (max-width: 640px) {
+  body {
+    overflow-x: hidden;
+  }
+
   header {
     padding: 0.5rem 1rem;
     display: flex;
@@ -298,18 +328,18 @@ dfn {
 /* EBNF text representation styling */
 code.ebnf {
   padding: 1em;
-  background: rgb(255, 246, 209);
+  background: var(--ebnfCodeBackground);
   font-weight: bold;
-  color: #777;
+  color: var(--ebnfBaseColor);
   white-space: pre-wrap;
   display: inline-block;
   width: 100%;
 }
 .ebnf-identifier {
-  color: #990099;
+  color: var(--ebnfIdentifier);
 }
 .ebnf-terminal {
-  color: #009900;
+  color: var(--ebnfTerminal);
 }
 .ebnf-non-terminal {
   font-weight: normal;
@@ -326,12 +356,13 @@ svg.railroad-diagram {
 }
 svg.railroad-diagram path {
   stroke-width: 3;
-  stroke: black;
+  stroke: var(--diagramLines);
   fill: rgba(0,0,0,0);
 }
 svg.railroad-diagram text {
   font: bold 14px monospace;
   text-anchor: middle;
+  fill: var(--diagramText);
 }
 svg.railroad-diagram text.diagram-text {
   font-size: 12px;
@@ -349,20 +380,22 @@ svg.railroad-diagram g.non-terminal text {
   /*font-style: italic;*/
 }
 svg.railroad-diagram g.special-sequence rect {
-  fill: #FFDB4D;
+  fill: var(--specialSequenceFill);
+  stroke: var(--specialSequenceLines);
 }
 svg.railroad-diagram g.special-sequence text {
   font-style: italic;
 }
 svg.railroad-diagram rect {
   stroke-width: 3;
-  stroke: black;
 }
 svg.railroad-diagram g.non-terminal rect {
-  fill: hsl(120,100%,90%);
+  fill: var(--nonTerminalFill);
+  stroke: var(--nonTerminalLines);
 }
 svg.railroad-diagram g.terminal rect {
-  fill: hsl(120,100%,90%);
+  fill: var(--terminalFill);
+  stroke: var(--terminalLines);
 }
 svg.railroad-diagram path.diagram-text {
   stroke-width: 3;