fix mermaid

Author: fingerballet

book.toml

@@ -12,6 +12,7 @@ additional-css = ["theme/pdf-report.css"] # 额外的 CSS 文件
 default-theme = "light" # 默认主题
 preferred-dark-theme = "navy" # 默认深色主题
 mathjax-support = true # 支持数学公式
+additional-js = ["mermaid.min.js", "mermaid-init.js"]
 # 启用搜索功能
 [output.html.search]
 enable = true

mermaid-init.js

@@ -0,0 +1,49 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+(() => {
+    const darkThemes = ['ayu', 'navy', 'coal'];
+    const lightThemes = ['light', 'rust'];
+
+    const classList = document.getElementsByTagName('html')[0].classList;
+
+    let lastThemeWasLight = true;
+    for (const cssClass of classList) {
+        if (darkThemes.includes(cssClass)) {
+            lastThemeWasLight = false;
+            break;
+        }
+    }
+
+    const theme = lastThemeWasLight ? 'default' : 'dark';
+    mermaid.initialize({ startOnLoad: true, theme });
+
+    // Simplest way to make mermaid re-render the diagrams in the new theme is via refreshing the page
+
+    const getThemeButton = (themeName) =>
+        document.getElementById(themeName) || document.getElementById(`mdbook-theme-${themeName}`);
+
+    const bindClick = (themeName, onClick) => {
+        const el = getThemeButton(themeName);
+        if (el) {
+            el.addEventListener('click', onClick);
+        }
+    };
+
+    for (const darkTheme of darkThemes) {
+        bindClick(darkTheme, () => {
+            if (lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+
+    for (const lightTheme of lightThemes) {
+        bindClick(lightTheme, () => {
+            if (!lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+})();