Implement theme toggle functionality and update Giscus theme handling

Author: devnomadic

_includes/giscus.html

@@ -11,10 +11,59 @@
     data-reactions-enabled="{{ site.giscus.reactions-enabled }}"
     data-emit-metadata="{{ site.giscus.emit-metadata }}"
     data-input-position="{{ site.giscus.input-position }}"
-    data-theme="preferred_color_scheme"
+    data-theme="dark"
     data-lang="{{ site.giscus.lang }}"
     crossorigin="anonymous"
     async>
   </script>
 </div>
+
+<script>
+// Function to update Giscus theme based on Jekyll theme
+function updateGiscusTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme');
+  const giscusFrame = document.querySelector('iframe.giscus-frame');
+  
+  if (giscusFrame) {
+    const giscusTheme = currentTheme === 'dark' ? 'dark' : 'light';
+    giscusFrame.contentWindow.postMessage({
+      giscus: {
+        setConfig: {
+          theme: giscusTheme
+        }
+      }
+    }, 'https://giscus.app');
+    console.log('Updated Giscus theme to:', giscusTheme);
+  }
+}
+
+// Set initial theme when Giscus loads
+document.addEventListener('DOMContentLoaded', function() {
+  // Wait for Giscus to load, then set initial theme
+  setTimeout(updateGiscusTheme, 1000);
+  
+  // Also try updating theme when iframe loads
+  const checkForGiscus = setInterval(() => {
+    if (document.querySelector('iframe.giscus-frame')) {
+      updateGiscusTheme();
+      clearInterval(checkForGiscus);
+    }
+  }, 500);
+});
+
+// Watch for theme changes on the document element
+const observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+      setTimeout(updateGiscusTheme, 100); // Small delay to ensure theme change is complete
+    }
+  });
+});
+
+// Start observing theme changes
+observer.observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['data-theme']
+});
+</script>
 {% endif %}

_includes/header.html

@@ -10,6 +10,25 @@
         {% endif %}
         {% endfor %}
     </span>
+    
+    <!-- Theme Toggle -->
+    <div class="toggleWrapper">
+        <input type="checkbox" class="dn" id="theme-toggle" onclick="modeSwitcher()" checked />
+        <label for="theme-toggle" class="toggle">
+        <span class="toggle__handler">
+          <span class="crater crater--1"></span>
+          <span class="crater crater--2"></span>
+          <span class="crater crater--3"></span>
+        </span>
+            <span class="star star--1"></span>
+            <span class="star star--2"></span>
+            <span class="star star--3"></span>
+            <span class="star star--4"></span>
+            <span class="star star--5"></span>
+            <span class="star star--6"></span>
+        </label>
+    </div>
+    
     <br style="clear: both;">
     <div style="margin-top: 0.5em; padding-top: 0.75em;">
       <a href="/about/" style="display: inline-block; margin-right: 2em; color: #de5684; text-decoration: none; font-size: 1em;">About</a>
@@ -18,3 +37,51 @@
     </div>
   </div>
 </div>
+
+<script type="text/javascript">
+const theme = localStorage.getItem('theme');
+
+if (theme === "light") {
+    document.documentElement.setAttribute('data-theme', 'light');
+} else {
+    document.documentElement.setAttribute('data-theme', 'dark');
+}
+const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
+
+function activateDarkTheme() {
+    document.getElementById('theme-toggle').checked = true;
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.documentElement.classList.add('theme--dark');
+    document.documentElement.classList.remove('theme--light');
+	document.getElementById("theme-toggle").className = 'light';
+	window.localStorage.setItem('theme', 'dark');
+}
+
+function activateLightTheme() {
+    document.getElementById('theme-toggle').checked = false;
+    document.documentElement.setAttribute('data-theme', 'light');
+    document.documentElement.classList.add('theme--light');
+    document.documentElement.classList.remove('theme--dark');
+	document.getElementById("theme-toggle").className = 'dark';
+	window.localStorage.setItem('theme', 'light');
+}
+
+if (theme === "dark") {
+    activateDarkTheme();
+} else if (theme === "light") {
+    activateLightTheme();
+} else if  (userPrefers === "light") {
+    activateDarkTheme();
+} else {
+    activateDarkTheme();
+}
+
+function modeSwitcher() {
+	let currentMode = document.documentElement.getAttribute('data-theme');
+	if (currentMode === "dark") {
+	    activateLightTheme();
+	} else {
+	    activateDarkTheme();
+	}
+}
+</script>