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>