*actually* fix utteranc.es dark/light theme-ing

assets/js/dark-mode.js

@@ -9,23 +9,43 @@ toggle.style.visibility = 'visible';
 // check for preset `dark_mode_pref` in localStorage
 let pref = localStorage.getItem('dark_mode_pref');
 
-// keep track of current state, light by default
+// 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);
+let utterancesInit = false;
+const setUtterances = function() {
+  let theme = activated ? 'github-dark' : 'github-light';
+  const container = document.querySelector('div#comments');
 
-  // 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');
+  // don't do any of this if we're not on a page with comments enabled
+  if (container) {
+    if (!utterancesInit) {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.async = true;
+      script.defer = true;
+      script.src = 'https://utteranc.es/client.js';
+      script.crossorigin = true;
+      script.setAttribute('data-repo', '{{ .Site.Params.github | safeJS }}');
+      script.setAttribute('data-issue-term', 'og:title');
+      script.setAttribute('data-theme', theme);
+      script.setAttribute('data-label', 'comments');
+      container.appendChild(script);
+
+      utterancesInit = true;
+    } else {
+      const frame = document.querySelector('.utterances-frame');
+
+      // be extra sure frame exists
+      if (frame) {
+        // https://github.com/utterance/utterances/blob/4d9823c6c4f9a58365f06e2aa76c51b8cf5d5478/src/configuration-component.ts#L160
+        frame.contentWindow.postMessage({
+          type: 'set-theme',
+          theme: theme
+        }, '*');
+      }
+    }
   }
 };
 
@@ -33,29 +53,32 @@ const activateDarkMode = function() {
   document.body.classList.remove('light');
   document.body.classList.add('dark');
 
-  setUtterances('github-dark');
-
   activated = true;
+
+  setUtterances();
 };
 
 const activateLightMode = function() {
   document.body.classList.remove('dark');
   document.body.classList.add('light');
 
-  setUtterances('github-light');
-
   activated = false;
+
+  setUtterances();
 };
 
-// if user already explicitly enabled dark mode in the past, turn it back on.
-// light is default, so no need to do anything otherwise.
+// if user already explicitly toggled in the past, restore their preference.
 if (pref === 'true') activateDarkMode();
+if (pref === 'false') activateLightMode();
 
 // user has never clicked the button, so go by their OS preference until/if they do so
 if (!pref) {
   // check for OS dark mode setting and switch accordingly
   // https://gist.github.com/Gioni06/eb5b28343bcf5793a70f6703004cf333#file-darkmode-js-L47
-  if (window.matchMedia('(prefers-color-scheme: dark)').matches) activateDarkMode();
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches)
+    activateDarkMode();
+  else
+    activateLightMode();
 
   // real-time switching if supported by OS/browser
   // TODO: stop listening when the parent condition becomes false,
@@ -74,4 +97,4 @@ toggle.addEventListener('click', function() {
     activateLightMode();
     localStorage.setItem('dark_mode_pref', 'false');
   }
-});
+}, true);