dynamic change utterances theme with coder theme (#676)

* dynamic change utterances theme with coder theme

* add myself into CONTRIBUTORS.md

3 files changed, 63 insertions, 8 deletions

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index f1249f5..badb8df 100644
--- a/CONTRIBUTORS.md
+++ b/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)
diff --git a/assets/js/coder.js b/assets/js/coder.js
index 6daa1ef..0c12436 100644
--- a/assets/js/coder.js
+++ b/assets/js/coder.js
@@ -34,6 +34,48 @@ function setTheme(theme) {
     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) {
diff --git a/layouts/partials/posts/utterances.html b/layouts/partials/posts/utterances.html
index c6675de..f929cbd 100644
--- a/layouts/partials/posts/utterances.html
+++ b/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>
-  </script>
+  <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 -}}