Make Giscus light and dark themes configurable via _config.yml (alshedivat#3270)

Currently, the `site.giscus.theme` option is ignored because
`giscus.liquid` always computes the theme as light/dark based on the
current site theme. This PR allows users to configure separate light and
dark giscus themes in `_config.yml`, which will support dynamic updates
when switching between light, dark, or system themes.

Fixes alshedivat#3269

Author: neuroconvergent

_config.yml

@@ -110,7 +110,8 @@ giscus:
   strict: 1 # use strict identification mode
   reactions_enabled: 1 # enable (1) or disable (0) emoji reactions
   input_position: bottom # whether to display input form below (bottom) or above (top) the comments
-  theme: preferred_color_scheme # name of the color scheme (preferred works well with al-folio light/dark mode)
+  dark_theme: dark # name of the dark color scheme (preferred works well with al-folio dark mode)
+  light_theme: light # name of the light color scheme (preferred works well with al-folio light mode)
   emit_metadata: 0
   lang: en
 

_includes/giscus.liquid

@@ -9,33 +9,17 @@
   {% endif %}
 
   {% if site.giscus.repo %}
-    <script>
-      let giscusTheme = determineComputedTheme();
-      let giscusAttributes = {
-        src: 'https://giscus.app/client.js',
-        'data-repo': '{{ site.giscus.repo }}',
-        'data-repo-id': '{{ site.giscus.repo_id }}',
-        'data-category': '{{ site.giscus.category }}',
-        'data-category-id': '{{ site.giscus.category_id }}',
-        'data-mapping': '{{ site.giscus.mapping }}',
-        'data-strict': '{{ site.giscus.strict }}',
-        'data-reactions-enabled': '{{ site.giscus.reactions_enabled }}',
-        'data-emit-metadata': '{{ site.giscus.emit_metadata }}',
-        'data-input-position': '{{ site.giscus.input_position }}',
-        'data-theme': giscusTheme,
-        'data-lang': '{{ site.giscus.lang }}',
-        crossorigin: 'anonymous',
-        async: '',
-      };
-
-      let giscusScript = document.createElement('script');
-      Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
-      document.getElementById('giscus_thread').appendChild(giscusScript);
-    </script>
-    <noscript>Please enable JavaScript to view the <a href="http://giscus.app/?ref_noscript">comments powered by giscus.</a></noscript>
+    <script defer src="{{ '/assets/js/giscus-setup.js' | relative_url }}"></script>
+    <noscript>
+      Please enable JavaScript to view the
+      <a href="http://giscus.app/?ref_noscript">comments powered by giscus.</a>
+    </noscript>
   {% else %}
-    {% capture giscus_warning %} > ##### giscus comments misconfigured > Please follow instructions at
-  [http://giscus.app](http://giscus.app) and update your giscus configuration. {: .block-danger } {% endcapture %}
+    {% capture giscus_warning %}
+> ##### giscus comments misconfigured
+> Please follow instructions at [http://giscus.app](http://giscus.app) and update your giscus configuration.
+{: .block-danger }
+    {% endcapture %}
     {{ giscus_warning | markdownify }}
   {% endif %}
 </div>

_scripts/giscus-setup.js

@@ -0,0 +1,48 @@
+---
+permalink: /assets/js/giscus-setup.js
+---
+
+function determineGiscusTheme() {
+  {% if site.enable_darkmode %}
+    let theme =
+      localStorage.getItem("theme") ||
+      document.documentElement.getAttribute("data-theme") ||
+      "system";
+
+    if (theme === "dark") return "{{ site.giscus.dark_theme }}";
+    if (theme === "light") return "{{ site.giscus.light_theme }}";
+
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return prefersDark ? "{{ site.giscus.dark_theme }}" : "{{ site.giscus.light_theme }}";
+  {% else %}
+    return "{{ site.giscus.light_theme }}";
+  {% endif %}
+}
+
+(function setupGiscus() {
+  let giscusTheme = determineGiscusTheme();
+
+  let giscusAttributes = {
+    src: "https://giscus.app/client.js",
+    "data-repo": "{{ site.giscus.repo }}",
+    "data-repo-id": "{{ site.giscus.repo_id }}",
+    "data-category": "{{ site.giscus.category }}",
+    "data-category-id": "{{ site.giscus.category_id }}",
+    "data-mapping": "{{ site.giscus.mapping }}",
+    "data-strict": "{{ site.giscus.strict }}",
+    "data-reactions-enabled": "{{ site.giscus.reactions_enabled }}",
+    "data-emit-metadata": "{{ site.giscus.emit_metadata }}",
+    "data-input-position": "{{ site.giscus.input_position }}",
+    "data-theme": giscusTheme,
+    "data-lang": "{{ site.giscus.lang }}",
+    crossorigin: "anonymous",
+    async: true,
+  };
+
+  let giscusScript = document.createElement("script");
+  Object.entries(giscusAttributes).forEach(([key, value]) =>
+    giscusScript.setAttribute(key, value)
+  );
+  document.getElementById("giscus_thread").appendChild(giscusScript);
+})();
+