hugo-theme-stack/layouts/partials/comments/provider/giscus.html

{{- with .Site.Params.comments.giscus -}}
<script
    src="https://giscus.app/client.js"
    data-repo="{{- .repo -}}"
    data-repo-id="{{- .repoID -}}"
    data-category="{{- .category -}}"
    data-category-id="{{- .categoryID -}}"
    data-mapping="{{- default "title" .mapping -}}"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-theme="{{- default "light" .lightTheme -}}"
    crossorigin="anonymous"
    async
></script>
<script>
    const light = '{{- default "light" .lightTheme -}}';
    const dark = '{{- default "dark_dimmed" .darkTheme -}}';
    const head = document.getElementsByTagName("html")[0];

    function setGiscusTheme(theme) {
        let giscus = document.querySelector('iframe.giscus-frame');
        if (giscus) {
            giscus.contentWindow.postMessage(
                { giscus: { setConfig: { theme: theme } } },
                "https://giscus.app"
            );
        }
    }

    addEventListener('message', event => {
        if (event.origin !== 'https://giscus.app') return;
        if (head.getAttribute("data-scheme") == "dark") {
            setGiscusTheme(dark);
        }
    })
    window.addEventListener('onColorSchemeChange', event => {
        if (head.getAttribute("data-scheme") == "light") {
            setGiscusTheme(light);
        } else {
            setGiscusTheme(dark);
        }
    })

</script>
{{- end -}}