From a8038d0566d96e9f15c5c1b21ac953bcbbc7bb95 Mon Sep 17 00:00:00 2001
From: Ramsay Leung <ramsayleung@gmail.com>
Date: Wed, 4 Dec 2024 11:45:15 +0800
Subject: [PATCH] Make dark/light mode change with website theme.

---
 layouts/partials/comments.html  | 57 +++++++++++++++++++++++++++++----
 layouts/shortcodes/heatmap.html |  3 +-
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
index a629dedc..003fbec8 100644
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@@ -1,7 +1,52 @@
-<script src="https://utteranc.es/client.js"
-        repo="ramsayleung/comment"
-        issue-term="title"
-        theme="github-light"
-        crossorigin="anonymous"
-        async>
+<section>
+  <h2>Comments</h2>
+  <div id="comments-utteranc"></div>
+</section>
+
+<script type="text/javascript">
+
+function getCurrentTheme() {
+  return document.documentElement.getAttribute('data-theme') || document.body.classList.contains('dark') ? 'dark' : 'light';
+}
+
+function loadUtterances(darkMode=false) {
+  const giscusContainer = document.getElementById("comments-utteranc");
+  if (giscusContainer !== null) {
+    giscusContainer.innerHTML = ''
+    const giscusScript = document.createElement("script");
+    giscusScript.setAttribute("id", "utteranc");
+    giscusScript.setAttribute("src", "https://utteranc.es/client.js");
+    giscusScript.setAttribute("data-repo", "ramsayleung/comment");
+    giscusScript.setAttribute("data-category", "Announcements");
+    giscusScript.setAttribute("data-mapping", "pathname");
+    giscusScript.setAttribute("data-reactions-enabled", "1");
+    giscusScript.setAttribute("data-emit-metadata", "0");
+    giscusScript.setAttribute("data-theme", darkMode ? "github-dark" : "github-light");
+    giscusScript.setAttribute("data-issue-term", "title");
+    giscusScript.setAttribute("crossorigin", "anonymous");
+    giscusScript.setAttribute("async", "true");
+    giscusContainer.appendChild(giscusScript);
+  }
+}
+
+const isDarkMode = getCurrentTheme() === 'dark';
+loadUtterances(isDarkMode);
+
+// Watch for theme changes
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const isDarkMode = getCurrentTheme() === 'dark';
+          loadUtterances(isDarkMode);
+          console.log(`changing theme`);
+        }
+    });
+});
+
+// Start observing the body element for class changes
+observer.observe(document.body, { 
+    attributes: true, 
+    attributeFilter: ['class'] 
+});
+
 </script>
diff --git a/layouts/shortcodes/heatmap.html b/layouts/shortcodes/heatmap.html
index 82dd9715..f9d09a19 100644
--- a/layouts/shortcodes/heatmap.html
+++ b/layouts/shortcodes/heatmap.html
@@ -64,9 +64,8 @@
     <script type="text/javascript">
         var myChart;
 
-        // Function to get current theme
         function getCurrentTheme() {
-            return document.body.classList.contains('dark') ? 'dark' : 'light';
+          return document.documentElement.getAttribute('data-theme') || document.body.classList.contains('dark') ? 'dark' : 'light';
         }
 
         function getThemeColors() {