From 94517490f5bf65010a56a19889b2453e6952d622 Mon Sep 17 00:00:00 2001
From: "Query&mut NinjaStyle, &Ryder" <97464694+X1Vi@users.noreply.github.com>
Date: Mon, 13 Jan 2025 17:14:53 +0530
Subject: [PATCH] fix: mermaid diagrams in dark mode (#4289)

* fix #4257 fixed ui for mermaid diagrams in dark mode

* fixed linting issues

* added dynamic color theme for mermaid diagrams

* now mermaid block uses theme according to the system as well when 'follow system' is selected

* refactored code for mermaid theme logic

* refactored mermaid code to use const instead of function call

---------

Co-authored-by: root <root@DESKTOP-G3MCU14>
---
 web/src/components/MemoContent/MermaidBlock.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MemoContent/MermaidBlock.tsx b/web/src/components/MemoContent/MermaidBlock.tsx
index bf558fa8..064d4608 100644
--- a/web/src/components/MemoContent/MermaidBlock.tsx
+++ b/web/src/components/MemoContent/MermaidBlock.tsx
@@ -1,3 +1,4 @@
+import { useColorScheme } from "@mui/joy";
 import { useEffect, useRef } from "react";
 
 interface Props {
@@ -6,12 +7,15 @@ interface Props {
 
 const MermaidBlock: React.FC<Props> = ({ content }: Props) => {
   const mermaidDockBlock = useRef<null>(null);
+  const { mode } = useColorScheme();
+
+  const mermaidTheme = mode == "dark" ? "dark" : "default";
 
   useEffect(() => {
     // Dynamically import mermaid to ensure compatibility with Vite
     const initializeMermaid = async () => {
       const mermaid = (await import("mermaid")).default;
-      mermaid.initialize({ startOnLoad: false, theme: "default" });
+      mermaid.initialize({ startOnLoad: false, theme: mermaidTheme });
       if (mermaidDockBlock.current) {
         mermaid.run({
           nodes: [mermaidDockBlock.current],