Ensure utterances theme's is toggled when site theme is toggled

config.yaml

@@ -40,7 +40,6 @@ params:
       utterances:
         enable: true
         issueTerm: "pathname"
-        theme: github-light
         github:
           username: davegallant
           repository: davegallant.github.io

public/blog/2020/03/16/appgate-sdp-on-arch-linux/index.html

@@ -206,12 +206,21 @@ Let&rsquo;s try to run it.</p>
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/blog/2021/09/06/what-to-do-with-a-homelab/index.html

@@ -166,12 +166,21 @@ Containers have much less overhead in terms of boot time and storage allocation.
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/blog/2021/09/08/why-i-threw-out-my-dotfiles/index.html

@@ -257,12 +257,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/blog/2021/09/17/automatically-rotating-aws-access-keys/index.html

@@ -126,12 +126,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/blog/2021/10/11/replacing-docker-with-podman-on-macos-and-linux/index.html

@@ -203,12 +203,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/blog/2021/11/14/running-k3s-in-lxc-on-proxmox/index.html

@@ -201,12 +201,21 @@ As of 2021/11, it is still defaulting to the 1.19 channel, so I overrode it to 1
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/blog/2022/03/13/backing-up-gmail-with-synology/index.html

@@ -146,12 +146,21 @@ Encrypting your shared volumes should also be done, since unfortunately <a href=
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/blog/2022/04/02/virtualizing-my-router-with-pfsense/index.html

@@ -166,12 +166,21 @@ When setting up the machine, I mostly went with all of the defaults. Configurati
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/blog/2022/12/10/watching-youtube-in-private/index.html

@@ -184,12 +184,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/categories/index.html

@@ -107,12 +107,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/js/themetoggle.js

@@ -3,14 +3,27 @@ function setTheme(mode) {
     if (mode === "dark") {
         document.getElementById("darkModeStyle").disabled=false;
         document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"sun\"></i>";
-        feather.replace()
+        feather.replace();
+        setUtterancesTheme("github-dark");
     } else if (mode === "light") {
         document.getElementById("darkModeStyle").disabled=true;
         document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"moon\"></i>";
-        feather.replace()
+        feather.replace();
+        setUtterancesTheme("github-light");
     }
 }
 
+function setUtterancesTheme (theme) {
+    if (document.querySelector('.utterances-frame')) {
+      const message = {
+        type: 'set-theme',
+        theme: theme
+      };
+      const iframe = document.querySelector('.utterances-frame');
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+  }
+
 function toggleTheme() {
     if (localStorage.getItem("theme-storage") === "light") {
         setTheme("dark");

public/page/index.html

@@ -98,12 +98,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/page/search/index.html

@@ -110,12 +110,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/post/index.html

@@ -116,12 +116,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/adguard/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/aws-vault/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/aws/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/backup/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/containers/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/degoogle/index.html

@@ -102,12 +102,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/docker/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/dotfiles/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/gmail/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/grafana/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/home-manager/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/homelab/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/index.html

@@ -259,12 +259,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/invidious/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/jellyfin/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/k3s/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/linux/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/lxc/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/netdata/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/nix/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/openwrt/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/pfsense/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/pihole/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/plex/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/podman/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/privacy/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/proxmox/index.html

@@ -102,12 +102,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/python/index.html

@@ -102,12 +102,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/ransomware/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/router-on-a-stick/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/router/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/security/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/synology/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/tailscale/index.html

@@ -102,12 +102,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/virtualization/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/vlan/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/vpn/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/yewtu.be/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

public/tags/youtube/index.html

@@ -100,12 +100,21 @@
 
 		<section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'><script src='https://utteranc.es/client.js'
+    <div class='comments'><script>
-  repo='davegallant/davegallant.github.io'
-  issue-term='pathname'
     
-  theme='github-light'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  crossorigin='anonymous' async>
+    getTheme = getTheme == null ? 'light' : getTheme;
+
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
+    let s = document.createElement('script');
+    s.src = 'https://utteranc.es/client.js';
+    s.setAttribute('repo', 'davegallant\/davegallant.github.io');
+    s.setAttribute('issue-term', 'pathname');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>
 </div>
   </div>

themes/archie/layouts/partials/comments.html

@@ -5,7 +5,7 @@
 {{- if and ( $utterancesEnabled ) ( not .Params.disable_comments) -}}
 <section id='comments' class='comments'>
   <div class='container sep-before'>
-    <div class='comments-area'>
+    <div class='comments'>
     {{- if $utterancesEnabled -}}
       {{ partial "comments/utterances" . }}
     {{- end -}}

themes/archie/layouts/partials/comments/utterances.html

@@ -2,18 +2,22 @@
 
 {{- $issueTerm := .Page.Site.Params.comments.utterances.issueTerm -}}
 {{- $label := .Page.Site.Params.comments.utterances.label -}}
-{{- $theme := .Page.Site.Params.comments.utterances.theme -}}
 {{- $username := .Page.Site.Params.comments.utterances.github.username -}}
 {{- $repository := .Page.Site.Params.comments.utterances.github.repository -}}
 
-<script src='{{ $scriptSrc }}'
+<script>
-  repo='{{ print $username "/" $repository }}'
+    // load utteranc comment
-  issue-term='{{ $issueTerm }}'
+    var getTheme = window.localStorage && window.localStorage.getItem("theme-storage");
-  {{ if $label -}}
+    getTheme = getTheme == null ? 'light' : getTheme;
-    label='{{ $label }}'
+
-  {{- end }}
+    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
-  {{ if $theme -}}
+    let s = document.createElement('script');
-    theme='{{ $theme }}'
+    s.src = 'https://utteranc.es/client.js';
-  {{- end }}
+    s.setAttribute('repo', '{{ print $username "/" $repository }}');
-  crossorigin='anonymous' async>
+    s.setAttribute('issue-term', '{{ $issueTerm }}');
+    s.setAttribute('theme', theme);
+    s.setAttribute('crossorigin', 'anonymous');
+    s.setAttribute('async', '');
+    document.querySelector('div.comments').innerHTML = '';
+    document.querySelector('div.comments').appendChild(s);
 </script>

themes/archie/static/js/themetoggle.js

@@ -3,14 +3,27 @@ function setTheme(mode) {
     if (mode === "dark") {
         document.getElementById("darkModeStyle").disabled=false;
         document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"sun\"></i>";
-        feather.replace()
+        feather.replace();
+        setUtterancesTheme("github-dark");
     } else if (mode === "light") {
         document.getElementById("darkModeStyle").disabled=true;
         document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"moon\"></i>";
-        feather.replace()
+        feather.replace();
+        setUtterancesTheme("github-light");
     }
 }
 
+function setUtterancesTheme (theme) {
+    if (document.querySelector('.utterances-frame')) {
+      const message = {
+        type: 'set-theme',
+        theme: theme
+      };
+      const iframe = document.querySelector('.utterances-frame');
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+  }
+
 function toggleTheme() {
     if (localStorage.getItem("theme-storage") === "light") {
         setTheme("dark");