From d8dc59b1a938d1927fd3c86d11363cf5eeef98df Mon Sep 17 00:00:00 2001 From: Tomek Date: Tue, 29 Sep 2026 14:02:07 +0200 Subject: [PATCH] Improve dark theme contrast for Mermaid edge labels (#4645) Co-authored-by: Claude Haiku 4.5 --- .changeset/mermaid-edge-label-contrast.md | 5 +++++ .../components/DocumentView/CodeBlock/MermaidCodeBlock.tsx | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/mermaid-edge-label-contrast.md diff --git a/.changeset/mermaid-edge-label-contrast.md b/.changeset/mermaid-edge-label-contrast.md new file mode 100644 index 000000000..ea3f6b0c2 --- /dev/null +++ b/.changeset/mermaid-edge-label-contrast.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Improve dark theme contrast for Mermaid edge labels. diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlock.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlock.tsx index 902370d52..3d8f604a8 100644 --- a/packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlock.tsx +++ b/packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlock.tsx @@ -247,11 +247,15 @@ async function renderMermaidDiagram(args: { const { source, id, darkMode, mermaidRuntimeURL } = args; const { mermaid } = await loadMermaid(mermaidRuntimeURL); + // Mermaid's default dark edge label pill only reaches 4.43:1 contrast, below WCAG AA. + const themeVariables = darkMode ? { edgeLabelBackground: '#3a3a3a' } : undefined; + mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', darkMode, theme: darkMode ? 'dark' : undefined, + themeVariables, }); const renderContainer = createMermaidRenderContainer();