Make Mermaid previews theme-aware

[SR0725]

Description

Mermaid previews now follow Warp's active color scheme when the document does not choose a Mermaid theme. The effective theme is also part of the asset cache key, so light and dark previews cannot reuse the same SVG.

Frontmatter still takes priority. An explicit Mermaid theme or custom theme variables are preserved instead of being replaced by the app theme.

Linked Issue

Fixes #11601

• The linked issue is labeled ready-to-implement.
• Renderer screenshots are included below.

Testing

• cargo nextest run -p warp_editor — 487 passed

• cargo check -p warp --tests

• cargo clippy --workspace --exclude warp_completer --all-targets --tests -- -D warnings

• cargo clippy -p warp --all-targets --tests -- -D warnings

• cargo clippy -p warp_completer --all-targets --tests -- -D warnings

• ./script/format --check

• I built and launched the OSS app locally with ./script/run.

• I rendered the same Mermaid source through the production renderer in both color schemes and inspected the resulting SVGs.

• Tests verify that explicit frontmatter such as theme: base and custom theme variables still win over the app theme.

Screenshots

These images use the same Mermaid source. The before image uses the pre-change default renderer; the after images use the updated production asset path.

Before — dark Warp theme

After — dark Warp theme

After — light Warp theme

Agent Mode

• Warp Agent Mode - This PR was created via Warp's AI Agent Mode

CHANGELOG-BUG-FIX: Mermaid diagrams now match Warp's active light or dark theme.

[cla-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have the users @SR0725 on file. In order for us to review and merge your code, each contributor must visit https://cla.warp.dev to read and agree to our CLA. Once you have done so, please comment @cla-bot check to trigger another check.

[oz-for-oss]

@SR0725

I'm starting a first review of this pull request.

You can view the conversation on Warp.

I completed the review and no human review was requested for this pull request.

Comment /oz-review on this pull request to retrigger a review (up to 3 times on the same pull request).

Powered by Oz

[SR0725]

@cla-bot check

[cla-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have the users @SR0725 on file. In order for us to review and merge your code, each contributor must visit https://cla.warp.dev to read and agree to our CLA. Once you have done so, please comment @cla-bot check to trigger another check.

[cla-bot]

The cla-bot has been summoned, and re-checked this pull request!

[oz-for-oss]

Overview

This PR threads Warp's active color scheme through Mermaid SVG asset creation for the editor, notebook lightbox, and AI block Mermaid rendering, and updates the cache key/tests so light and dark SVGs do not collide.

Concerns

• ⚠️ The AI-block Mermaid card still wraps the rendered diagram in theme.foreground() via the existing Mermaid canvas background in app/src/ai/blocklist/block/view_impl/common.rs. With the new dark Mermaid SVG selected by this PR, that unchanged 32px padded canvas remains light in dark themes, so AI-block previews still show a light frame instead of fully following the active theme. Please switch that canvas/background to the active theme background or another color that matches the selected Mermaid theme.

Security

No security concerns found.

Verdict

Found: 0 critical, 1 important, 0 suggestions

Request changes

Comment /oz-review on this pull request to retrigger a review (up to 3 times on the same pull request).

Powered by Oz

[cla-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have the users @SR0725 on file. In order for us to review and merge your code, each contributor must visit https://cla.warp.dev to read and agree to our CLA. Once you have done so, please comment @cla-bot check to trigger another check.

[SR0725]

Updated the AI-block Mermaid canvas to use theme.background(), so the 32px padding follows the active theme and no longer leaves a light frame in dark mode.

/oz-review

[oz-for-oss]

@SR0725

I'm re-reviewing this pull request in response to a review request.

You can view the conversation on Warp.

I reviewed this pull request and requested human review from: @kevinyang372.

Comment /oz-review on this pull request to retrigger a review (up to 3 times on the same pull request).

Powered by Oz

Oz no longer requests changes for this pull request after the latest automated review.

[oz-for-oss]

Overview

This PR makes Mermaid SVG assets theme-aware across notebook/editor rendering, AI block previews, and lightbox entry points. It also includes cache-key coverage for light and dark theme variants, preserves explicit Mermaid frontmatter themes, and provides screenshots for the user-facing rendering change.

Concerns

• No blocking correctness, security, or spec-alignment concerns found in the reviewed diff.

Verdict

Found: 0 critical, 0 important, 0 suggestions

Approve

Comment /oz-review on this pull request to retrigger a review (up to 3 times on the same pull request).

Powered by Oz

[SR0725]

@cla-bot check

[cla-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have the users @SR0725 on file. In order for us to review and merge your code, each contributor must visit https://cla.warp.dev to read and agree to our CLA. Once you have done so, please comment @cla-bot check to trigger another check.

[cla-bot]

The cla-bot has been summoned, and re-checked this pull request!