Mermaid edge labels render as black rectangles in expanded preview (light theme)

Codex app version

26.707.62119 (build 5211, com.openai.codex)

Environment

• macOS 26.5
• Apple Silicon (arm64)
• Light theme

Description

A Mermaid flowchart renders correctly inline, but opening its expanded/zoomable preview turns every edge-label background into a solid black rectangle. The edge-label text becomes unreadable. Node labels and unlabeled edges remain correct.

Minimal reproduction

1. Render this Mermaid diagram in a Codex task:

flowchart LR
    A["Browser"] -->|"HTTPS :443"| B["Gateway"]
    B -->|"/notes"| C["Notes"]

1. Confirm that both edge labels are readable inline.
2. Click the expand button on the diagram.

Expected behavior

The expanded preview preserves the same edge-label background and text colors as the inline diagram.

Actual behavior

The expanded preview displays black rectangles in place of HTTPS :443 and /notes. The diagram layout, nodes, arrows, and node labels still render correctly.

Screenshots

Inline rendering (expected):

<img width="933" height="107" alt="Inline Mermaid rendering with readable edge labels" src="https://github.com/user-attachments/assets/581591f1-56c0-494e-b71e-165ae77ffc60" />

Expanded preview (actual):

<img width="917" height="72" alt="Expanded Mermaid preview with black edge-label rectangles" src="https://github.com/user-attachments/assets/4ac26930-e38f-4d77-a18f-d574f206f2c8" />

Root cause found in the packaged renderer

This appears to be in the expanded-preview serialization path rather than in Mermaid syntax:

• The inline wrapper defines --mermaid-surface-background.
• Mermaid is initialized with:

``css
.edgeLabel .label rect {
fill: var(--mermaid-surface-background);
opacity: 1;
}
``

• Expanding the diagram clones the <svg>, serializes its outerHTML into a data:image/svg+xml URL, and displays it through an <img>.
• The cloned standalone SVG does not receive --mermaid-surface-background from the inline wrapper.
• Therefore the winning fill: var(--mermaid-surface-background) declaration is invalid at computed-value time, and the SVG rect falls back to the initial black fill. In light theme, the label text is also dark, producing the black bars.

Suggested fix

Either copy the resolved --mermaid-surface-background value onto the cloned root <svg> before serialization, or use a resolved fallback in the generated theme CSS, for example:

fill: var(--mermaid-surface-background, <resolved-edge-label-background>);

This should also make the serialized/downloadable SVG self-contained.