dynamic change utterances theme with coder theme (#676)

Zhan Shuo

29.38.2022 9ea82c5c8247d4dd220e7441be645acc00e8cf29

dynamic change utterances theme with coder theme (#676)

* dynamic change utterances theme with coder theme

* add myself into CONTRIBUTORS.md

 CONTRIBUTORS.md

@@ -108,3 +108,4 @@
- [Xiaoyang Luo](https://github.com/ccviolett/)
- [Michiel Appelman](https://appelman.se)
- [Mark Wood](https://digitalnotions.net)
- [zzsqwq](https://zzsqwq.cn)

 assets/js/coder.js

@@ -34,6 +34,48 @@
    body.classList.remove('colorscheme-' + inverse);
    body.classList.add('colorscheme-' + theme);
    document.documentElement.style['color-scheme'] = theme;

    function waitForElm(selector) {
        return new Promise(resolve => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }
    
            const observer = new MutationObserver(mutations => {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                    observer.disconnect();
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    }

    if (theme === 'dark') {
        const message = {
            type: 'set-theme',
            theme: 'github-dark'
        };
        waitForElm('.utterances-frame').then((iframe) => {
            iframe.contentWindow.postMessage(message, 'https://utteranc.es');
        })
        
    }
    else {
        const message = {
            type: 'set-theme',
            theme: 'github-light'
        };
        waitForElm('.utterances-frame').then((iframe) => {
            iframe.contentWindow.postMessage(message, 'https://utteranc.es');
        })
        
    }
    
}

function rememberTheme(theme) {

 layouts/partials/posts/utterances.html

@@ -1,12 +1,24 @@
{{- if isset .Site.Params "utterances" -}}
  {{- if and (isset .Site.Params.utterances "repo") (not (eq .Site.Params.utterances.repo "" )) (eq (.Params.disableComments | default false) false) -}}
  <script src="https://utteranc.es/client.js"
    repo= "{{ .Site.Params.utterances.repo }}"
    issue-term="{{ default "title" .Site.Params.utterances.issueTerm }}"
    {{ if isset .Site.Params.utterances "label" }}label="{{ .Site.Params.utterances.label }}"{{ end }}
    theme="{{ default "github-light" .Site.Params.utterances.theme }}"
    crossorigin="anonymous"
    async>
  <div class="comments">
    <script>
  
    let getTheme = window.localStorage && window.localStorage.getItem("colorscheme");
  
    getTheme = getTheme == null ? '{{$.Site.Params.utterances.theme}}' : getTheme;
    
    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
    let s = document.createElement('script');
    s.src = 'https://utteranc.es/client.js';
    s.setAttribute('repo', '{{ .Site.Params.utterances.repo }}');
    s.setAttribute('issue-term', '{{ default "title" .Site.Params.utterances.issueTerm }}');
    s.setAttribute('theme', theme);
    s.setAttribute('crossorigin', 'anonymous');
    s.setAttribute('async', '');
    document.querySelector('div.comments').innerHTML = '';
    document.querySelector('div.comments').appendChild(s);
  
  </script>
    </div>
  {{- end -}}
{{- end -}}