diff --git a/public/style.css b/public/style.css
index 23c4fad..86b7f78 100644
--- a/public/style.css
+++ b/public/style.css
@@ -7,29 +7,60 @@
 
 /* ── Tokens ─────────────────────────────────────────────── */
 :root {
-  --black:   #000;
-  --white:   #fff;
-  --gray-50: #fafafa;
-  --gray-100:#f0f0f0;
-  --gray-200:#e0e0e0;
-  --gray-400:#999;
-  --gray-600:#555;
-  --red:     #c00;
+  --bg: #fff;
+  --bg-elevated: #f0f0f0;
+  --bg-hover: #fafafa;
+  --fg: #000;
+  --fg-muted: #555;
+  --fg-on-accent: #fff;
+  --border-color: #000;
+  --border-subtle: #e0e0e0;
+  --accent: #000;
+  --accent-hover: #555;
+  --danger: #c00;
+  --danger-bg: #fff5f5;
+  --danger-fg: #fff;
+  --input-bg: #fff;
+  --input-bg-focus: #fafafa;
+  --input-fg: #000;
+  --input-border: #000;
 
   --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --border: 1px solid var(--black);
+  --border: 1px solid var(--border-color);
   --radius: 0;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f1115;
+    --bg-elevated: #1a1d23;
+    --bg-hover: #1f2228;
+    --fg: #e5e7eb;
+    --fg-muted: #9ca3af;
+    --fg-on-accent: #0f1115;
+    --border-color: #2a2e36;
+    --border-subtle: #272b33;
+    --accent: #e5e7eb;
+    --accent-hover: #cbd0d8;
+    --danger: #f87171;
+    --danger-bg: #2a1414;
+    --danger-fg: #0f1115;
+    --input-bg: #1a1d23;
+    --input-bg-focus: #222630;
+    --input-fg: #e5e7eb;
+    --input-border: #3a3f48;
+  }
+}
+
 /* ── Base ───────────────────────────────────────────────── */
 html { font-size: 14px; }
 
 body {
   font-family: var(--font);
   line-height: 1.5;
-  background: var(--white);
-  color: var(--black);
+  background: var(--bg);
+  color: var(--fg);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -37,11 +68,11 @@ body {
 }
 
 a {
-  color: var(--black);
+  color: var(--fg);
   text-decoration: underline;
   text-underline-offset: 3px;
 }
-a:hover { color: var(--gray-600); }
+a:hover { color: var(--fg-muted); }
 
 /* ── Header ─────────────────────────────────────────────── */
 header {
@@ -59,9 +90,9 @@ header {
   font-weight: 600;
   letter-spacing: 0.02em;
   text-decoration: none;
-  color: var(--black);
+  color: var(--fg);
 }
-.logo:hover { color: var(--gray-600); }
+.logo:hover { color: var(--fg-muted); }
 
 nav {
   display: flex;
@@ -78,12 +109,12 @@ nav a {
   font-size: 12px;
   letter-spacing: 0.04em;
   text-decoration: none;
-  color: var(--gray-600);
+  color: var(--fg-muted);
   border-left: var(--border);
 }
 nav a:hover {
-  color: var(--black);
-  background: var(--gray-100);
+  color: var(--fg);
+  background: var(--bg-elevated);
 }
 
 nav form {
@@ -99,13 +130,13 @@ nav button[type="submit"] {
   background: none;
   border: none;
   border-left: var(--border);
-  color: var(--gray-600);
+  color: var(--fg-muted);
   cursor: pointer;
   font-family: var(--font);
 }
 nav button[type="submit"]:hover {
-  color: var(--black);
-  background: var(--gray-100);
+  color: var(--fg);
+  background: var(--bg-elevated);
 }
 
 /* ── Main ───────────────────────────────────────────────── */
@@ -141,7 +172,7 @@ label {
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: var(--gray-600);
+  color: var(--fg-muted);
 }
 
 input[type="text"],
@@ -151,16 +182,16 @@ input[type="file"] {
   padding: 0.6rem 0.75rem;
   font-family: var(--font);
   font-size: 16px;
-  background: var(--white);
-  border: var(--border);
-  color: var(--black);
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  color: var(--input-fg);
   outline: none;
   transition: background 0.1s;
 }
 input[type="text"]:focus,
 input[type="password"]:focus {
-  background: var(--gray-50);
-  box-shadow: inset 0 0 0 2px var(--black);
+  background: var(--input-bg-focus);
+  box-shadow: inset 0 0 0 2px var(--accent);
 }
 
 input[type="file"] {
@@ -171,8 +202,8 @@ input[type="file"]::-webkit-file-upload-button {
   font-family: var(--font);
   font-size: 11px;
   letter-spacing: 0.02em;
-  background: var(--black);
-  color: var(--white);
+  background: var(--accent);
+  color: var(--fg-on-accent);
   border: none;
   padding: 0.3rem 0.6rem;
   cursor: pointer;
@@ -182,8 +213,8 @@ input[type="file"]::file-selector-button {
   font-family: var(--font);
   font-size: 11px;
   letter-spacing: 0.02em;
-  background: var(--black);
-  color: var(--white);
+  background: var(--accent);
+  color: var(--fg-on-accent);
   border: none;
   padding: 0.3rem 0.6rem;
   cursor: pointer;
@@ -199,16 +230,17 @@ button[type="submit"],
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.02em;
-  background: var(--black);
-  color: var(--white);
-  border: var(--border);
+  background: var(--accent);
+  color: var(--fg-on-accent);
+  border: 1px solid var(--accent);
   cursor: pointer;
   transition: background 0.1s, color 0.1s;
   text-align: center;
 }
 button[type="submit"]:hover,
 .btn-primary:hover {
-  background: var(--gray-600);
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
 }
 
 /* ── Danger Button ──────────────────────────────────────── */
@@ -219,13 +251,13 @@ button.danger {
   font-size: 11px;
   letter-spacing: 0.04em;
   background: none;
-  color: var(--red);
-  border: 1px solid var(--red);
+  color: var(--danger);
+  border: 1px solid var(--danger);
   cursor: pointer;
 }
 button.danger:hover {
-  background: var(--red);
-  color: var(--white);
+  background: var(--danger);
+  color: var(--danger-fg);
 }
 
 /* ── Generic Link-button (.btn for file-view) ───────────── */
@@ -236,23 +268,23 @@ a.btn {
   font-weight: 600;
   letter-spacing: 0.02em;
   text-decoration: none;
-  background: var(--black);
-  color: var(--white);
-  border: var(--border);
+  background: var(--accent);
+  color: var(--fg-on-accent);
+  border: 1px solid var(--accent);
   transition: background 0.1s;
 }
 a.btn:hover {
-  background: var(--gray-600);
-  color: var(--white);
+  background: var(--accent-hover);
+  color: var(--fg-on-accent);
 }
 
 /* ── Error ──────────────────────────────────────────────── */
 .error {
   font-size: 12px;
-  color: var(--red);
+  color: var(--danger);
   padding: 0.6rem 0.75rem;
-  border: 1px solid var(--red);
-  background: #fff5f5;
+  border: 1px solid var(--danger);
+  background: var(--danger-bg);
   margin-bottom: 0.5rem;
 }
 
@@ -266,14 +298,14 @@ a.btn:hover {
 .share-box input[readonly] {
   flex: 1;
   font-family: var(--font-mono);
-  background: var(--gray-100);
-  color: var(--gray-600);
+  background: var(--bg-elevated);
+  color: var(--fg-muted);
   border-right: none;
   cursor: text;
 }
 .share-box input[readonly]:focus {
   box-shadow: none;
-  background: var(--gray-100);
+  background: var(--bg-elevated);
 }
 
 /* Copy button — outline style, distinct from submit */
@@ -283,8 +315,8 @@ a.btn:hover {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.02em;
-  background: var(--white);
-  color: var(--black);
+  background: var(--bg);
+  color: var(--fg);
   border: var(--border);
   cursor: pointer;
   white-space: nowrap;
@@ -292,7 +324,7 @@ a.btn:hover {
   flex-shrink: 0;
 }
 .share-box button:hover {
-  background: var(--gray-100);
+  background: var(--bg-elevated);
 }
 
 /* ── Table ──────────────────────────────────────────────── */
@@ -329,21 +361,21 @@ th {
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-align: left;
-  background: var(--gray-100);
+  background: var(--bg-elevated);
   border-bottom: var(--border);
-  color: var(--gray-600);
+  color: var(--fg-muted);
 }
 
 td {
   padding: 0.6rem 1rem;
   font-size: 12px;
-  border-bottom: 1px solid var(--gray-200);
+  border-bottom: 1px solid var(--border-subtle);
   vertical-align: middle;
 }
 
 tr:last-child td { border-bottom: none; }
 
-tr:hover td { background: var(--gray-50); }
+tr:hover td { background: var(--bg-hover); }
 
 td a {
   font-weight: 500;
@@ -362,14 +394,14 @@ button.copy-link {
   font-family: var(--font);
   font-size: 11px;
   letter-spacing: 0.04em;
-  background: var(--white);
-  color: var(--black);
+  background: var(--bg);
+  color: var(--fg);
   border: var(--border);
   cursor: pointer;
   margin-right: 0.4rem;
 }
 button.copy-link:hover {
-  background: var(--gray-100);
+  background: var(--bg-elevated);
 }
 
 /* ── File View ──────────────────────────────────────────── */
@@ -388,7 +420,7 @@ button.copy-link:hover {
 .file-view h1 {
   font-size: 13px;
   font-weight: 400;
-  color: var(--gray-600);
+  color: var(--fg-muted);
   word-break: break-all;
   border-bottom: none;
   padding-bottom: 0;
@@ -412,14 +444,14 @@ button.copy-link:hover {
 /* ── Utility ─────────────────────────────────────────────── */
 .form-container > p {
   font-size: 12px;
-  color: var(--gray-600);
+  color: var(--fg-muted);
   margin-top: 1rem;
   line-height: 1.7;
 }
 .form-container > p strong {
-  color: var(--black);
+  color: var(--fg);
   font-weight: 600;
 }
 .form-container > p a {
-  color: var(--black);
+  color: var(--fg);
 }
diff --git a/src/views/layout.ts b/src/views/layout.ts
index a519c48..63680f7 100644
--- a/src/views/layout.ts
+++ b/src/views/layout.ts
@@ -22,6 +22,7 @@ export function layout(title: string, body: string, opts: { authed?: boolean; hi
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>${escHtml(title)} — Nanodrop</title>
   <link rel="stylesheet" href="/public/style.css">
 </head>
diff --git a/tests/integration/pages.test.ts b/tests/integration/pages.test.ts
index d5ccb60..25b3dbd 100644
--- a/tests/integration/pages.test.ts
+++ b/tests/integration/pages.test.ts
@@ -29,6 +29,11 @@ describe('GET /', () => {
     expect(res.statusCode).toBe(302);
     expect(res.headers['location']).toBe('/upload');
   });
+
+  it('emits <meta name="color-scheme" content="light dark"> in <head>', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: '/' });
+    expect(res.body).toMatch(/<meta\s+name="color-scheme"\s+content="light dark"/);
+  });
 });
 
 describe('POST /login (page)', () => {
diff --git a/tests/integration/style.test.ts b/tests/integration/style.test.ts
index b8a0f93..3e53503 100644
--- a/tests/integration/style.test.ts
+++ b/tests/integration/style.test.ts
@@ -31,6 +31,23 @@ describe('public/style.css (file contents)', () => {
       /input\[type="text"\][\s\S]*?input\[type="password"\][\s\S]*?\{[\s\S]*?font-size:\s*(1[6-9]|[2-9]\d)px/
     );
   });
+
+  it('declares a prefers-color-scheme: dark override', () => {
+    expect(css).toMatch(/@media\s*\(\s*prefers-color-scheme:\s*dark\s*\)/);
+  });
+
+  it('uses CSS custom properties for the core palette', () => {
+    expect(css).toMatch(/--bg:/);
+    expect(css).toMatch(/--fg:/);
+    expect(css).toMatch(/--accent:/);
+  });
+
+  it('does not contain unreplaced literal hex colors outside the :root and @media blocks', () => {
+    const stripped = css
+      .replace(/:root\s*\{[\s\S]*?\}/g, '')
+      .replace(/@media\s*\([^)]*\)\s*\{[\s\S]*?\}\s*\}/g, '');
+    expect(stripped).not.toMatch(/#[0-9a-fA-F]{3,6}\b/);
+  });
 });
 
 describe('GET /public/style.css', () => {