From 9c53ea922e875608f01298bf7d9923060d216c70 Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Sat, 25 Apr 2026 00:56:06 +0300
Subject: [PATCH] Added runtime darkmode to remark42

---
 src/components/Remark42Embed.astro | 44 ++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/Remark42Embed.astro b/src/components/Remark42Embed.astro
index 7854f7a..81c6cab 100644
--- a/src/components/Remark42Embed.astro
+++ b/src/components/Remark42Embed.astro
@@ -6,7 +6,6 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
 ---
 
 <div id="remark42"></div>
-
 <script define:vars={{ pagePath, host, siteId }} is:inline data-astro-rerun>
     function getTheme() {
         return document.documentElement.classList.contains("dark")
@@ -35,6 +34,7 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
                     resolve(true);
                     return;
                 }
+
                 existing.addEventListener("load", () => resolve(true), {
                     once: true,
                 });
@@ -67,16 +67,42 @@ const siteId = import.meta.env.PUBLIC_REMARK42_SITE_ID;
         setRemarkConfig();
         await ensureScript();
 
-        if (window.REMARK42) {
-            if (typeof window.REMARK42.destroy === "function") {
-                window.REMARK42.destroy();
-            }
-            if (typeof window.REMARK42.createInstance === "function") {
-                node.innerHTML = "";
-                window.REMARK42.createInstance(window.remark_config);
-            }
+        if (!window.REMARK42) return;
+
+        if (typeof window.REMARK42.destroy === "function") {
+            window.REMARK42.destroy();
+        }
+
+        if (typeof window.REMARK42.createInstance === "function") {
+            node.innerHTML = "";
+            window.REMARK42.createInstance(window.remark_config);
         }
     }
 
+    function setupRemark42ThemeObserver() {
+        if (window.__remark42ThemeObserver) {
+            window.__remark42ThemeObserver.disconnect();
+        }
+
+        let lastTheme = getTheme();
+
+        const observer = new MutationObserver(() => {
+            const currentTheme = getTheme();
+
+            if (currentTheme === lastTheme) return;
+
+            lastTheme = currentTheme;
+            mountRemark42();
+        });
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+
+        window.__remark42ThemeObserver = observer;
+    }
+
     mountRemark42();
+    setupRemark42ThemeObserver();
 </script>