Add a dark theme, default, with a switch in the top bar

Colours move into theme tokens (light values in :root, dark in
[data-theme=dark]); the closing contact band inverts on each theme. The
choice is stored in localStorage and applied by a head script before the
first paint. Voxel covers and image shadows follow the theme.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9

components/Cover.tsx

@@ -26,7 +26,7 @@ const GRID = 5
 const TILE = 54
 const RISE = 30
 const ACCENTS = ['#e0384b', '#5aa300', '#2c63e0']
-const NEUTRAL = { top: '#f9fafb', left: '#d6dbe2', right: '#b8c0cb' }
+const NEUTRAL = { top: 'var(--cube-top)', left: 'var(--cube-left)', right: 'var(--cube-right)' }
 
 function mix(hex: string, other: number, amount: number): string {
   const channel = (i: number) => parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16)
@@ -82,7 +82,7 @@ export default function Cover({ name }: Readonly<{ name: string }>) {
             key={n}
             points={face([point(i, j, 0, 0, 0), point(i, j, 0, TILE / 2, TILE / 4), point(i, j, 0, 0, TILE / 2), point(i, j, 0, -TILE / 2, TILE / 4)])}
             fill="none"
-            stroke="rgba(21,24,29,0.09)"
+            style={{ stroke: 'var(--cover-grid)' }}
           />
         )
       })}
@@ -90,10 +90,10 @@ export default function Cover({ name }: Readonly<{ name: string }>) {
         const z = (k + 1) * RISE
         const base = k * RISE
         return (
-          <g key={`${i}-${j}-${k}`} strokeLinejoin="round" stroke="rgba(21,24,29,0.16)" strokeWidth="0.75">
-            <polygon points={face([point(i, j, z, -TILE / 2, TILE / 4), point(i, j, z, 0, TILE / 2), point(i, j, base, 0, TILE / 2), point(i, j, base, -TILE / 2, TILE / 4)])} fill={left} />
-            <polygon points={face([point(i, j, z, 0, TILE / 2), point(i, j, z, TILE / 2, TILE / 4), point(i, j, base, TILE / 2, TILE / 4), point(i, j, base, 0, TILE / 2)])} fill={right} />
-            <polygon points={face([point(i, j, z, 0, 0), point(i, j, z, TILE / 2, TILE / 4), point(i, j, z, 0, TILE / 2), point(i, j, z, -TILE / 2, TILE / 4)])} fill={top} />
+          <g key={`${i}-${j}-${k}`} strokeLinejoin="round" strokeWidth="0.75" style={{ stroke: 'var(--cube-edge)' }}>
+            <polygon points={face([point(i, j, z, -TILE / 2, TILE / 4), point(i, j, z, 0, TILE / 2), point(i, j, base, 0, TILE / 2), point(i, j, base, -TILE / 2, TILE / 4)])} style={{ fill: left }} />
+            <polygon points={face([point(i, j, z, 0, TILE / 2), point(i, j, z, TILE / 2, TILE / 4), point(i, j, base, TILE / 2, TILE / 4), point(i, j, base, 0, TILE / 2)])} style={{ fill: right }} />
+            <polygon points={face([point(i, j, z, 0, 0), point(i, j, z, TILE / 2, TILE / 4), point(i, j, z, 0, TILE / 2), point(i, j, z, -TILE / 2, TILE / 4)])} style={{ fill: top }} />
           </g>
         )
       })}

components/ThemeToggle.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import styles from './topbar.module.css'
+
+type Theme = 'dark' | 'light'
+
+/** Switches between the dark (default) and light theme; the choice is remembered in this browser. */
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>('dark')
+
+  // The page starts dark; a small script in <head> applies a stored "light" choice before the first paint.
+  useEffect(() => {
+    setTheme(document.documentElement.dataset.theme === 'light' ? 'light' : 'dark')
+  }, [])
+
+  const toggle = () => {
+    const next: Theme = theme === 'dark' ? 'light' : 'dark'
+    document.documentElement.dataset.theme = next
+    try {
+      localStorage.setItem('theme', next)
+    } catch {
+      // Storage can be blocked; the theme still switches for this visit.
+    }
+    setTheme(next)
+  }
+
+  return (
+    <button
+      type="button"
+      className={styles.toggle}
+      onClick={toggle}
+      aria-label={theme === 'dark' ? 'Switch to the light theme' : 'Switch to the dark theme'}
+    >
+      {theme === 'dark' ? (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2.5v2.2M12 19.3v2.2M4.2 4.2l1.6 1.6M18.2 18.2l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.2 19.8l1.6-1.6M18.2 5.8l1.6-1.6" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M20.5 14.2A8.5 8.5 0 0 1 9.8 3.5a8.5 8.5 0 1 0 10.7 10.7z" />
+        </svg>
+      )}
+    </button>
+  )
+}

components/TopBar.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useScrolled } from '@/lib/useScroll'
+import ThemeToggle from './ThemeToggle'
 import styles from './topbar.module.css'
 
 type Props = { name: string; mailHref: string; showProjects: boolean }
@@ -17,6 +18,7 @@ export default function TopBar({ name, mailHref, showProjects }: Readonly<Props>
           <a href="#experience">Experience</a>
           <a href="#education">Education</a>
         </nav>
+        <ThemeToggle />
         <a className={styles.mail} href={mailHref}>Email me</a>
       </div>
     </header>

components/gizmo.module.css

@@ -8,8 +8,8 @@
   padding: 0;
   border: 0;
   border-radius: 50%;
-  background: rgba(244, 246, 248, 0.62);
-  box-shadow: 0 0 0 1px rgba(21, 24, 29, 0.08);
+  background: var(--disc-bg);
+  box-shadow: 0 0 0 1px var(--ring);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   cursor: pointer;

components/hero.module.css

@@ -6,7 +6,7 @@
   flex-direction: column;
   min-height: min(100svh, 1000px);
   overflow: clip;
-  background: linear-gradient(180deg, #f5f7fa 0%, #e6e9ee 100%);
+  background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
 }
 
 /* The floor is a stage of its own below the text, so the grid never runs through the copy at any window height. */
@@ -15,8 +15,8 @@
   flex: 1;
   min-height: 260px;
   overflow: hidden;
-  background: linear-gradient(180deg, #d8dde4 0%, var(--studio-deep) 100%);
-  border-top: 1px solid rgba(21, 24, 29, 0.2);
+  background: linear-gradient(180deg, var(--stage-top) 0%, var(--stage-bottom) 100%);
+  border-top: 1px solid var(--horizon);
 }
 
 .stage::after {
@@ -44,8 +44,8 @@
   transform-origin: 50% 0;
   transform: rotateX(76deg) rotateZ(var(--sway));
   background-image:
-    linear-gradient(to right, rgba(21, 24, 29, 0.2) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(21, 24, 29, 0.2) 1px, transparent 1px);
+    linear-gradient(to right, var(--grid) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
   background-size: 80px 80px;
   background-position: center top;
   -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
@@ -89,7 +89,7 @@
   max-width: 100%;
   padding: 8px 16px 8px 13px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--pill-bg);
   box-shadow: inset 0 0 0 1px var(--line);
   font-size: 15px;
   font-weight: 500;
@@ -102,12 +102,12 @@
   height: 9px;
   border-radius: 50%;
   background: var(--y);
-  box-shadow: 0 0 0 4px rgba(90, 163, 0, 0.2);
+  box-shadow: 0 0 0 4px var(--dot-glow);
 }
 
 .name {
   margin: 30px 0 0 -0.045em;
-  font: 800 clamp(56px, 12.6vw, 204px) / 0.88 var(--font-head);
+  font: var(--name-weight) clamp(56px, 12.6vw, 204px) / 0.88 var(--font-head);
   letter-spacing: -0.048em;
 }
 
@@ -122,7 +122,7 @@
   margin-top: 44px;
   font-size: 19px;
   line-height: 1.62;
-  color: rgba(21, 24, 29, 0.88);
+  color: var(--ink-2);
 }
 
 .actions {

components/projects.module.css

@@ -57,8 +57,8 @@
   aspect-ratio: 3 / 2;
   overflow: hidden;
   border-radius: var(--radius-plate);
-  background: radial-gradient(120% 90% at 50% 0%, #f3f5f8 0%, var(--studio) 55%, #d3d9e0 100%);
-  box-shadow: inset 0 0 0 1px rgba(21, 24, 29, 0.09);
+  background: radial-gradient(120% 90% at 50% 0%, var(--plate-a) 0%, var(--plate-b) 55%, var(--plate-c) 100%);
+  box-shadow: inset 0 0 0 1px var(--ring);
 }
 
 .plate img,
@@ -76,7 +76,7 @@
   position: relative;
   object-fit: contain;
   padding: 6%;
-  filter: drop-shadow(0 10px 24px rgba(21, 24, 29, 0.28));
+  filter: drop-shadow(0 10px 24px var(--img-shadow));
 }
 
 .backdrop {
@@ -108,14 +108,14 @@
 
 .description {
   max-width: 62ch;
-  color: rgba(21, 24, 29, 0.86);
+  color: var(--ink-2);
 }
 
 .points {
   display: grid;
   gap: 4px;
   font-size: 15px;
-  color: rgba(21, 24, 29, 0.78);
+  color: var(--ink-3);
 }
 
 .points li {
@@ -168,7 +168,7 @@
   text-decoration: underline;
   text-decoration-thickness: 1.5px;
   text-underline-offset: 4px;
-  text-decoration-color: rgba(21, 24, 29, 0.3);
+  text-decoration-color: var(--ink-line);
   transition: text-decoration-color 0.2s, color 0.2s;
 }
 
@@ -187,7 +187,7 @@
 .skeleton span {
   aspect-ratio: 3 / 2;
   border-radius: var(--radius-plate);
-  background: linear-gradient(160deg, #eef1f4, var(--studio));
+  background: linear-gradient(160deg, var(--plate-a), var(--plate-c));
 }
 
 @media (min-width: 641px) and (max-width: 1000px) {

components/sections.module.css

@@ -36,7 +36,7 @@
 
 .skill p {
   max-width: 52ch;
-  color: rgba(21, 24, 29, 0.82);
+  color: var(--ink-2);
 }
 
 .tags {
@@ -49,7 +49,7 @@
 .tags li {
   padding: 3px 11px;
   border-radius: 999px;
-  background: rgba(21, 24, 29, 0.06);
+  background: var(--chip);
   font-size: 13.5px;
   line-height: 1.5;
 }
@@ -136,8 +136,8 @@
 .contact {
   margin-top: var(--section);
   padding: clamp(72px, 9vw, 128px) 0 40px;
-  background: var(--ink);
-  color: var(--paper);
+  background: var(--band-bg);
+  color: var(--band-ink);
 }
 
 .contactTitle {
@@ -147,7 +147,7 @@
 
 .contactLead {
   margin-top: 16px;
-  color: rgba(244, 246, 248, 0.7);
+  color: var(--band-2);
 }
 
 .mail {
@@ -177,19 +177,19 @@
   flex-direction: column;
   gap: 2px;
   padding: 18px 0;
-  border-top: 1px solid rgba(244, 246, 248, 0.2);
+  border-top: 1px solid var(--band-line);
 }
 
 .contacts span {
   font-size: 14px;
-  color: rgba(244, 246, 248, 0.6);
+  color: var(--band-3);
 }
 
 .contacts a {
   text-decoration: underline;
   text-decoration-thickness: 1.5px;
   text-underline-offset: 4px;
-  text-decoration-color: rgba(244, 246, 248, 0.35);
+  text-decoration-color: var(--band-underline);
   overflow-wrap: anywhere;
 }
 
@@ -200,7 +200,7 @@
 .legal {
   margin-top: clamp(48px, 6vw, 80px);
   font-size: 14px;
-  color: rgba(244, 246, 248, 0.55);
+  color: var(--band-3);
 }
 
 @media (max-width: 900px) {

components/topbar.module.css

@@ -7,7 +7,7 @@
 }
 
 .solid {
-  background: rgba(244, 246, 248, 0.86);
+  background: var(--topbar-bg);
   border-bottom-color: var(--line);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
@@ -48,6 +48,7 @@
 }
 
 .mail {
+  margin-left: -12px;
   padding: 10px 18px;
   border-radius: var(--radius-control);
   background: var(--ink);
@@ -67,3 +68,32 @@
     display: none;
   }
 }
+
+.toggle {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: var(--ink);
+  box-shadow: inset 0 0 0 1px var(--line);
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+
+.toggle:hover {
+  box-shadow: inset 0 0 0 1.5px var(--ink);
+}
+
+.toggle svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}