fix: initialize mermaid after DOM being ready

redimp · Sep 29, 2024 · 1b5187d · 1b5187d
1 parent 0d52932
commit 1b5187d
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/otterwiki/templates/snippets/renderer_js.html b/otterwiki/templates/snippets/renderer_js.html
@@ -3,11 +3,13 @@
 <script id="MathJax-script" async src="{{ url_for("static", filename="mathjax/tex-chtml.js") }}"></script>
 <script src="{{ url_for("static", filename="js/[email protected]") }}"></script>
 <script type="text/javascript">
-    mermaid.initialize({
-{%- if request.cookies.get('halfmoon_preferredMode') == "dark-mode" %}
-      theme: 'dark',
-{%- else %}
-      theme: 'neutral',
-{%- endif %}
+    document.addEventListener("DOMContentLoaded", function(event) {
+        let theme = 'neutral';
+        if (document.querySelector("body").classList.contains("dark-mode")) {
+            theme = 'dark';
+        }
+        mermaid.initialize({
+            theme: theme,
+        });
     });
 </script>