dynamically switch between utteranc.es's light/dark themes (#118)

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;
 };