From be67b09a9e70ab8bc54119c2bf9649a9862726cd Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Tue, 14 Jul 2026 22:57:35 +0200
Subject: [PATCH] fix(renderer): apply dark mode properly to mermaid diagrams

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
---
 .../mermaid/mermaid-chart.tsx                 | 27 +++++++++++--------
 .../mermaid/mermaid.module.scss               |  4 +--
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid-chart.tsx b/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid-chart.tsx
index 36a899c4e..4ea99dba5 100644
--- a/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid-chart.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid-chart.tsx
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { CodeProps } from '../../../components/markdown-renderer/replace-components/code-block-component-replacer'
+import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { Logger } from '../../../utils/logger'
 import styles from './mermaid.module.scss'
@@ -14,7 +15,7 @@ import { ApplicationErrorAlert } from '../../../components/common/application-er
 
 const log = new Logger('MermaidChart')
 
-let mermaidInitialized = false
+let mermaidInitializedDarkMode: boolean | undefined
 
 const loadMermaid = async (): Promise<(typeof import('mermaid'))['default']> => {
   try {
@@ -34,6 +35,7 @@ const loadMermaid = async (): Promise<(typeof import('mermaid'))['default']> =>
 export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
   const diagramContainer = useRef<HTMLDivElement>(null)
   const { t } = useTranslation()
+  const darkModeEnabled = useDarkModeState()
   const { error } = useAsync(async () => {
     if (!diagramContainer.current) {
       return
@@ -41,9 +43,14 @@ export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
 
     const mermaid = await loadMermaid()
 
-    if (!mermaidInitialized) {
-      mermaid.initialize({ startOnLoad: false, securityLevel: 'sandbox' })
-      mermaidInitialized = true
+    if (mermaidInitializedDarkMode !== darkModeEnabled) {
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: 'antiscript',
+        theme: darkModeEnabled ? 'dark' : 'default',
+        darkMode: darkModeEnabled
+      })
+      mermaidInitializedDarkMode = darkModeEnabled
     }
 
     try {
@@ -53,23 +60,21 @@ export const MermaidChart: React.FC<CodeProps> = ({ code }) => {
       await mermaid.parse(code)
       delete diagramContainer.current.dataset.processed
       diagramContainer.current.textContent = code
-      await mermaid.init(undefined, diagramContainer.current)
+      await mermaid.run({
+        nodes: [diagramContainer.current]
+      })
     } catch (error) {
       const message = (error as Error).message
       log.error(error)
       diagramContainer.current?.querySelectorAll('iframe').forEach((child) => child.remove())
       throw new Error(message ?? t('renderer.mermaid.unknownError'))
     }
-  }, [code, t])
+  }, [code, darkModeEnabled, t])
 
   return (
     <Fragment>
       {error !== undefined && <ApplicationErrorAlert className={'text-wrap'}>{error?.message}</ApplicationErrorAlert>}
-      <div
-        {...cypressId('mermaid-frame')}
-        className={`text-center ${styles['mermaid']} bg-dark text-black`}
-        ref={diagramContainer}
-      />
+      <div {...cypressId('mermaid-frame')} className={`text-center ${styles['mermaid']}`} ref={diagramContainer} />
     </Fragment>
   )
 }
diff --git a/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid.module.scss b/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid.module.scss
index 0b3f568fb..8310e92f7 100644
--- a/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid.module.scss
+++ b/frontend/src/extensions/external-lib-app-extensions/mermaid/mermaid.module.scss
@@ -1,9 +1,9 @@
 /*!
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2026 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 .mermaid > svg {
-  background-color: #f8f9fa;
+  background-color: transparent;
 }