add dark/light theme for mermaid and hljs

static/js/libs/hljs.js

@@ -1,4 +1,8 @@
 window.addEventListener("load", () => {
+  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark" // dark
+    : "default"; // light
+
   hljs.configure({
     noHighlightRe: /^$/i,
     languageDetectRe: /\blanguage-hljs-([\w-]+)\b/i,
@@ -16,4 +20,14 @@ window.addEventListener("load", () => {
   hljs.highlightAll();
 
   hljs.initLineNumbersOnLoad();
+
+  document
+    .getElementById(
+      `hljs-${
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light"
+      }-theme`
+    )
+    .removeAttribute("disabled");
 });

static/js/libs/mermaid.js

@@ -1,7 +1,12 @@
 import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
 
 window.addEventListener("load", async () => {
-  mermaid.initialize({ startOnLoad: false });
+  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark" // dark
+    : "default"; // light
+
+  mermaid.initialize({ startOnLoad: false, theme: theme });
+
   await mermaid.run({
     querySelector: ".language-mermaid",
   });

templates/libs/hljs_head.html

@@ -1,6 +1,14 @@
 <link
+  id="hljs-light-theme"
   rel="stylesheet"
-  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
+  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/solarized-light.min.css"
+  disabled="disabled"
+/>
+<link
+  id="hljs-dark-theme"
+  rel="stylesheet"
+  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/dracula.min.css"
+  disabled="disabled"
 />
 <link
   rel="stylesheet"