diff --git a/docs/delivered-pr-types.js b/docs/delivered-pr-types.js
index dedea7a..cea842c 100644
--- a/docs/delivered-pr-types.js
+++ b/docs/delivered-pr-types.js
@@ -2,13 +2,33 @@
   "use strict";
 
   const PR_TYPE_KEYS = ["feat", "fix", "docs", "ci", "chore", "test", "perf", "other"];
-  // Concrete hex — CSS vars are unreliable as SVG fill in some browsers
-  const TYPE_COLORS = {
-    feat: "#6b93f7", fix: "#ff453a", docs: "#9775fa", ci: "#f5c842",
-    chore: "#8e8e93", test: "#4fbc6b", perf: "#f4845f", other: "#5c5c5e",
-  };
+  // Resolve theme tokens to concrete colors for SVG (CSS vars as fill attrs are unreliable).
+  function themeColor(name, fallback) {
+    const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    return v || fallback;
+  }
+  // Re-resolved on each render / color-scheme change so charts track live CSS tokens.
+  function resolveTypeColors() {
+    return {
+      feat: themeColor("--chart-1", "#5cb3ff"),
+      fix: themeColor("--negative", "#f87171"),
+      docs: themeColor("--type-docs", "#9775fa"),
+      ci: themeColor("--chart-2", "#f5c842"),
+      chore: themeColor("--type-chore", "#8e8e93"),
+      test: themeColor("--positive", "#4ade80"),
+      perf: themeColor("--chart-3", "#ff8f5c"),
+      other: themeColor("--type-other", "#5c5c5e"),
+    };
+  }
   const FIX_KEYS = ["core", "external", "bot"];
-  const FIX_COLORS = { core: "#6b93f7", external: "#4fbc6b", bot: "#f4845f" };
+  // Must match .fix-bucket.{core,external,bot} in style.css (chart-1 / chart-5 / accent).
+  function resolveFixColors() {
+    return {
+      core: themeColor("--chart-1", "#5cb3ff"),
+      external: themeColor("--chart-5", "#2dd4bf"),
+      bot: themeColor("--accent", "#c4ff0e"),
+    };
+  }
   const FIX_LABELS = {
     core: "Core team filed",
     external: "External human filed",
@@ -207,7 +227,7 @@
     });
   }
 
-  function renderHero(t) {
+  function renderHero(t, typeColors) {
     const topType = PR_TYPE_KEYS.slice().sort((a, b) => t[b] - t[a])[0];
     const topPct = t.merged ? (100 * t[topType] / t.merged).toFixed(1) : "0.0";
     const typeBits = PR_TYPE_KEYS
@@ -216,10 +236,12 @@
       .slice(0, 4)
       .map(k => `${k} ${(100 * t[k] / (t.merged || 1)).toFixed(0)}%`)
       .join(" · ");
+    const fixColor = typeColors.fix;
+    const topColor = typeColors[topType] || typeColors.feat;
     document.getElementById("hero").innerHTML = `
       <div class="stat"><div class="val">${t.merged.toLocaleString()}</div><div class="lbl">Merged PRs</div></div>
-      <div class="stat"><div class="val" style="color:#ff453a">${t.fix}</div><div class="lbl">Fix PRs</div></div>
-      <div class="stat"><div class="val" style="color:#6b93f7">${topPct}%</div><div class="lbl">Top type: ${topType}</div></div>
+      <div class="stat"><div class="val" style="color:${fixColor}">${t.fix}</div><div class="lbl">Fix PRs</div></div>
+      <div class="stat"><div class="val" style="color:${topColor}">${topPct}%</div><div class="lbl">Top type: ${topType}</div></div>
       <div class="stat stat-wide"><div class="val-sm">${typeBits || "—"}</div><div class="lbl">Mix in selected range</div></div>`;
   }
 
@@ -236,6 +258,8 @@
   }
 
   function render() {
+    const typeColors = resolveTypeColors();
+    const fixColors = resolveFixColors();
     const exact = filterDaily(false);
     const smoothed = filterDaily(true);
     const t = totals(exact);
@@ -247,10 +271,10 @@
       bot: d.fix_bot || 0,
     })).filter(d => d.core + d.external + d.bot > 0);
 
-    renderHero(t);
+    renderHero(t, typeColors);
     renderBuckets(t);
-    renderLineCounts("#chart-pr-type", smoothed, top4, TYPE_COLORS, null, 340);
-    renderLineCounts("#chart-fix-source", fixDaily, FIX_KEYS, FIX_COLORS, FIX_LABELS, 260);
+    renderLineCounts("#chart-pr-type", smoothed, top4, typeColors, null, 340);
+    renderLineCounts("#chart-fix-source", fixDaily, FIX_KEYS, fixColors, FIX_LABELS, 260);
   }
 
   document.querySelectorAll(".range-btn").forEach(btn => {
@@ -279,5 +303,12 @@
   });
 
   window.addEventListener("resize", () => render());
+  // Cards use live CSS vars; charts need a re-resolve + redraw when the scheme flips.
+  const colorScheme = window.matchMedia("(prefers-color-scheme: light)");
+  if (typeof colorScheme.addEventListener === "function") {
+    colorScheme.addEventListener("change", () => render());
+  } else if (typeof colorScheme.addListener === "function") {
+    colorScheme.addListener(() => render());
+  }
   render();
 })();
diff --git a/docs/style.css b/docs/style.css
index 0fe5700..a96ed02 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -18,6 +18,9 @@
   --chart-3: #ff8f5c;
   --chart-4: #c4ff0e;
   --chart-5: #2dd4bf;
+  --type-docs: #9775fa;
+  --type-chore: #8e8e93;
+  --type-other: #5c5c5e;
   --radius: 10px;
 }
 
@@ -38,6 +41,9 @@
     --chart-3: #f97316;
     --chart-4: #4d7c0f;
     --chart-5: #0d9488;
+    --type-docs: #7c3aed;
+    --type-chore: #6b7280;
+    --type-other: #9ca3af;
   }
 }