Merge pull request #23 from matthijsgroen/theming

Start on dark / light theme

Author: matthijsgroen

src/report-html-template.js

@@ -23,8 +23,30 @@ ${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>
+  `
+  <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>
@@ -46,14 +68,17 @@ 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");
     });
     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");
     });
   </script>
 `;
@@ -72,7 +97,48 @@ html {
     --subtleText: #777;
     --highlightText: hotpink;
     --itemHeadingBackground: #eee;
+    --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: #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 {
@@ -82,6 +148,8 @@ html {
 html, body {
     margin: 0;
     padding: 0;
+    background: var(--background);
+    color: var(--textColor);
 }
 
 a {
@@ -97,7 +165,7 @@ a:active, a:focus, a:hover {
 }
 
 header {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--borderColor);
     padding: 1rem;
 }
 
@@ -106,18 +174,17 @@ header button {
 }
 
 main {
-    display: flex;
     overflow: hidden;
     margin-left: 300px;
 }
 
 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 +210,13 @@ 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);
+    background: var(--itemHeadingBackground);
 }
 
 code {
@@ -183,6 +256,10 @@ dfn {
 
 /* Responsiveness */
 @media (max-width: 640px) {
+  body {
+    overflow-x: hidden;
+  }
+
   header {
     padding: 0.5rem 1rem;
     display: flex;
@@ -217,18 +294,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,23 +319,27 @@ dfn {
     border-left: 0;
     padding: 1rem;
   }
+  article + footer {
+    padding: 1rem;
+    border-left: 0;
+  }
 }
 
 /* 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;
@@ -273,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;
@@ -296,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;