<section id="utterances"></section>

<script>
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        let s = document.createElement("script");
        s.setAttribute("repo", "{{ .Site.Params.utterancesRepo }}");
        s.src = "https://utteranc.es/client.js";
        {{ with .Site.Params.utterancesIssueTerm }}
          s.setAttribute("issue-term", "{{ . }}");
        {{ end }}
        {{ with .Site.Params.utterancesDarkTheme }}
          s.setAttribute("theme", "{{ . }}")
        {{ end }}
        document.getElementById("utterances").innerHTML = "";
        document.getElementById("utterances").appendChild(s);
    } else {
        let s = document.createElement("script");
        s.setAttribute("repo", "{{ .Site.Params.utterancesRepo }}");
        s.src = "https://utteranc.es/client.js";
        {{ with .Site.Params.utterancesIssueTerm }}
          s.setAttribute("issue-term", "{{ . }}");
        {{ end }}
        {{ with .Site.Params.utterancesLightTheme }}
          s.setAttribute("theme", "{{ . }}")
        {{ end }}
        document.getElementById("utterances").innerHTML = "";
        document.getElementById("utterances").appendChild(s);
    }
</script>
