From 6358ea3db52bc3e0d226e48e51daea184a1d0842 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Thu, 11 Feb 2021 18:43:39 +0100
Subject: [PATCH] fix(utterances): set color scheme on load

Remove utterances.theme option from config.yaml
---
 exampleSite/config.yaml                          |  1 -
 .../partials/comments/provider/utterances.html   | 16 ++++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index fb89f51..515c97c 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -50,7 +50,6 @@ params:
             repo:
             issueTerm: pathname
             label:
-            theme: preferred-color-scheme
 
     widgets:
         enabled:
diff --git a/layouts/partials/comments/provider/utterances.html b/layouts/partials/comments/provider/utterances.html
index e2ecf6d..f8669dd 100644
--- a/layouts/partials/comments/provider/utterances.html
+++ b/layouts/partials/comments/provider/utterances.html
@@ -1,12 +1,11 @@
 <script src="https://utteranc.es/client.js" 
         repo="{{ .Site.Params.comments.utterances.repo }}"
         issue-term="{{ .Site.Params.comments.utterances.issueTerm }}"
-        theme="{{ .Site.Params.comments.utterances.theme }}" 
         {{ with .Site.Params.comments.utterances.label }}
         label="{{ . }}"
         {{ end }}
         crossorigin="anonymous" 
-        async>
+        >
 </script>
 
 <style>
@@ -16,16 +15,25 @@
 </style>
 
 <script>
-    window.addEventListener('onColorSchemeChange', (e) => {
+    function setUtterancesTheme(theme) {
         let utterances = document.querySelector('.utterances iframe');
         if (utterances) {
             utterances.contentWindow.postMessage(
                 {
                     type: 'set-theme',
-                    theme: `github-${e.detail}`
+                    theme: `github-${theme}`
                 },
                 'https://utteranc.es'
             );
         }
+    }
+
+    addEventListener('message', event => {
+        if (event.origin !== 'https://utteranc.es') return;
+        setUtterancesTheme(document.body.dataset.scheme)
+    });
+
+    window.addEventListener('onColorSchemeChange', (e) => {
+        setUtterancesTheme(e.detail)
     })
 </script>
\ No newline at end of file