Switch to gruvbox theme

layouts/partials/comments.html

@@ -0,0 +1,24 @@
+<script
+  type="text/javascript"
+  src="https://storage.ko-fi.com/cdn/widget/Widget_2.js"
+></script>
+<script type="text/javascript">
+  kofiwidget2.init("Buy me a coffee", "#458588", "F1F2S4LWI");
+  kofiwidget2.draw();
+</script>
+
+{{- $config := .Site.Params.comments -}}
+
+{{- $utterancesEnabled := $config.utterances.enable -}}
+
+{{- if and ( $utterancesEnabled ) -}}
+<section id='comments' class='comments'>
+  <div class='container sep-before'>
+    <div class='comments'>
+    {{- if $utterancesEnabled -}}
+      {{ partial "comments/utterances" . }}
+    {{- end -}}
+    </div>
+  </div>
+</section>
+{{- end -}}

layouts/partials/comments/utterances.html

@@ -0,0 +1,23 @@
+{{- $scriptSrc := "https://utteranc.es/client.js" -}}
+
+{{- $issueTerm := .Page.Site.Params.comments.utterances.issueTerm -}}
+{{- $label := .Page.Site.Params.comments.utterances.label -}}
+{{- $username := .Page.Site.Params.comments.utterances.github.username -}}
+{{- $repository := .Page.Site.Params.comments.utterances.github.repository -}}
+
+<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>