diff --git a/src/tangledGraph.ts b/src/tangledGraph.ts
index ae0725a..cbf95a8 100644
--- a/src/tangledGraph.ts
+++ b/src/tangledGraph.ts
@@ -38,7 +38,8 @@ const HEADER_TEXT_X = 16;
 const HEADER_TITLE_Y = 53;
 const LOGO_WIDTH = 140;
 const LOGO_HEIGHT = 24;
-const LOGO_URL = 'https://assets.tangled.network/tangled_logotype_black_on_trans.svg';
+const LOGO_URL_LIGHT = 'https://assets.tangled.network/tangled_logotype_black_on_trans.svg';
+const LOGO_URL_DARK = 'https://assets.tangled.network/tangled_logotype_white_on_trans.svg';
 const MIN_CANVAS_WIDTH = 700;
 const HEADER_CHAR_WIDTH = 8.2;
 const SUMMARY_CHAR_WIDTH = 6.2;
@@ -48,7 +49,6 @@ const WEEKDAY_LABELS = [
   { label: 'Fri', row: 5 },
 ];
 const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-const HEATMAP_COLORS = ['#ebedf0', '#d1d5db', '#9ca3af', '#4b5563', '#111827'] as const;
 
 export function normalizeAccount(input: string | undefined): string | null {
   if (!input) {
@@ -127,38 +127,87 @@ export function buildGraphSvg({ account, range, days, error }: GraphSvgOptions):
     .map((day) => {
       const x = LEFT_GUTTER + day.weekIndex * (CELL_SIZE + CELL_GAP);
       const y = graphStartY + day.weekdayIndex * (CELL_SIZE + CELL_GAP);
-      const fill = day.inRange ? HEATMAP_COLORS[day.level] : '#f8fafc';
-      const stroke = day.inRange ? 'none' : '#e5e7eb';
+      const cellClass = day.inRange ? `heat-${day.level}` : 'oor';
       const tooltip = `${day.isoDate}: ${day.count} activit${day.count === 1 ? 'y' : 'ies'}`;
 
-      return `<g><title>${escapeXml(tooltip)}</title><rect x="${x}" y="${y}" width="${CELL_SIZE}" height="${CELL_SIZE}" rx="2" fill="${fill}" stroke="${stroke}" /></g>`;
+      return `<g><title>${escapeXml(tooltip)}</title><rect x="${x}" y="${y}" width="${CELL_SIZE}" height="${CELL_SIZE}" rx="2" class="${cellClass}" /></g>`;
     })
     .join('');
 
   const weekdays = WEEKDAY_LABELS.map(({ label, row }) => {
     const y = graphStartY + row * (CELL_SIZE + CELL_GAP) + CELL_SIZE - 1;
-    return `<text x="8" y="${y}" font-size="10" fill="#6b7280">${label}</text>`;
+    return `<text x="8" y="${y}" font-size="10" class="label">${label}</text>`;
   }).join('');
 
   const months = monthLabels
     .map(({ label, weekIndex }) => {
       const x = LEFT_GUTTER + weekIndex * (CELL_SIZE + CELL_GAP);
-      return `<text x="${x}" y="${graphStartY - MONTH_LABEL_OFFSET}" font-size="10" fill="#6b7280">${label}</text>`;
+      return `<text x="${x}" y="${graphStartY - MONTH_LABEL_OFFSET}" font-size="10" class="label">${label}</text>`;
     })
     .join('');
 
   const summary = error
-    ? `<text x="${LEFT_GUTTER}" y="${height - 10}" font-size="11" fill="#b91c1c">${escapeXml(error)}</text>`
-    : `<text x="${LEFT_GUTTER}" y="${height - 10}" font-size="11" fill="#4b5563">${escapeXml(summaryText)}</text>`;
+    ? `<text x="${LEFT_GUTTER}" y="${height - 10}" font-size="11" class="error">${escapeXml(error)}</text>`
+    : `<text x="${LEFT_GUTTER}" y="${height - 10}" font-size="11" class="summary">${escapeXml(summaryText)}</text>`;
   const accountUrl = `https://tangled.org/@${encodeURIComponent(account)}`;
 
   return `<?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMinYMin meet" style="max-width:100%;height:auto" role="img" aria-labelledby="title desc">
   <title id="title">${escapeXml(headerText)}</title>
   <desc id="desc">Calendar heatmap of Tangled activities for ${escapeXml(account)}</desc>
+  <style>
+    :root {
+      --bg: #ffffff;
+      --border: #e5e7eb;
+      --title: #111827;
+      --label: #6b7280;
+      --summary: #4b5563;
+      --error: #b91c1c;
+      --heat-0: #ebedf0;
+      --heat-1: #d1d5db;
+      --heat-2: #9ca3af;
+      --heat-3: #4b5563;
+      --heat-4: #111827;
+      --oor-fill: #f8fafc;
+      --oor-stroke: #e5e7eb;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #161b22;
+        --border: #30363d;
+        --title: #e6edf3;
+        --label: #8b949e;
+        --summary: #8b949e;
+        --error: #f85149;
+        --heat-0: #21262d;
+        --heat-1: #374151;
+        --heat-2: #6b7280;
+        --heat-3: #9ca3af;
+        --heat-4: #e6edf3;
+        --oor-fill: #0d1117;
+        --oor-stroke: #21262d;
+      }
+    }
+    .bg { fill: var(--bg); stroke: var(--border); }
+    .title { fill: var(--title); }
+    .label { fill: var(--label); }
+    .summary { fill: var(--summary); }
+    .error { fill: var(--error); }
+    .heat-0 { fill: var(--heat-0); }
+    .heat-1 { fill: var(--heat-1); }
+    .heat-2 { fill: var(--heat-2); }
+    .heat-3 { fill: var(--heat-3); }
+    .heat-4 { fill: var(--heat-4); }
+    .oor { fill: var(--oor-fill); stroke: var(--oor-stroke); }
+    .logo-dark { display: none; }
+    @media (prefers-color-scheme: dark) {
+      .logo-light { display: none; }
+      .logo-dark { display: block; }
+    }
+  </style>
   <a href="${accountUrl}" target="_blank">
-    <rect width="100%" height="100%" rx="${CARD_RADIUS}" fill="#ffffff" stroke="#e5e7eb" />
-    <text x="${HEADER_TEXT_X}" y="${HEADER_TITLE_Y}" font-size="15" font-weight="600" fill="#111827">${escapeXml(headerText)}</text>
+    <rect width="100%" height="100%" rx="${CARD_RADIUS}" class="bg" />
+    <text x="${HEADER_TEXT_X}" y="${HEADER_TITLE_Y}" font-size="15" font-weight="600" class="title">${escapeXml(headerText)}</text>
 
     ${months}
     ${weekdays}
@@ -281,7 +330,10 @@ function renderLogo(width: number, height: number): string {
   const x = width - RIGHT_GUTTER - LOGO_WIDTH;
   const y = height - FOOTER_HEIGHT + 1;
 
-  return `<image x="${x}" y="${y}" width="${LOGO_WIDTH}" height="${LOGO_HEIGHT}" href="${LOGO_URL}" />`;
+  return (
+    `<image class="logo-light" x="${x}" y="${y}" width="${LOGO_WIDTH}" height="${LOGO_HEIGHT}" href="${LOGO_URL_LIGHT}" />` +
+    `<image class="logo-dark" x="${x}" y="${y}" width="${LOGO_WIDTH}" height="${LOGO_HEIGHT}" href="${LOGO_URL_DARK}" />`
+  );
 }
 
 function subtractUtcMonths(date: Date, months: number): Date {