From c986676379aaf9a75525723dd84a2f614aa6a693 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Sun, 26 Apr 2020 10:49:45 -0400
Subject: [PATCH] dynamically switch between utteranc.es's light/dark themes
 (#118)

---
 assets/js/dark-mode.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js
index 245cae0a..9d6ea766 100644
--- a/assets/js/dark-mode.js
+++ b/assets/js/dark-mode.js
@@ -12,15 +12,38 @@ let pref = localStorage.getItem('dark_mode_pref');
 // keep track of current state, light by default
 let activated = false;
 
+// dynamically switch utteranc.es's theme
+const setUtterances = function(t) {
+  // if utteranc.es iframe hasn't loaded yet
+  const script = document.querySelector('script[src="https://utteranc.es/client.js"]');
+  if (script) script.setAttribute('data-theme', t);
+
+  // if utteranc.es iframe has already loaded
+  const frame = document.querySelector('iframe.utterances-frame');
+  if (frame) {
+    // https://github.com/utterance/utterances/blob/4d9823c6c4f9a58365f06e2aa76c51b8cf5d5478/src/configuration-component.ts#L160
+    frame.contentWindow.postMessage({
+      type: 'set-theme',
+      theme: t
+    }, 'https://utteranc.es');
+  }
+};
+
 const activateDarkMode = function() {
   document.body.classList.remove('light');
   document.body.classList.add('dark');
+
+  setUtterances('github-dark');
+
   activated = true;
 };
 
 const activateLightMode = function() {
   document.body.classList.remove('dark');
   document.body.classList.add('light');
+
+  setUtterances('github-light');
+
   activated = false;
 };