update darkmode

src/components/remark42-embed.svelte

@@ -5,6 +5,16 @@
 
   let pagePath = `/posts/${slug}/`;
 
+  function getTheme() {
+    return localStorage.getItem("color-theme") === "dark" ? "dark" : "light";
+  }
+
+  function syncRemark42Theme() {
+    if (window.REMARK42?.changeTheme) {
+      window.REMARK42.changeTheme(getTheme());
+    }
+  }
+
   onMount(() => {
     const scriptId = "remark42-script";
 
@@ -13,13 +23,12 @@
       site_id: "cloverta-blog",
       components: ["embed"],
       show_rss_subscription: false,
-      theme: localStorage.getItem("color-theme") ?? "light",
+      theme: getTheme(),
       url: pagePath,
       page_id: pagePath,
     };
 
-    if (document.getElementById(scriptId)) return;
+    if (!document.getElementById(scriptId)) {
-
       const script = document.createElement("script");
       script.id = scriptId;
       script.async = true;
@@ -35,6 +44,25 @@
         }(window.remark_config.components||["embed"],document);
       `;
       document.body.appendChild(script);
+    }
+
+    syncRemark42Theme();
+
+    const observer = new MutationObserver(() => {
+      syncRemark42Theme();
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    window.addEventListener("storage", syncRemark42Theme);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("storage", syncRemark42Theme);
+    };
   });
 </script>