Add hugo-coder theme

public/js/coder.js

@@ -0,0 +1,97 @@
+const body = document.body;
+const darkModeToggle = document.getElementById('dark-mode-toggle');
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+// Check if user preference is set, if not check value of body class for light or dark else it means that colorscheme = auto
+if (localStorage.getItem("colorscheme")) {
+    setTheme(localStorage.getItem("colorscheme"));
+} else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
+    setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
+} else {
+    setTheme(darkModeMediaQuery.matches ? "dark" : "light");
+}
+
+if (darkModeToggle) {
+    darkModeToggle.addEventListener('click', () => {
+        let theme = body.classList.contains("colorscheme-dark") ? "light" : "dark";
+        setTheme(theme);
+        rememberTheme(theme);
+    });
+}
+
+darkModeMediaQuery.addListener((event) => {
+    setTheme(event.matches ? "dark" : "light");
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    let node = document.querySelector('.preload-transitions');
+    node.classList.remove('preload-transitions');
+});
+
+function setTheme(theme) {
+    body.classList.remove('colorscheme-auto');
+    let inverse = theme === 'dark' ? 'light' : 'dark';
+    body.classList.remove('colorscheme-' + inverse);
+    body.classList.add('colorscheme-' + theme);
+    document.documentElement.style['color-scheme'] = theme;
+
+    function waitForElm(selector) {
+        return new Promise(resolve => {
+            if (document.querySelector(selector)) {
+                return resolve(document.querySelector(selector));
+            }
+    
+            const observer = new MutationObserver(mutations => {
+                if (document.querySelector(selector)) {
+                    resolve(document.querySelector(selector));
+                    observer.disconnect();
+                }
+            });
+
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        });
+    }
+
+    if (theme === 'dark') {
+        const message = {
+            type: 'set-theme',
+            theme: 'github-dark'
+        };
+        waitForElm('.utterances-frame').then((iframe) => {
+            iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+        })
+        
+    }
+    else {
+        const message = {
+            type: 'set-theme',
+            theme: 'github-light'
+        };
+        waitForElm('.utterances-frame').then((iframe) => {
+            iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+        })
+        
+    }
+
+    function sendMessage(message) {
+        const iframe = document.querySelector('iframe.giscus-frame');
+        if (!iframe) return;
+        iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+      }
+      sendMessage({
+        setConfig: {
+          theme: theme,
+        },
+      });
+    
+    // Create and send event
+    const event = new Event('themeChanged');
+    document.dispatchEvent(event);
+}
+
+function rememberTheme(theme) {
+    localStorage.setItem('colorscheme', theme);
+}