From fb6c9780f69b3c2b3414620f5425f82ff3cca3b9 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Sat, 29 Apr 2023 15:26:12 +0200
Subject: [PATCH] dynamically change theme

---
 static/js/libs/hljs.js        | 38 +++++++++++++++++++++++++----------
 templates/libs/hljs_head.html |  2 --
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/static/js/libs/hljs.js b/static/js/libs/hljs.js
index e78c7bf..08b8004 100644
--- a/static/js/libs/hljs.js
+++ b/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));
 });
diff --git a/templates/libs/hljs_head.html b/templates/libs/hljs_head.html
index 11a79c1..6dfd659 100644
--- a/templates/libs/hljs_head.html
+++ b/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"