From 9bca7045cc7a507ce6a6a00190b5097b93e68695 Mon Sep 17 00:00:00 2001
From: Mylloon <kennel.anri@tutanota.com>
Date: Mon, 16 Dec 2024 13:52:12 +0100
Subject: [PATCH] fix theme switching for mermaid diagrams

---
 static/css/markdown.css   | 6 ++++++
 static/js/libs/mermaid.js | 9 ++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/static/css/markdown.css b/static/css/markdown.css
index ceb0d03..c9eacc9 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -174,6 +174,12 @@ pre:has(code.language-mermaid) {
   text-align: center;
 }
 
+@media (prefers-color-scheme: dark) {
+  .language-mermaid {
+    filter: invert(0.9);
+  }
+}
+
 /* Tables */
 table:not(.hljs-ln) {
   border-collapse: collapse;
diff --git a/static/js/libs/mermaid.js b/static/js/libs/mermaid.js
index 56c9605..254ffed 100644
--- a/static/js/libs/mermaid.js
+++ b/static/js/libs/mermaid.js
@@ -1,11 +1,10 @@
 import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
 
 window.addEventListener("load", async () => {
-  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
-    ? "dark" // dark
-    : "default"; // light
-
-  mermaid.initialize({ startOnLoad: false, theme: theme });
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: "default",
+  });
 
   await mermaid.run({
     querySelector: ".language-mermaid",