Merge 49a2d3f into 93cb197

Author: yufeih

templates/modern/src/markdown.ts

@@ -4,7 +4,7 @@
 import { breakWord, meta, loc, options } from './helper'
 import AnchorJs from 'anchor-js'
 import { html, render } from 'lit-html'
-import { getTheme } from './theme'
+import { getTheme, onThemeChange } from './theme'
 
 /**
  * Initialize markdown rendering.
@@ -23,6 +23,8 @@ export async function renderMarkdown() {
     renderMath(),
     renderMermaid()
   ])
+
+  onThemeChange(renderMermaid)
 }
 
 async function renderMath() {
@@ -39,7 +41,8 @@ let mermaidRenderCount = 0
  */
 async function renderMermaid() {
   const diagrams = document.querySelectorAll<HTMLElement>('pre code.lang-mermaid')
-  if (diagrams.length <= 0) {
+  const processedDiagrams = document.querySelectorAll<HTMLElement>('pre.mermaid[data-mermaid]')
+  if (diagrams.length <= 0 && processedDiagrams.length <= 0) {
     return
   }
 
@@ -57,8 +60,18 @@ async function renderMermaid() {
     // Rerender when elements becomes visible due to https://github.com/mermaid-js/mermaid/issues/1846
     if (e.offsetParent) {
       nodes.push(e.parentElement)
+      const code = e.innerHTML
       e.parentElement.classList.add('mermaid')
-      e.parentElement.innerHTML = e.innerHTML
+      e.parentElement.setAttribute("data-mermaid", code)
+      e.parentElement.innerHTML = code
+    }
+  })
+
+  processedDiagrams.forEach(e => {
+    if (e.offsetParent) {
+      e.removeAttribute("data-processed")
+      e.innerHTML = e.getAttribute("data-mermaid")
+      nodes.push(e)
     }
   })
 

templates/modern/src/theme.ts

@@ -22,6 +22,11 @@ export async function initTheme() {
   setTheme(await getDefaultTheme())
 }
 
+export function onThemeChange(callback: (theme: 'light' | 'dark') => {}) {
+  return new MutationObserver(() => callback(getTheme()))
+    .observe(document.documentElement, { attributes: true, attributeFilter: ['data-bs-theme'] })
+}
+
 export function getTheme(): 'light' | 'dark' {
   return document.documentElement.getAttribute('data-bs-theme') as 'light' | 'dark'
 }