Add dark mode.

public/css/main.css

@@ -71,6 +71,14 @@ a.blue {
   color: #007bff !important;
 }
 
+.bottom-right-fixed {
+  position: fixed;
+  bottom: 1em;
+  right: 1em;
+  user-select: none;
+  z-index: 1100;
+}
+
 .glyphicon.spin {
   animation: spin 2s infinite linear;
 }

public/js/main.js

@@ -327,3 +327,53 @@ $(document).ready(async function() {
     }
   }
 });
+
+
+// Dark mode
+
+document.addEventListener("DOMContentLoaded", () => {
+  const checkbox = document.getElementById("dark-mode");
+  checkbox.addEventListener("click", (e) => {
+    if (e.isTrusted) {
+      // user initiated
+      if (e.shiftKey) {
+        localStorage.removeItem("dark-mode");
+        e.target.checked = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        e.target.indeterminate = true;
+      }
+      else {
+        localStorage.setItem("dark-mode", e.target.checked.toString());
+      }
+    }
+
+    if (e.target.checked) {
+      document.body.classList.add("bg-dark");
+      document.body.classList.add("text-light");
+      $(".modal-content").addClass("bg-dark");
+    }
+    else {
+      document.body.classList.remove("bg-dark");
+      document.body.classList.remove("text-light");
+      $(".modal-content").removeClass("bg-dark");
+    }
+
+    const launcher = document.getElementById("img-launcher");
+    if (launcher) {
+      launcher.src = `img/launcher-${e.target.checked ? "dark":"light"}.png`;
+    }
+  });
+
+  const dark_mode = localStorage.getItem("dark-mode");
+  if (dark_mode == "true" || (dark_mode == undefined && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+    checkbox.click();
+  }
+  checkbox.indeterminate = (dark_mode == undefined);
+});
+
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+  const checkbox = document.getElementById("dark-mode");
+  if (checkbox.indeterminate && checkbox.checked != e.matches) {
+    checkbox.click();
+    checkbox.indeterminate = true;
+  }
+});

views/index.erb

@@ -334,5 +334,10 @@
       </div>
     </div>
   </div>
+
+  <div class="form-check bottom-right-fixed" title="Reset with shift-click">
+    <input class="form-check-input" type="checkbox" id="dark-mode" autocomplete="off">
+    <label class="form-check-label" for="dark-mode">Dark mode</label>
+  </div>
 </body>
 </html>