Added runtime darkmode to remark42

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 (!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>