dynamically change theme

static/js/libs/hljs.js

@@ -1,11 +1,12 @@
 window.addEventListener("load", () => {
+  /* Configuration */
   hljs.configure({
     noHighlightRe: /^$/i,
     languageDetectRe: /\blanguage-hljs-([\w-]+)\b/i,
   });
-
   hljs.addPlugin(new CopyButtonPlugin());
 
+  /* Aliases of langs */
   const aliases = {
     bash: ["fish"],
   };
@@ -13,17 +14,32 @@ window.addEventListener("load", () => {
     hljs.registerAliases(aliases[lang], { languageName: lang });
   }
 
+  /* Highlight */
   hljs.highlightAll();
-
   hljs.initLineNumbersOnLoad();
 
-  document
-    .getElementById(
-      `hljs-${
-        window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light"
-      }-theme`
-    )
-    .removeAttribute("disabled");
+  /* Theme */
+  const dark = "dark";
+  const light = "light";
+  const attribute = ["disabled", "disabled"];
+  const updateTheme = (theme) => {
+    {
+      const elementToEnable = document.getElementById(
+        `hljs-${theme.matches ? dark : light}-theme`
+      );
+      const elementToDisable = document.getElementById(
+        `hljs-${theme.matches ? light : dark}-theme`
+      );
+
+      if (elementToEnable.hasAttribute(attribute[0])) {
+        elementToEnable.removeAttribute(attribute[0]);
+      }
+      elementToDisable.setAttribute(...attribute);
+    }
+  };
+
+  const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
+  updateTheme(darkModePreference);
+
+  darkModePreference.addEventListener("change", (theme) => updateTheme(theme));
 });

templates/libs/hljs_head.html

@@ -2,13 +2,11 @@
   id="hljs-light-theme"
   rel="stylesheet"
   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"