fix: make Disqus / Utterances follow the global color scheme (#111)

* fix: make Disqus / Utterances follow the global color scheme

* fix: check if DISQUS exists before executing DISQUS.reset

closes https://github.com/CaiJimmy/hugo-theme-stack/issues/107

2 files changed, 26 insertions, 1 deletions

diff --git a/layouts/partials/comments/provider/disqus.html b/layouts/partials/comments/provider/disqus.html
index 74f3460..1f283df 100644
--- a/layouts/partials/comments/provider/disqus.html
+++ b/layouts/partials/comments/provider/disqus.html
@@ -10,3 +10,13 @@
         padding: var(--card-padding);
     }
 </style>
+
+<script>
+    window.addEventListener('onColorSchemeChange', (e) => {
+        if (DISQUS) {
+            DISQUS.reset({
+                reload: true
+            });
+        }
+    })
+</script>
\ No newline at end of file
diff --git a/layouts/partials/comments/provider/utterances.html b/layouts/partials/comments/provider/utterances.html
index 75d63ce..e2ecf6d 100644
--- a/layouts/partials/comments/provider/utterances.html
+++ b/layouts/partials/comments/provider/utterances.html
@@ -13,4 +13,19 @@
     .utterances {
         max-width: unset;
     }
-</style>
\ No newline at end of file
+</style>
+
+<script>
+    window.addEventListener('onColorSchemeChange', (e) => {
+        let utterances = document.querySelector('.utterances iframe');
+        if (utterances) {
+            utterances.contentWindow.postMessage(
+                {
+                    type: 'set-theme',
+                    theme: `github-${e.detail}`
+                },
+                'https://utteranc.es'
+            );
+        }
+    })
+</script>
\ No newline at end of file