diff --git a/website/src/layouts/Base.astro b/website/src/layouts/Base.astro
index a412ad1..6bc21ec 100644
--- a/website/src/layouts/Base.astro
+++ b/website/src/layouts/Base.astro
@@ -42,6 +42,15 @@ const {
     />
 
     <title>{title}</title>
+
+    <!-- Theme init (FOUC prevention) -->
+    <script is:inline>
+      (function () {
+        var saved = localStorage.getItem('theme');
+        var theme = saved || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+        if (theme === 'light') document.documentElement.setAttribute('data-theme', 'light');
+      })();
+    </script>
   </head>
   <body class="min-h-screen bg-deep font-body text-warm-100 antialiased">
     <!-- Navigation -->
@@ -63,6 +72,19 @@ const {
           <a href="#get-started" class="text-sm text-warm-400 transition hover:text-warm-50"
             >Get Started</a
           >
+          <button
+            class="theme-toggle"
+            id="theme-toggle-desktop"
+            type="button"
+            aria-label="Switch to light theme"
+          >
+            <svg class="icon-sun" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+            </svg>
+            <svg class="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+            </svg>
+          </button>
           <a
             href="https://github.com/davidkaya/aryx"
             target="_blank"
@@ -108,6 +130,19 @@ const {
             rel="noopener noreferrer"
             class="text-sm text-warm-400 transition hover:text-warm-50">GitHub</a
           >
+          <button
+            class="theme-toggle self-start"
+            id="theme-toggle-mobile"
+            type="button"
+            aria-label="Switch to light theme"
+          >
+            <svg class="icon-sun" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+            </svg>
+            <svg class="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+            </svg>
+          </button>
         </div>
       </div>
     </nav>
@@ -185,5 +220,55 @@ const {
       );
       document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
     </script>
+
+    <!-- Theme toggle + screenshot swap -->
+    <script>
+      function getTheme() {
+        return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+      }
+
+      function applyTheme(theme) {
+        if (theme === 'light') {
+          document.documentElement.setAttribute('data-theme', 'light');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
+        localStorage.setItem('theme', theme);
+
+        // Update meta theme-color
+        var meta = document.querySelector('meta[name="theme-color"]');
+        if (meta) meta.setAttribute('content', theme === 'light' ? '#f6f4f1' : '#08080a');
+
+        // Update aria-labels
+        var label = theme === 'light' ? 'Switch to dark theme' : 'Switch to light theme';
+        document.querySelectorAll('.theme-toggle').forEach(function (btn) {
+          btn.setAttribute('aria-label', label);
+        });
+
+        // Swap themed images
+        document.querySelectorAll('[data-src-dark]').forEach(function (img) {
+          img.setAttribute('src', theme === 'light' ? img.getAttribute('data-src-light') : img.getAttribute('data-src-dark'));
+        });
+      }
+
+      function toggleTheme() {
+        applyTheme(getTheme() === 'light' ? 'dark' : 'light');
+      }
+
+      // Bind toggle buttons
+      document.querySelectorAll('.theme-toggle').forEach(function (btn) {
+        btn.addEventListener('click', toggleTheme);
+      });
+
+      // Apply on load (screenshots + aria)
+      applyTheme(getTheme());
+
+      // Listen for system preference changes
+      matchMedia('(prefers-color-scheme: light)').addEventListener('change', function (e) {
+        if (!localStorage.getItem('theme')) {
+          applyTheme(e.matches ? 'light' : 'dark');
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 0a5a955..bde4e91 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -109,6 +109,8 @@ import Base from '../layouts/Base.astro';
           <div class="overflow-hidden rounded-[13px]">
             <img
               src="/images/screenshot.png"
+              data-src-dark="/images/screenshot.png"
+              data-src-light="/images/screenshot-light.png"
               alt="Aryx application screenshot showing the workspace with chat, sidebar, and activity panel"
               class="w-full"
               width="1280"
@@ -686,6 +688,8 @@ import Base from '../layouts/Base.astro';
           <div class="overflow-hidden rounded-[13px]">
             <img
               src="/images/screenshot-orchestration.png"
+              data-src-dark="/images/screenshot-orchestration.png"
+              data-src-light="/images/screenshot-orchestration-light.png"
               alt="Aryx workspace showing multi-agent orchestration in action"
               class="w-full"
               width="1280"
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index bdb660c..33718f6 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -30,6 +30,31 @@
   --color-accent-dim: #5A20E0;
 }
 
+/* ── Light mode token overrides ── */
+[data-theme='light'] {
+  --color-deep: #f6f4f1;
+  --color-base: #efede9;
+  --color-raised: #e7e4df;
+  --color-card: #ffffff;
+  --color-card-hover: #f9f8f6;
+  --color-border: #d8d4cd;
+  --color-border-subtle: #e5e2dc;
+
+  --color-warm-50: #1a1917;
+  --color-warm-100: #2e2c28;
+  --color-warm-200: #403d38;
+  --color-warm-300: #5e5950;
+  --color-warm-400: #7d776e;
+  --color-warm-500: #9e9890;
+  --color-warm-600: #c4bfb5;
+  --color-warm-700: #d8d4cd;
+  --color-warm-800: #eae7e2;
+
+  --color-brand: #1a4fd4;
+  --color-brand-bright: #1d7ae0;
+  --color-accent: #7522c9;
+}
+
 /* ── Grain overlay ── */
 body::after {
   content: '';
@@ -42,6 +67,9 @@ body::after {
   background-repeat: repeat;
   background-size: 256px 256px;
 }
+[data-theme='light'] body::after {
+  opacity: 0.04;
+}
 
 /* ── Dot grid ── */
 .dot-grid {
@@ -52,6 +80,13 @@ body::after {
   );
   background-size: 28px 28px;
 }
+[data-theme='light'] .dot-grid {
+  background-image: radial-gradient(
+    circle,
+    rgba(26, 79, 212, 0.10) 1px,
+    transparent 1px
+  );
+}
 
 /* ── Screenshot perspective tilt ── */
 .screenshot-frame {
@@ -116,3 +151,44 @@ body::after {
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
+[data-theme='light'] .text-gradient-brand {
+  background: linear-gradient(135deg, #1a4fd4, #7522c9);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ── Screenshot frame light-mode shadow ── */
+[data-theme='light'] .screenshot-frame {
+  --tw-shadow-color: rgba(0, 0, 0, 0.08);
+  --tw-ring-color: rgba(0, 0, 0, 0.04);
+}
+
+/* ── Theme toggle ── */
+.theme-toggle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-warm-400);
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+.theme-toggle:hover {
+  color: var(--color-warm-50);
+  background: var(--color-raised);
+}
+.theme-toggle svg {
+  width: 1.125rem;
+  height: 1.125rem;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+}
+.theme-toggle .icon-sun { display: none; }
+.theme-toggle .icon-moon { display: block; }
+[data-theme='light'] .theme-toggle .icon-sun { display: block; }
+[data-theme='light'] .theme-toggle .icon-moon { display: none; }
