force dark theme with query param

templates/webheader.tmpl

@@ -11,3 +11,30 @@
     <meta name="msapplication-TileColor" content="#00a300">
     <meta name="theme-color" content="#ffffff">
     <!-- Rocket favicon by Adrien Coquet from the Noun Project -->
+    <!-- I'm sorry you have to see JavaScript on this site, but it's here to
+         enable a manual dark mode toggle. When dark mode support improves I
+         can probably remove this again. -->
+    <script type="text/javascript">
+    var params = new URLSearchParams(window.location.search)
+    var dark = params.get('dark')
+
+    function setDark(val) {
+      if (val) {
+        document.body.classList.add('dark')
+        if (typeof Array.from === 'function') {
+          Array.from(document.querySelectorAll('a')).map( el => {
+            var url = el.href
+            el.href = url + (url.indexOf('?') !== -1 ? "&" : "?") + 'dark=1';
+          })
+        }
+      } else {
+        document.body.classList.remove('dark')
+      }
+    }
+
+    window.addEventListener('DOMContentLoaded', function() {
+      if (dark) {
+        setDark(true)
+      }
+    })
+    </script>

templates/webstyles.tmpl

@@ -1,10 +1,16 @@
 <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
 <style>
 
-  body,
   html {
-    color: rgb(50, 200, 100);
-    background-color: #010;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    color: #333;
+    background-color: white;
+    background-image: url('/paper.png');
+    background-repeat: repeat;
   }
 
   a,
@@ -12,6 +18,10 @@
   a:hover,
   a:active {
     color: rgb(62, 231, 123);
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: underline;
   }
 
   .dim {
@@ -19,10 +29,10 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    body,
-    html {
+    body {
       color: rgb(50, 200, 100);
       background-color: #010;
+      background-image: none;
     }
 
     a,
@@ -38,8 +48,7 @@
   }
 
   @media (prefers-color-scheme: light) {
-    body,
-    html {
+    body {
       color: #333;
       background-color: white;
       background-image: url('/paper.png');
@@ -52,7 +61,6 @@
     a:active {
       color: #333;
       font-weight: bold;
-      text-decoration: none;
     }
 
     .dim {
@@ -60,6 +68,22 @@
     }
   }
 
+  /* Manually toggled dark class on body */
+  body.dark {
+    color: rgb(50, 200, 100);
+    background-color: #010;
+    background-image: none;
+  }
+  .dark a,
+  .dark a:visited,
+  .dark a:hover,
+  .dark a:active {
+    color: rgb(62, 231, 123);
+  }
+  .dark .dim {
+    color: rgb(62, 231, 123, 0.5);
+  }
+
   .page-wrapper {
     text-align: center;
   }