Update giscus.ejs to fix giscus color on load

Author: kv9898

src/resources/formats/html/giscus/giscus.ejs

@@ -1,17 +1,28 @@
-<script src="https://giscus.app/client.js"
-        data-repo="<%- giscus.repo %>"
-        data-repo-id="<%- giscus['repo-id'] %>"
-        data-category="<%- giscus.category %>"
-        data-category-id="<%- giscus['category-id'] %>"
-        data-mapping="<%- giscus.mapping %>"
-        data-reactions-enabled="<%- giscus['reactions-enabled'] ? 1 : 0 %>"
-        data-emit-metadata="0"
-        data-input-position="<%- giscus['input-position'] %>"
-        data-theme="<%- giscus.theme %>"
-        data-lang="<%- giscus.language %>"
-        crossorigin="anonymous"
-        <%- giscus.loading ? `data-loading=${giscus.loading}` : '' %>
-        async>
-</script>
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
-<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
+<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
+<script>
+setTimeout(() => {
+  var bodyClass = window.document.body.classList;
+  const GetTheme = () => {
+    const baseTheme = document.getElementById('giscus-base-theme').value;
+    const altTheme = document.getElementById('giscus-alt-theme').value;
+    return bodyClass.contains('quarto-dark') ? altTheme : baseTheme;
+  };
+  const script = document.createElement("script");
+      script.src = "https://giscus.app/client.js";
+      script.async = true;
+      script.dataset.repo = "<%- giscus.repo %>";
+      script.dataset.repoId = "<%- giscus['repo-id'] %>";
+      script.dataset.category = "<%- giscus.category %>";
+      script.dataset.categoryId = "<%- giscus['category-id'] %>";
+      script.dataset.mapping = "<%- giscus.mapping %>";
+      script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
+      script.dataset.emitMetadata = "0";
+      script.dataset.inputPosition = "<%- giscus['input-position'] %>";
+      script.dataset.theme = GetTheme();
+      script.dataset.lang = "<%- giscus.language %>";
+      script.crossOrigin = "anonymous";
+  // Insert the Giscus script after the current script
+  document.getElementById("quarto-content").appendChild(script);
+}, 50);
+</script>