diff --git a/site/src/components/ActivityCharts.svelte b/site/src/components/ActivityCharts.svelte
index f79ceea..4a3f807 100644
--- a/site/src/components/ActivityCharts.svelte
+++ b/site/src/components/ActivityCharts.svelte
@@ -185,7 +185,7 @@
 
     return Plot.plot({
       width: w, height: h, marginLeft: 48, marginBottom: 32,
-      style: { background: 'transparent', color: '#a1a1aa', fontSize: '11px' },
+      style: { background: 'transparent', color: 'var(--text-4, #a1a1aa)', fontSize: '11px' },
       x: { label: null, tickFormat: xTickFormat, grid: false, ticks: 6 },
       y: { label: yLabel, grid: true, tickCount: 4 },
       marks,
@@ -216,7 +216,7 @@
 
       return Plot.plot({
         width: w, height: h, marginLeft: 48, marginBottom: 32,
-        style: { background: 'transparent', color: '#a1a1aa', fontSize: '11px' },
+        style: { background: 'transparent', color: 'var(--text-4, #a1a1aa)', fontSize: '11px' },
         x: { label: yLabel, grid: false, domain: [clampedZones[0][0], clampedZones[clampedZones.length - 1][1]] },
         y: { label: 'Time', grid: true, tickCount: 4, tickFormat: yTickFormat },
         marks: [
@@ -274,7 +274,7 @@
 
     return Plot.plot({
       width: w, height: h, marginLeft: 48, marginBottom: 32,
-      style: { background: 'transparent', color: '#a1a1aa', fontSize: '11px' },
+      style: { background: 'transparent', color: 'var(--text-4, #a1a1aa)', fontSize: '11px' },
       x: { label: yLabel, grid: false, ticks: 6, domain: [trimMin, trimMax] },
       y: { label: 'Time', grid: true, tickCount: 4, tickFormat: yTickFormat },
       marks,
diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro
index 93bd395..4548def 100644
--- a/site/src/layouts/Base.astro
+++ b/site/src/layouts/Base.astro
@@ -6,36 +6,134 @@ interface Props {
 const { title = 'BincioActivity', description = 'Your personal activity stats' } = Astro.props;
 ---
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" data-theme="dark">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content={description} />
   <title>{title}</title>
-<style is:global>
-    :root {
-      --accent: #00c8ff;
-      --accent-dim: rgba(0,200,255,0.15);
+
+  <!-- Set theme before first paint to avoid flash -->
+  <script is:inline>
+    const t = localStorage.getItem('bincio-theme') || 'dark';
+    document.documentElement.setAttribute('data-theme', t);
+  </script>
+
+  <style is:global>
+    /* ── Theme tokens ─────────────────────────────────────────────────────── */
+    :root, [data-theme="dark"] {
+      --bg-base:      #09090b;  /* zinc-950 */
+      --bg-card:      #18181b;  /* zinc-900 */
+      --bg-elevated:  #27272a;  /* zinc-800 */
+      --bg-subtle:    #3f3f46;  /* zinc-700 */
+      --text-primary: #ffffff;
+      --text-2:       #e4e4e7;  /* zinc-200 */
+      --text-3:       #d4d4d8;  /* zinc-300 */
+      --text-4:       #a1a1aa;  /* zinc-400 */
+      --text-5:       #71717a;  /* zinc-500 */
+      --border:       #27272a;  /* zinc-800 */
+      --border-sub:   #3f3f46;  /* zinc-700 */
+      --accent:       #00c8ff;
+      --accent-dim:   rgba(0,200,255,0.15);
     }
+
+    [data-theme="light"] {
+      --bg-base:      #fafafa;  /* zinc-50  */
+      --bg-card:      #f4f4f5;  /* zinc-100 */
+      --bg-elevated:  #e4e4e7;  /* zinc-200 */
+      --bg-subtle:    #d4d4d8;  /* zinc-300 */
+      --text-primary: #18181b;  /* zinc-900 */
+      --text-2:       #27272a;  /* zinc-800 */
+      --text-3:       #3f3f46;  /* zinc-700 */
+      --text-4:       #52525b;  /* zinc-600 */
+      --text-5:       #71717a;  /* zinc-500 */
+      --border:       #e4e4e7;  /* zinc-200 */
+      --border-sub:   #d4d4d8;  /* zinc-300 */
+      --accent:       #0284c7;  /* sky-600  */
+      --accent-dim:   rgba(2,132,199,0.12);
+    }
+
+    /* ── Tailwind zinc overrides for light mode ────────────────────────────
+       Overrides hardcoded Tailwind classes from all components in one place.
+       !important needed to beat Tailwind's generated specificity.          */
+    [data-theme="light"] .bg-zinc-950  { background-color: var(--bg-base)     !important; }
+    [data-theme="light"] .bg-zinc-900  { background-color: var(--bg-card)     !important; }
+    [data-theme="light"] .bg-zinc-800  { background-color: var(--bg-elevated) !important; }
+    [data-theme="light"] .bg-zinc-700  { background-color: var(--bg-subtle)   !important; }
+
+    [data-theme="light"] .text-white   { color: var(--text-primary) !important; }
+    [data-theme="light"] .text-zinc-100{ color: var(--text-primary) !important; }
+    [data-theme="light"] .text-zinc-200{ color: var(--text-2)       !important; }
+    [data-theme="light"] .text-zinc-300{ color: var(--text-3)       !important; }
+    [data-theme="light"] .text-zinc-400{ color: var(--text-4)       !important; }
+    [data-theme="light"] .text-zinc-500{ color: var(--text-5)       !important; }
+
+    [data-theme="light"] .border-zinc-800 { border-color: var(--border)     !important; }
+    [data-theme="light"] .border-zinc-700 { border-color: var(--border-sub) !important; }
+
+    /* Opacity variants (nav backdrop, tooltips, overlays) */
+    [data-theme="light"] .bg-zinc-950\/90 { background-color: rgba(250,250,250,0.92) !important; }
+    [data-theme="light"] .bg-zinc-900\/95 { background-color: rgba(244,244,245,0.95) !important; }
+
+    /* Soften shadows in light mode */
+    [data-theme="light"] .shadow-2xl {
+      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.12) !important;
+    }
+
+    /* ── Base reset ─────────────────────────────────────────────────────── */
     * { box-sizing: border-box; }
     html { scroll-behavior: smooth; }
     body { margin: 0; }
-    /* MapLibre GL needs these */
     .maplibregl-canvas { outline: none; }
   </style>
 </head>
-<body class="bg-zinc-950 text-zinc-100 font-sans antialiased min-h-screen">
-  <nav class="border-b border-zinc-800 sticky top-0 z-50 bg-zinc-950/90 backdrop-blur">
+<body
+  class="font-sans antialiased min-h-screen"
+  style="background-color: var(--bg-base); color: var(--text-primary)"
+>
+  <nav
+    class="border-b border-zinc-800 sticky top-0 z-50 bg-zinc-950/90 backdrop-blur"
+    style="border-color: var(--border)"
+  >
     <div class="max-w-7xl mx-auto px-4 h-12 flex items-center gap-6">
       <a href="/" class="font-bold text-white tracking-tight hover:text-[--accent] transition-colors">
         Bincio<span class="text-[--accent]">Activity</span>
       </a>
       <a href="/" class="text-sm text-zinc-400 hover:text-white transition-colors">Feed</a>
       <a href="/stats/" class="text-sm text-zinc-400 hover:text-white transition-colors">Stats</a>
+      <a href="/athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors">Athlete</a>
+
+      <div class="ml-auto">
+        <button
+          id="theme-toggle"
+          class="text-zinc-400 hover:text-white transition-colors w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-800 text-base"
+          aria-label="Toggle theme"
+        >☀</button>
+      </div>
     </div>
   </nav>
   <main class="max-w-7xl mx-auto px-4 py-6">
     <slot />
   </main>
+
+  <script>
+    const btn = document.getElementById('theme-toggle') as HTMLButtonElement;
+
+    function applyTheme(theme: string) {
+      document.documentElement.setAttribute('data-theme', theme);
+      localStorage.setItem('bincio-theme', theme);
+      btn.textContent = theme === 'dark' ? '☀' : '☾';
+      btn.title = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
+    }
+
+    // Sync icon with current theme (set by inline script above)
+    const current = document.documentElement.getAttribute('data-theme') || 'dark';
+    applyTheme(current);
+
+    btn.addEventListener('click', () => {
+      const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      applyTheme(next);
+    });
+  </script>
 </body>
 </html>
