Ensure utterances theme's is toggled when site theme is toggled

themes/archie/layouts/partials/comments.html

@@ -5,7 +5,7 @@
 {{- if and ( $utterancesEnabled ) ( not .Params.disable_comments) -}}
 <section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'>
+    <div class='comments'>
     {{- if $utterancesEnabled -}}
       {{ partial "comments/utterances" . }}
     {{- end -}}

themes/archie/layouts/partials/comments/utterances.html

@@ -2,18 +2,22 @@
 
 {{- $issueTerm := .Page.Site.Params.comments.utterances.issueTerm -}}
 {{- $label := .Page.Site.Params.comments.utterances.label -}}
-{{- $theme := .Page.Site.Params.comments.utterances.theme -}}
 {{- $username := .Page.Site.Params.comments.utterances.github.username -}}
 {{- $repository := .Page.Site.Params.comments.utterances.github.repository -}}
 
-<script src='{{ $scriptSrc }}'
-  repo='{{ print $username "/" $repository }}'
-  issue-term='{{ $issueTerm }}'
-  {{ if $label -}}
-    label='{{ $label }}'
-  {{- end }}
-  {{ if $theme -}}
-    theme='{{ $theme }}'
-  {{- end }}
-  crossorigin='anonymous' async>
+<script>
+    // load utteranc comment
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', '{{ print $username "/" $repository }}');
+    s.setAttribute('issue-term', '{{ $issueTerm }}');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>

themes/archie/static/js/themetoggle.js

@@ -3,14 +3,27 @@ function setTheme(mode) {
     if (mode === "dark") {
         document.getElementById("darkModeStyle").disabled=false;
         document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"sun\"></i>";
-        feather.replace()
+        feather.replace();
+        setUtterancesTheme("github-dark");
     } else if (mode === "light") {
         document.getElementById("darkModeStyle").disabled=true;
         document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"moon\"></i>";
-        feather.replace()
+        feather.replace();
+        setUtterancesTheme("github-light");
     }
 }
 
+function setUtterancesTheme (theme) {
+    if (document.querySelector('.utterances-frame')) {
+      const message = {
+        type: 'set-theme',
+        theme: theme
+      };
+      const iframe = document.querySelector('.utterances-frame');
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+  }
+
 function toggleTheme() {
     if (localStorage.getItem("theme-storage") === "light") {
         setTheme("dark");