how to make Utteranc.es theme follow archie's?

[anthonyhan]

hello, I am a total beginer in web dev. I want to add comment system named "Utteranc.es" in archie. But I got some problems.

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-dark"
        crossorigin="anonymous"
        async>
</script>

my plan is, the theme of utterances follows archie's dark/light mode.
I tried the way like theme="github-{{mode}}" but failed.
But I can not find a way to do it. Any suggestions would be very appreciated!

[mansoorbarri]

I have been using another theme on my website called hugo-stack. that used a variable to store the value of the theme i.e. light/dark and use that value in theme="github-. the full file looks something like this:

<script src="https://utteranc.es/client.js" 
        repo="{{ .Site.Params.comments.utterances.repo }}"
        issue-term="{{ .Site.Params.comments.utterances.issueTerm }}"
        {{ with .Site.Params.comments.utterances.label }}
        label="{{ . }}"
        {{ end }}
        crossorigin="anonymous"
        async
        >
</script>

<style>
    .utterances {
        max-width: unset;
    }
</style>

<script>
    let utterancesLoaded = false;

    function setUtterancesTheme(theme) {
        let utterances = document.querySelector('.utterances iframe');
        if (utterances) {
            utterances.contentWindow.postMessage(
                {
                    type: 'set-theme',
                    theme: `github-${theme}`
                },
                'https://utteranc.es'
            );
        }
    }

    addEventListener('message', event => {
        if (event.origin !== 'https://utteranc.es') return;

        /// Called when Utterances is ready
        utterancesLoaded = true;
        setUtterancesTheme(document.documentElement.dataset.scheme)
    });

    window.addEventListener('onColorSchemeChange', (e) => {
        if (!utterancesLoaded) return;
        setUtterancesTheme(e.detail)
    })
</script>