fix(ui): make mermaid diagrams readable in dark mode

[Anshumancanrock]

What type of PR is this?

/kind bug

What this PR does / why we need it:

Site defaults to dark mode but Mermaid diagrams were still stuck on the light theme, which made them pretty hard to read. A couple of the blog posts also had light node colors hardcoded.

Now it just sets the mermaid light/dark themes in docusaurus.config.js and moves those node colors into CSS so they actually respect the color mode. Also updated the ZH copies of the blogs.

Tested locally with npm run lint, npm run format:check, and npm run build for both en and zh. Checked the isolation blog post and the architecture docs in both light and dark mode.

Which issue(s) this PR fixes:

Fixes #769

Checklist:

• npm run lint and npm run format:check pass
• npm run build succeeds for both en and zh
• Chinese translation updated if English docs changed (or noted why not)
• Commits are signed off (git commit -s)

Summary by CodeRabbit

• New Features
  • Improved Mermaid diagram styling across light and dark themes.
  • Added clearer role-based colors, labels, node fills, and connection styling.
  • Enhanced diagram lightbox views with better sizing, backgrounds, and readability.
  • Preserved diagram styling when viewing enlarged diagrams.
• Documentation
  • Updated English and Chinese diagrams with consistent reusable styling.

[hami-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Anshumancanrock
Once this PR has been reviewed and has the lgtm label, please assign windsonsea for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[netlify]

✅ Deploy Preview for project-hami ready!

Name	Link
🔨 Latest commit	2a26995
🔍 Latest deploy log	https://app.netlify.com/projects/project-hami/deploys/6a875c56cb074e000885b620
😎 Deploy Preview	https://deploy-preview-772--project-hami.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Warning

Review limit reached

@Anshumancanrock, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 31 minutes

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 8dd69d60-6f08-4efa-a879-c6ea92358316

📥 Commits

Reviewing files that changed from the base of the PR and between 6ecc579 and 2a26995.

📒 Files selected for processing (8)

• blog/hami-core-adopted-by-nvidia-kai-scheduler/index.md
• blog/kai-scheduler-hami-gpu-memory-hard-isolation/index.md
• blog/volcano-ascend-vnpu-soft-slicing/index.md
• docusaurus.config.js
• i18n/zh/docusaurus-plugin-content-blog/hami-core-adopted-by-nvidia-kai-scheduler/index.md
• i18n/zh/docusaurus-plugin-content-blog/kai-scheduler-hami-gpu-memory-hard-isolation/index.md
• i18n/zh/docusaurus-plugin-content-blog/volcano-ascend-vnpu-soft-slicing/index.md
• src/css/custom.css

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 5e86370a-e97c-459d-bfd2-9b0b9ee282b9

📥 Commits

Reviewing files that changed from the base of the PR and between dd9c129 and 6ecc579.

📒 Files selected for processing (7)

• blog/hami-core-adopted-by-nvidia-kai-scheduler/index.md
• blog/kai-scheduler-hami-gpu-memory-hard-isolation/index.md
• docusaurus.config.js
• i18n/zh/docusaurus-plugin-content-blog/hami-core-adopted-by-nvidia-kai-scheduler/index.md
• i18n/zh/docusaurus-plugin-content-blog/kai-scheduler-hami-gpu-memory-hard-isolation/index.md
• src/css/custom.css
• src/theme/utils/useImageLightbox.js

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The PR configures Mermaid light and dark themes, replaces inline diagram styles with reusable classes, adds theme-aware Mermaid CSS, and preserves Mermaid container classes when rendering SVGs in the lightbox.

Changes

Mermaid theme rendering

Layer / File(s)	Summary
Mermaid class assignments blog/.../index.md, i18n/zh/.../index.md, docusaurus.config.js	Mermaid nodes use reusable role classes. Docusaurus maps light mode to default and dark mode to dark.
Theme-aware Mermaid CSS src/css/custom.css	CSS defines light and dark role tokens and styles Mermaid nodes, labels, clusters, edges, and lightbox backgrounds.
Class-preserving lightbox rendering src/theme/utils/useImageLightbox.js	Cloned Mermaid SVGs render inside a wrapper that retains the source Mermaid container class.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 6ecc5

This PR updates Mermaid theming and diagram colors for dark mode across English and Chinese content. No actionable merge-blocking risk remains after normal checks and review.

Possibly related PRs

• Project-HAMi/website#770: Modifies the same Mermaid diagrams, configuration, and CSS for dark-mode readability.
• Project-HAMi/website#768: Modifies the same English and Chinese Mermaid diagrams.
• Project-HAMi/website#515: Modifies Mermaid lightbox rendering and related CSS.

Suggested reviewers: rootsongjc, windsonsea

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: improving Mermaid diagram readability in dark mode.
Linked Issues check	✅ Passed	The PR adds the required Mermaid themes, replaces hardcoded styles with theme-aware classes, and preserves colors in lightbox views [#769].
Out of Scope Changes check	✅ Passed	All changes support dark-mode Mermaid rendering, including diagram styles, configuration, translations, and lightbox behavior.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Creativeklvn]

Mermaid diagrams are readable in dark mode on the page now, but when I click on the diagram to view it, the expanded diagram has a gray background. I think the expanded view should keep the same styling as the diagram on the page.

Before expanding

Expanded view

[rootsongjc]

@CodeRabbit review

[coderabbitai]

⚠️ Action not completed

Review rate limited.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[rootsongjc]

The problem now is that after clicking to zoom in on the Mermaid image, the Mermaid color settings disappear in the lightbox.

[Creativeklvn]

Yes, the same issue applies to the other Mermaid images on the page as well.

[Anshumancanrock]

@rootsongjc fixed the zoom issue. Please take a look now. Thanks!

[Creativeklvn]

It looks better now

[mesutoezdil]

solid approach, css variables per role beats per node styles. note: #700 and #682 also touch useImageLightbox.js, coordinate merge order.