fix(giscus): theme and language (#783)

* fix(giscuss): system theme

* fix(giscuss): language

* fix(giscuss): theme switching

* chore: remove confusing comment

* fix(giscuss): use a uniq ID

* chore: remove useless function

* chore: use extra language code

* chore: add comment about hash

* Update layouts/_partials/components/giscus.html

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>

layouts/_partials/components/giscus.html

@@ -1,40 +1,47 @@
-{{- $lang := site.Language.LanguageCode | default `en` -}}
+{{- $lang := site.Language.Lang | default `en` -}}
+{{- if hasPrefix $lang "zh" -}}
+  {{- /* See: https://github.com/giscus/giscus/tree/main/locales */}}
+  {{- $lang = site.Language.LanguageCode | default `zh-CN` -}}
+{{- end -}}
 
 {{- with site.Params.comments.giscus -}}
 <script>
-  /*
-   * "preferred color scheme" theme in giscus works using "prefers-color-scheme" in media query.
-   * but, hugo's theme switch function works by using "color-theme" in local storage.
-   * This solution was created with reference to:
-   * https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
-  */
-  function getHugoTheme() {
-    return localStorage.getItem("color-theme");
-  }
-  
   function getGiscusTheme() {
-    let giscusTheme = "{{ (string .theme) | default `light` }}";
-    let hugoTheme = getHugoTheme();
-    if(hugoTheme == 'light') {
-      return giscusTheme.replace('dark', 'light');
+    const giscusTheme = '{{ .theme }}';
+    if (giscusTheme === 'light' || giscusTheme === 'dark') {
+      return giscusTheme;
     }
-    if(hugoTheme == 'dark') {
-      return giscusTheme.replace('light', 'dark');
+
+    const hugoTheme = localStorage.getItem("color-theme");
+    if (hugoTheme === 'light' || hugoTheme === 'dark') {
+      return hugoTheme;
     }
-    return giscusTheme;
+
+    if (hugoTheme === 'system') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    const defaultTheme = '{{ site.Params.theme.default }}';
+    if (defaultTheme === 'light' || defaultTheme === 'dark') {
+      return defaultTheme;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
 
   function setGiscusTheme() {
-    function sendMessage(message) {
-      const iframe = document.querySelector('iframe.giscus-frame');
-      if (!iframe) return;
-      iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
-    }
-    sendMessage({
-      setConfig: {
-        theme: getGiscusTheme(),
+    const iframe = document.querySelector('iframe.giscus-frame');
+    if (!iframe) return;
+
+    const msg = {
+      giscus: {
+        setConfig: {
+          theme: getGiscusTheme(),
+        },
       },
-    });
+    }
+
+    iframe.contentWindow.postMessage(msg, 'https://giscus.app');
   }
 
   document.addEventListener('DOMContentLoaded', function () {
@@ -58,17 +65,21 @@
     // Dynamically create script tag
     const giscusScript = document.createElement("script");
     Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
-    document.getElementById('giscus').appendChild(giscusScript);
+    // Random hash id to avoid conflicts with titles inside pages.
+    document.getElementById('giscus-hextra-bb112b9f807c37c1752e5da6a1652a29').appendChild(giscusScript);
+
+    // Listen for system theme changes
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", setGiscusTheme);
 
     // Update giscus theme when theme switcher is clicked
-    const toggles = document.querySelectorAll(".hextra-theme-toggle");
-    if (toggles) {
-      toggles.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
+    const themeToggleOptions = document.querySelectorAll(".hextra-theme-toggle-options p");
+    if (themeToggleOptions) {
+      themeToggleOptions.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
     }
   });
 </script>
 
-<div id="giscus"></div>
+<div id="giscus-hextra-bb112b9f807c37c1752e5da6a1652a29"></div>
 {{- else -}}
   {{ warnf "giscus is not configured" }}
 {{- end -}}