diff --git a/src/components/Header.astro b/src/components/Header.astro
index 56c8601..e2ebe21 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,4 +1,5 @@
 ---
+import { Icon } from 'astro-icon/components';
 const navLinks = [
   { href: '/projects', label: 'Projects' },
   { href: '/webring', label: 'Webring' },
@@ -11,21 +12,40 @@ const path = Astro.url.pathname;
     <a href="/projects" class="text-lg font-bold tracking-tight">
       Carleton Computer Science <span class="text-accent">Showcase</span>
     </a>
-    <nav class="flex gap-5 text-sm">
-      {
-        navLinks.map(({ href, label }) => (
-          <a
-            href={href}
-            aria-current={path.startsWith(href) ? 'page' : undefined}
-            class:list={[
-              'hover:text-accent transition-colors',
-              path.startsWith(href) ? 'text-accent' : 'text-muted',
-            ]}
-          >
-            {label}
-          </a>
-        ))
-      }
-    </nav>
+    <div class="grouped flex items-center gap-5">
+      <nav class="flex gap-5 text-sm">
+        {
+          navLinks.map(({ href, label }) => (
+            <a
+              href={href}
+              aria-current={path.startsWith(href) ? 'page' : undefined}
+              class:list={[
+                'hover:text-accent transition-colors',
+                path.startsWith(href) ? 'text-accent' : 'text-muted',
+              ]}
+            >
+              {label}
+            </a>
+          ))
+        }
+      </nav>
+      <button
+        id="theme-toggle"
+        type="button"
+        aria-label="Toggle dark mode"
+        class="text-muted hover:text-accent inline-flex items-center justify-center transition-colors"
+      >
+        <!-- Import Lucide Icons -->
+        <Icon name="lucide:sun" class="hidden size-5 dark:inline" />
+        <Icon name="lucide:moon" class="size-5 dark:hidden" />
+      </button>
+    </div>
   </div>
 </header>
+
+<script is:inline>
+  document.getElementById('theme-toggle')?.addEventListener('click', () => {
+    const isDark = document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  });
+</script>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 3977cc9..73a6cc7 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -16,6 +16,16 @@ const {
 
 <html lang="en">
   <head>
+    <!-- Checks whether user set to dark mode or prefers-color-scheme is dark -->
+    <script is:inline>
+      const saved = localStorage.getItem('theme');
+      if (
+        saved === 'dark' ||
+        (!saved && matchMedia('(prefers-color-scheme: dark)').matches)
+      ) {
+        document.documentElement.classList.add('dark');
+      }
+    </script>
     <meta charset="utf-8" />
     <!-- Favicon: add files to public/ then uncomment (favicon ticket)
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
diff --git a/src/styles/global.css b/src/styles/global.css
index daf40f9..4923d32 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@custom-variant dark (&:where(.dark, .dark *));
 
 /*
  * Design tokens (Carleton theme, light mode).
@@ -29,6 +30,16 @@
   --radius-card: 0.75rem;
 }
 
+html.dark {
+  --color-canvas: #1b1b1b; /* Carleton black — page background */
+  --color-surface: #242526; /* cards, panels — a step lighter than canvas */
+  --color-ink: #f4f3f1; /* primary text — the light off-white */
+  --color-muted: #9a9a9a; /* secondary text */
+  --color-accent: #ff3b3b; /* slightly brightened Carleton red for dark bg */
+  --color-accent-contrast: #ffffff; /* text/icons on an accent fill */
+  --color-line: #2c2c2c; /* borders, dividers */
+}
+
 @layer base {
   html {
     background-color: var(--color-canvas);
