From 012c544bdcc9a592fb8d6c1e9c50cf3a632ff2e4 Mon Sep 17 00:00:00 2001 From: Brendan Chen Date: Mon, 11 May 2026 09:50:44 -0700 Subject: [PATCH 1/2] feat: auto OS-driven dark mode (prefers-color-scheme) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refactor public/style.css to semantic CSS custom properties under :root (light palette by default) and add a @media (prefers-color-scheme: dark) override block that flips background/foreground/accent/danger tokens to a soft near-black palette. The original --black/--white/--gray-*/--red literal tokens and the lone #fff5f5 floating literal are gone — every color now derives from a semantic token, so the dark override is the only place that re-declares them. Add to the shared layout so the browser renders its UA backdrop, native scrollbars, and form-control popups in the user's preferred scheme before the stylesheet parses — this is what avoids a white flash on initial paint in dark mode. No toggle, no JS, no preference persistence — the page follows the OS setting directly via the media query. The 16px font-size rule on text-entry inputs is preserved (still asserted by tests/integration /style.test.ts). --- public/style.css | 166 +++++++++++++++++++------------- src/views/layout.ts | 1 + tests/integration/pages.test.ts | 5 + tests/integration/style.test.ts | 17 ++++ 4 files changed, 122 insertions(+), 67 deletions(-) diff --git a/public/style.css b/public/style.css index 23c4fad..8a662c4 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,16 +315,16 @@ a.btn:hover { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; - background: var(--white); - color: var(--black); - border: var(--border); + background: var(--bg); + color: var(--fg); + border: 1px solid var(--border-color); cursor: pointer; white-space: nowrap; transition: background 0.1s; 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); - border-bottom: var(--border); - color: var(--gray-600); + background: var(--bg-elevated); + border-bottom: 1px solid var(--border-color); + 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); - border: var(--border); + background: var(--bg); + color: var(--fg); + border: 1px solid var(--border-color); 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 + ${escHtml(title)} — Nanodrop 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 in ', async () => { + const res = await ctx.app.inject({ method: 'GET', url: '/' }); + expect(res.body).toMatch(/ { 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', () => { -- 2.49.1 From 38e7c0c4a15d1b56b41fec664532c3045fa2a9c9 Mon Sep 17 00:00:00 2001 From: Brendan Chen Date: Mon, 11 May 2026 09:53:24 -0700 Subject: [PATCH 2/2] refactor: restore var(--border) shorthand after dark-mode tokenization The dark-mode refactor expanded `border: var(--border);` to `1px solid var(--border-color);` in three rules (.share-box button, th, button.copy-link). The rest of the file still uses the var(--border) shorthand for the same value, so restore it for consistency. `--border` is defined as `1px solid var(--border-color)`, so the substitution is byte-equivalent at the cascade level: same border in light mode, same border in dark mode, identical to the prior commit. Behavior unchanged. 130/130 tests pass; tsc --noEmit clean. --- public/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/style.css b/public/style.css index 8a662c4..86b7f78 100644 --- a/public/style.css +++ b/public/style.css @@ -317,7 +317,7 @@ a.btn:hover { letter-spacing: 0.02em; background: var(--bg); color: var(--fg); - border: 1px solid var(--border-color); + border: var(--border); cursor: pointer; white-space: nowrap; transition: background 0.1s; @@ -362,7 +362,7 @@ th { text-transform: uppercase; text-align: left; background: var(--bg-elevated); - border-bottom: 1px solid var(--border-color); + border-bottom: var(--border); color: var(--fg-muted); } @@ -396,7 +396,7 @@ button.copy-link { letter-spacing: 0.04em; background: var(--bg); color: var(--fg); - border: 1px solid var(--border-color); + border: var(--border); cursor: pointer; margin-right: 0.4rem; } -- 2.49.1