docs: add theme-aware dashboard screenshots to the live dashboard guide

[oekazuma]

Summary

• Adds real dark/light screenshots of the /__svelte-vitals/ live dashboard to the Live dashboard guide, in both English and Japanese.
• Screenshots swap automatically with the docs site's own dark/light toggle, via CSS keyed off Starlight's data-theme attribute on <html> (docs/src/styles/theme-image.css, registered as customCss) — no client JS of our own.

Test plan

• astro build completes (125 pages)
• pnpm exec prettier --check on changed files
• Verified locally with astro dev: toggling the site's theme selector (Auto/Dark/Light) swaps the screenshot on both /guides/dev-dashboard/ and /ja/guides/dev-dashboard/

🤖 Generated with Claude Code

https://claude.ai/code/session_013wEzbEuUrQT5ARaqpdrkxL

Summary by CodeRabbit

• Documentation
  • Added dark- and light-theme screenshots to the development dashboard guide in English and Japanese.
  • Included descriptive alternative text for improved accessibility.
• Style
  • Documentation screenshots now automatically switch between light and dark versions based on the selected theme.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 909eea5b-893d-493a-83c5-9fd6af023abf

📥 Commits

Reviewing files that changed from the base of the PR and between b291361 and 457883a.

⛔ Files ignored due to path filters (2)

• docs/public/dashboard-dark.png is excluded by !**/*.png
• docs/public/dashboard-light.png is excluded by !**/*.png

📒 Files selected for processing (4)

• docs/astro.config.mjs
• docs/src/content/docs/guides/dev-dashboard.md
• docs/src/content/docs/ja/guides/dev-dashboard.md
• docs/src/styles/theme-image.css

---

📝 Walkthrough

Walkthrough

The documentation adds dark- and light-theme dashboard screenshots to the English and Japanese guides. Astro loads a stylesheet that displays the screenshot matching the active Starlight theme.

Changes

Theme-aware documentation images

Layer / File(s)	Summary
Theme image styling and Astro wiring docs/src/styles/theme-image.css, docs/astro.config.mjs	Astro registers the stylesheet, which sizes theme images and toggles dark or light variants using the page theme.
Dashboard guide screenshot embeds docs/src/content/docs/guides/dev-dashboard.md, docs/src/content/docs/ja/guides/dev-dashboard.md	The English and Japanese guides add dark- and light-theme Overview screenshots with descriptive alternative text.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: theme-aware dashboard screenshots added to the live dashboard guide.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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.}