feat: use noborder theme for giscus

add scripts sending message to giscus to dynamically change themes for different color schemes

3 files changed, 44 insertions, 2 deletions

diff --git a/hugo.yaml b/hugo.yaml
index b459c002..f8cd2ee0 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -107,7 +107,7 @@ params:
     reactionsEnabled: 0
     emitMetadata: 0
     inputPosition: top
-    theme: preferred_color_scheme
+    theme: noborder_light
 services:
   rss:
     limit: 10
diff --git a/layouts/partials/components/comment.html b/layouts/partials/components/comment.html
index b0b4ed47..cfdfa886 100644
--- a/layouts/partials/components/comment.html
+++ b/layouts/partials/components/comment.html
@@ -29,7 +29,8 @@
     <p style="text-align:center">你也可以加入本站的 <a href="https://t.me/teaparty418" target="_blank">Telegram 群组</a>参与讨论</p>
     {{ end }}
     <!-- giscus script -->
-    <script src="https://giscus.app/client.js"
+    <script id="giscus-script"
+            src="https://giscus.app/client.js"
             data-repo="{{ .Site.Params.giscus.repo }}"
             data-repo-id="{{ .Site.Params.giscus.repoId }}"
             data-category="{{ .Site.Params.giscus.category }}"
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index dbf6aee0..90f99630 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -20,4 +20,45 @@
   littlefoot.littlefoot({
     dismissOnUnhover: true
   });
+
+  /* == auto-switch giscus theme == */
+
+  // Function to send the theme change to the Giscus iframe
+  function changeGiscusTheme() {
+    const theme = document.documentElement.getAttribute('data-theme') === 'noborder_dark' ? 'noborder_dark' : 'noborder_light';
+
+    function sendMessage(message) {
+      const iframe = document.querySelector('iframe.giscus-frame');
+      if (!iframe) return;
+      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+    }
+
+    // Send the theme change to Giscus iframe
+    sendMessage({
+      setConfig: {
+        theme: theme
+      }
+    });
+  }
+
+  // Detect the system's color scheme (light or dark)
+  function updateTheme() {
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    // Update the theme of the page (this affects your custom styles)
+    if (prefersDarkScheme) {
+      document.documentElement.setAttribute('data-theme', 'noborder_dark');
+    } else {
+      document.documentElement.setAttribute('data-theme', 'noborder_light');
+    }
+
+    // Change the Giscus iframe theme accordingly
+    changeGiscusTheme();
+  }
+
+  // Run the theme update function on page load
+  window.addEventListener('load', updateTheme);
+
+  // Re-run when the system theme changes
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', updateTheme);
 </script>