Improve dark theme contrast for Mermaid edge labels (#4645)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

.changeset/mermaid-edge-label-contrast.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Improve dark theme contrast for Mermaid edge labels.

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();