oekazuma · Jul 15, 2026 · Jul 15, 2026
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -15,6 +15,7 @@ export default defineConfig({
       description,
       logo: { src: './src/assets/logo-mark.svg', alt: 'svelte-vitals' },
       favicon: '/favicon.svg',
+      customCss: ['./src/styles/theme-image.css'],
       head: [{ tag: 'link', attrs: { rel: 'apple-touch-icon', sizes: '180x180', href: `${base}/favicon-180.png` } }],
       locales: {
         root: { label: 'English', lang: 'en' },

diff --git a/docs/public/dashboard-dark.png b/docs/public/dashboard-dark.png
diff --git a/docs/public/dashboard-light.png b/docs/public/dashboard-light.png
diff --git a/docs/src/content/docs/guides/dev-dashboard.md b/docs/src/content/docs/guides/dev-dashboard.md
@@ -22,6 +22,17 @@ export default {
   ➜  svelte-vitals: http://localhost:5173/__svelte-vitals/
 ```
 
+<img
+  class="theme-img theme-img-dark"
+  src="/svelte-vitals/dashboard-dark.png"
+  alt="The svelte-vitals live dashboard's Overview pane, showing the Health score ring, per-category bars, and a list of findings with severity, rule id, location, and a fix snippet."
+/>
+<img
+  class="theme-img theme-img-light"
+  src="/svelte-vitals/dashboard-light.png"
+  alt="The svelte-vitals live dashboard's Overview pane, showing the Health score ring, per-category bars, and a list of findings with severity, rule id, location, and a fix snippet."
+/>
+
 ## Whole-project coverage from startup
 
 From the moment the dev server starts, the dashboard shows the **whole project**: a static analysis of all routes across every category (SEO, Performance, Correctness, Security, Architecture) runs asynchronously at startup — the same analysis as `npx svelte-vitals@latest` — so you get the real project Health without visiting a single page. Saving a source file (anything under `src/` or `static/`, or a `svelte.config.*` / `svelte-vitals.config.*`) triggers a debounced re-analysis, and the dashboard refreshes itself.

diff --git a/docs/src/content/docs/ja/guides/dev-dashboard.md b/docs/src/content/docs/ja/guides/dev-dashboard.md
@@ -22,6 +22,17 @@ export default {
   ➜  svelte-vitals: http://localhost:5173/__svelte-vitals/
 ```
 
+<img
+  class="theme-img theme-img-dark"
+  src="/svelte-vitals/dashboard-dark.png"
+  alt="svelte-vitals ライブダッシュボードの Overview ペイン。Health スコアのリング、カテゴリ別バー、重要度・ルールID・場所・修正スニペット付きの指摘一覧が表示されている。"
+/>
+<img
+  class="theme-img theme-img-light"
+  src="/svelte-vitals/dashboard-light.png"
+  alt="svelte-vitals ライブダッシュボードの Overview ペイン。Health スコアのリング、カテゴリ別バー、重要度・ルールID・場所・修正スニペット付きの指摘一覧が表示されている。"
+/>
+
 ## 起動直後からのプロジェクト全体カバレッジ
 
 dev サーバーの起動直後から、ダッシュボードは**プロジェクト全体**を表示します。起動時に全ルート・全カテゴリ（SEO・Performance・Correctness・Security・Architecture）の静的解析が非同期で実行され（`npx svelte-vitals@latest` と同じ解析です）、ページを1つも訪問しなくても本物のプロジェクト Health が得られます。ソースファイル（`src/` または `static/` 配下、あるいは `svelte.config.*` / `svelte-vitals.config.*`）を保存すると、デバウンス付きの再解析が走り、ダッシュボードが自動的に更新されます。

diff --git a/docs/src/styles/theme-image.css b/docs/src/styles/theme-image.css
@@ -0,0 +1,28 @@
+/*
+ * Swap a light/dark screenshot pair based on Starlight's `data-theme` attribute
+ * on <html> (set to 'dark' by default server-side, flipped to 'light' by
+ * Starlight's inline theme script before first paint — see
+ * @astrojs/starlight/components/Page.astro). Mirrors Starlight's own
+ * `[data-theme='light']` override convention (see MobileMenuToggle.astro),
+ * so screenshots follow the docs site's toggle with no client JS of our own.
+ */
+.theme-img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  border: 1px solid var(--sl-color-gray-5);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+}
+
+.theme-img-light {
+  display: none;
+}
+
+:root[data-theme='light'] .theme-img-dark {
+  display: none;
+}
+
+:root[data-theme='light'] .theme-img-light {
+  display: block;
+}