Merge pull request #10139 from weseek/imprv/mermaid-in-dark-mode

imprv: Add dark mode support to MermaidViewer component

apps/app/src/features/mermaid/components/MermaidViewer.tsx

@@ -2,6 +2,8 @@ import React, { useRef, useEffect, type JSX } from 'react';
 
 import mermaid from 'mermaid';
 
+import { useNextThemes } from '~/stores-universal/use-next-themes';
+
 type MermaidViewerProps = {
   value: string
 }
@@ -9,14 +11,18 @@ type MermaidViewerProps = {
 export const MermaidViewer = React.memo((props: MermaidViewerProps): JSX.Element => {
   const { value } = props;
 
+  const { isDarkMode } = useNextThemes();
+
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (ref.current != null && value != null) {
-      mermaid.initialize({});
+      mermaid.initialize({
+        theme: isDarkMode ? 'dark' : undefined,
+      });
       mermaid.run({ nodes: [ref.current] });
     }
-  }, [value]);
+  }, [isDarkMode, value]);
 
   return (
     value