diff --git a/README.md b/README.md
index 46e378c..d10b0dd 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,10 @@ npm run build      # static export in out/
 
 `./deploy-shanaty.sh` builds and publishes the site to shanaty.ru (needs the ssh key `~/.ssh/MyGitea`). Only needed after changing code or styles.
 
+## Themes
+
+The page is **dark by default** (a night version of the viewport: graphite backdrop, brighter axis colours, and a light closing contact band). A button in the top bar switches to the light theme; the choice is remembered in the browser and applied before the first paint, so there is no flash. Colours live in the tokens at the top of `app/globals.css` (`:root` for light, `:root[data-theme='dark']` for dark); components only use those tokens, so a new theme is a new block of values.
+
 ## Design
 
 The page is laid out like a 3D-editor viewport, a nod to the game-engine work it presents: a studio backdrop with a perspective floor whose red X and blue Z axes match the axis colours of Blender and Unity, and an orientation gizmo in the corner that orbits as the page scrolls (press it to go back to the top). Projects without a demo image get a deterministic isometric voxel sculpture generated from the repo name.
diff --git a/app/globals.css b/app/globals.css
index a8872ec..3af2eef 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,16 +1,59 @@
 /* Design tokens: a studio-lit 3D viewport. Axis colours (X red, Y green, Z blue) are marks and lines, not text. */
 :root {
-  --studio: #e6e9ed;
-  --studio-deep: #cdd3db;
+  color-scheme: light;
+
+  /* Palette. The page is a 3D viewport: a studio backdrop and the three axis colours (X red, Y green, Z blue),
+     which are marks and lines rather than text. Dark is the default theme; see :root[data-theme='dark']. */
   --paper: #f4f6f8;
   --ink: #15181d;
   --muted: #5b6571;
-  --line: rgba(21, 24, 29, 0.14);
   --x: #e0384b;
   --y: #5aa300;
   --z: #2c63e0;
   --z-text: #2455c9;
 
+  /* Surfaces */
+  --hero-top: #f5f7fa;
+  --hero-bottom: #e6e9ee;
+  --stage-top: #d8dde4;
+  --stage-bottom: #cdd3db;
+  --plate-a: #f3f5f8;
+  --plate-b: #e6e9ed;
+  --plate-c: #d3d9e0;
+  --pill-bg: rgba(255, 255, 255, 0.72);
+  --disc-bg: rgba(244, 246, 248, 0.62);
+  --topbar-bg: rgba(244, 246, 248, 0.86);
+  --grid: rgba(21, 24, 29, 0.2);
+  --img-shadow: rgba(21, 24, 29, 0.28);
+  --dot-glow: rgba(90, 163, 0, 0.2);
+
+  /* Voxel covers of projects without a demo image */
+  --cube-top: #f9fafb;
+  --cube-left: #d6dbe2;
+  --cube-right: #b8c0cb;
+  --cube-edge: rgba(21, 24, 29, 0.16);
+  --cover-grid: rgba(21, 24, 29, 0.09);
+
+  /* The closing contact band is the inverse of the page */
+  --band-bg: #15181d;
+  --band-ink: #f4f6f8;
+
+  /* Light type on a dark ground looks heavier, so the display weight is eased off there */
+  --name-weight: 800;
+
+  /* Derived from the palette above, so they follow the theme */
+  --line: color-mix(in srgb, var(--ink) 14%, transparent);
+  --ring: color-mix(in srgb, var(--ink) 9%, transparent);
+  --horizon: color-mix(in srgb, var(--ink) 22%, transparent);
+  --chip: color-mix(in srgb, var(--ink) 7%, transparent);
+  --ink-2: color-mix(in srgb, var(--ink) 86%, transparent);
+  --ink-3: color-mix(in srgb, var(--ink) 76%, transparent);
+  --ink-line: color-mix(in srgb, var(--ink) 32%, transparent);
+  --band-2: color-mix(in srgb, var(--band-ink) 70%, transparent);
+  --band-3: color-mix(in srgb, var(--band-ink) 58%, transparent);
+  --band-line: color-mix(in srgb, var(--band-ink) 22%, transparent);
+  --band-underline: color-mix(in srgb, var(--band-ink) 38%, transparent);
+
   --radius-plate: 18px;
   --radius-control: 10px;
   --shell: min(1240px, calc(100% - 48px));
@@ -21,6 +64,42 @@
   --font-head: var(--font-display), 'Segoe UI', system-ui, sans-serif;
 }
 
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --paper: #1c2026;
+  --ink: #e9edf2;
+  --muted: #9aa5b1;
+  --x: #ff5a6e;
+  --y: #86d62c;
+  --z: #5b8dff;
+  --z-text: #8db0ff;
+
+  --hero-top: #282d35;
+  --hero-bottom: #1c2026;
+  --stage-top: #14171b;
+  --stage-bottom: #0f1114;
+  --plate-a: #363c46;
+  --plate-b: #2a2f37;
+  --plate-c: #1f2329;
+  --pill-bg: rgba(255, 255, 255, 0.07);
+  --disc-bg: rgba(40, 45, 53, 0.72);
+  --topbar-bg: rgba(28, 32, 38, 0.86);
+  --grid: rgba(255, 255, 255, 0.15);
+  --img-shadow: rgba(0, 0, 0, 0.55);
+  --dot-glow: rgba(134, 214, 44, 0.24);
+
+  --cube-top: #e9edf2;
+  --cube-left: #9aa5b3;
+  --cube-right: #69737f;
+  --cube-edge: rgba(0, 0, 0, 0.4);
+  --cover-grid: rgba(255, 255, 255, 0.09);
+
+  --band-bg: #e8ebef;
+  --band-ink: #15181d;
+
+  --name-weight: 730;
+}
+
 * { box-sizing: border-box; }
 html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 88px; }
 body {
diff --git a/app/layout.tsx b/app/layout.tsx
index 40a057a..534ad2a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,9 +12,15 @@ export const metadata: Metadata = {
   authors: [{ name: 'Emil Shanayev' }],
 }
 
+// Dark is the default theme; a stored choice of "light" is applied before the first paint so the page never flashes.
+const THEME_SCRIPT = "try{if(localStorage.getItem('theme')==='light')document.documentElement.dataset.theme='light'}catch(e){}"
+
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" className={`${display.variable} ${text.variable}`}>
+    <html lang="en" data-theme="dark" className={`${display.variable} ${text.variable}`} suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
+      </head>
       <body>{children}</body>
     </html>
   )
diff --git a/components/Cover.tsx b/components/Cover.tsx
index 70fbcfe..b4cb92a 100644
--- a/components/Cover.tsx
+++ b/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>
         )
       })}
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..c94485a
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 24c1d92..57c832d 100644
--- a/components/TopBar.tsx
+++ b/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>
diff --git a/components/gizmo.module.css b/components/gizmo.module.css
index ca064e9..3885672 100644
--- a/components/gizmo.module.css
+++ b/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;
diff --git a/components/hero.module.css b/components/hero.module.css
index 5bed102..b47f5fd 100644
--- a/components/hero.module.css
+++ b/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 {
diff --git a/components/projects.module.css b/components/projects.module.css
index cf5011a..1e40148 100644
--- a/components/projects.module.css
+++ b/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) {
diff --git a/components/sections.module.css b/components/sections.module.css
index e62bd7d..74815df 100644
--- a/components/sections.module.css
+++ b/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) {
diff --git a/components/topbar.module.css b/components/topbar.module.css
index 6b34037..0c8fd81 100644
--- a/components/topbar.module.css
+++ b/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;
+}