cloverta/SanYeCao-blog
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git synced 2026-07-03 15:41:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added runtime darkmode to remark42

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-04-25 00:56:06 +03:00
parent 7292affc04
commit 9c53ea922e
1 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/Remark42Embed.astro
View file

@ -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>