brendan/nanodrop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auto OS-driven dark mode (prefers-color-scheme)

Browse Source 
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 <meta name="color-scheme" content="light dark"> to the shared
layout <head> 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).
This commit is contained in:
Brendan Chen
2026-05-11 09:50:44 -07:00
parent 398c008c32
commit 012c544bdc
4 changed files with 122 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
public/style.css
View File

@@ -7,29 +7,60 @@
/* ── Tokens ─────────────────────────────────────────────── */ /* ── Tokens ─────────────────────────────────────────────── */
:root { :root {
--black: #000; --bg: #fff;
--white: #fff; --bg-elevated: #f0f0f0;
--gray-50: #fafafa; --bg-hover: #fafafa;
--gray-100:#f0f0f0; --fg: #000;
--gray-200:#e0e0e0; --fg-muted: #555;
--gray-400:#999; --fg-on-accent: #fff;
--gray-600:#555; --border-color: #000;
--red: #c00; --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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--border: 1px solid var(--black); --border: 1px solid var(--border-color);
--radius: 0; --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 ───────────────────────────────────────────────── */ /* ── Base ───────────────────────────────────────────────── */
html { font-size: 14px; } html { font-size: 14px; }
body { body {
font-family: var(--font); font-family: var(--font);
line-height: 1.5; line-height: 1.5;
background: var(--white); background: var(--bg);
color: var(--black); color: var(--fg);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -37,11 +68,11 @@ body {
} }
a { a {
color: var(--black); color: var(--fg);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 3px; text-underline-offset: 3px;
} }
a:hover { color: var(--gray-600); } a:hover { color: var(--fg-muted); }
/* ── Header ─────────────────────────────────────────────── */ /* ── Header ─────────────────────────────────────────────── */
header { header {
@@ -59,9 +90,9 @@ header {
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
text-decoration: none; text-decoration: none;
color: var(--black); color: var(--fg);
} }
.logo:hover { color: var(--gray-600); } .logo:hover { color: var(--fg-muted); }
nav { nav {
display: flex; display: flex;
@@ -78,12 +109,12 @@ nav a {
font-size: 12px; font-size: 12px;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-decoration: none; text-decoration: none;
color: var(--gray-600); color: var(--fg-muted);
border-left: var(--border); border-left: var(--border);
} }
nav a:hover { nav a:hover {
color: var(--black); color: var(--fg);
background: var(--gray-100); background: var(--bg-elevated);
} }
nav form { nav form {
@@ -99,13 +130,13 @@ nav button[type="submit"] {
background: none; background: none;
border: none; border: none;
border-left: var(--border); border-left: var(--border);
color: var(--gray-600); color: var(--fg-muted);
cursor: pointer; cursor: pointer;
font-family: var(--font); font-family: var(--font);
} }
nav button[type="submit"]:hover { nav button[type="submit"]:hover {
color: var(--black); color: var(--fg);
background: var(--gray-100); background: var(--bg-elevated);
} }
/* ── Main ───────────────────────────────────────────────── */ /* ── Main ───────────────────────────────────────────────── */
@@ -141,7 +172,7 @@ label {
font-size: 11px; font-size: 11px;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
color: var(--gray-600); color: var(--fg-muted);
} }
input[type="text"], input[type="text"],
@@ -151,16 +182,16 @@ input[type="file"] {
padding: 0.6rem 0.75rem; padding: 0.6rem 0.75rem;
font-family: var(--font); font-family: var(--font);
font-size: 16px; font-size: 16px;
background: var(--white); background: var(--input-bg);
border: var(--border); border: 1px solid var(--input-border);
color: var(--black); color: var(--input-fg);
outline: none; outline: none;
transition: background 0.1s; transition: background 0.1s;
} }
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus { input[type="password"]:focus {
background: var(--gray-50); background: var(--input-bg-focus);
box-shadow: inset 0 0 0 2px var(--black); box-shadow: inset 0 0 0 2px var(--accent);
} }
input[type="file"] { input[type="file"] {
@@ -171,8 +202,8 @@ input[type="file"]::-webkit-file-upload-button {
font-family: var(--font); font-family: var(--font);
font-size: 11px; font-size: 11px;
letter-spacing: 0.02em; letter-spacing: 0.02em;
background: var(--black); background: var(--accent);
color: var(--white); color: var(--fg-on-accent);
border: none; border: none;
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
cursor: pointer; cursor: pointer;
@@ -182,8 +213,8 @@ input[type="file"]::file-selector-button {
font-family: var(--font); font-family: var(--font);
font-size: 11px; font-size: 11px;
letter-spacing: 0.02em; letter-spacing: 0.02em;
background: var(--black); background: var(--accent);
color: var(--white); color: var(--fg-on-accent);
border: none; border: none;
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
cursor: pointer; cursor: pointer;
@@ -199,16 +230,17 @@ button[type="submit"],
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
background: var(--black); background: var(--accent);
color: var(--white); color: var(--fg-on-accent);
border: var(--border); border: 1px solid var(--accent);
cursor: pointer; cursor: pointer;
transition: background 0.1s, color 0.1s; transition: background 0.1s, color 0.1s;
text-align: center; text-align: center;
} }
button[type="submit"]:hover, button[type="submit"]:hover,
.btn-primary:hover { .btn-primary:hover {
background: var(--gray-600); background: var(--accent-hover);
border-color: var(--accent-hover);
} }
/* ── Danger Button ──────────────────────────────────────── */ /* ── Danger Button ──────────────────────────────────────── */
@@ -219,13 +251,13 @@ button.danger {
font-size: 11px; font-size: 11px;
letter-spacing: 0.04em; letter-spacing: 0.04em;
background: none; background: none;
color: var(--red); color: var(--danger);
border: 1px solid var(--red); border: 1px solid var(--danger);
cursor: pointer; cursor: pointer;
} }
button.danger:hover { button.danger:hover {
background: var(--red); background: var(--danger);
color: var(--white); color: var(--danger-fg);
} }
/* ── Generic Link-button (.btn for file-view) ───────────── */ /* ── Generic Link-button (.btn for file-view) ───────────── */
@@ -236,23 +268,23 @@ a.btn {
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
text-decoration: none; text-decoration: none;
background: var(--black); background: var(--accent);
color: var(--white); color: var(--fg-on-accent);
border: var(--border); border: 1px solid var(--accent);
transition: background 0.1s; transition: background 0.1s;
} }
a.btn:hover { a.btn:hover {
background: var(--gray-600); background: var(--accent-hover);
color: var(--white); color: var(--fg-on-accent);
} }
/* ── Error ──────────────────────────────────────────────── */ /* ── Error ──────────────────────────────────────────────── */
.error { .error {
font-size: 12px; font-size: 12px;
color: var(--red); color: var(--danger);
padding: 0.6rem 0.75rem; padding: 0.6rem 0.75rem;
border: 1px solid var(--red); border: 1px solid var(--danger);
background: #fff5f5; background: var(--danger-bg);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -266,14 +298,14 @@ a.btn:hover {
.share-box input[readonly] { .share-box input[readonly] {
flex: 1; flex: 1;
font-family: var(--font-mono); font-family: var(--font-mono);
background: var(--gray-100); background: var(--bg-elevated);
color: var(--gray-600); color: var(--fg-muted);
border-right: none; border-right: none;
cursor: text; cursor: text;
} }
.share-box input[readonly]:focus { .share-box input[readonly]:focus {
box-shadow: none; box-shadow: none;
background: var(--gray-100); background: var(--bg-elevated);
} }
/* Copy button — outline style, distinct from submit */ /* Copy button — outline style, distinct from submit */
@@ -283,16 +315,16 @@ a.btn:hover {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
background: var(--white); background: var(--bg);
color: var(--black); color: var(--fg);
border: var(--border); border: 1px solid var(--border-color);
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: background 0.1s; transition: background 0.1s;
flex-shrink: 0; flex-shrink: 0;
} }
.share-box button:hover { .share-box button:hover {
background: var(--gray-100); background: var(--bg-elevated);
} }
/* ── Table ──────────────────────────────────────────────── */ /* ── Table ──────────────────────────────────────────────── */
@@ -329,21 +361,21 @@ th {
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
text-align: left; text-align: left;
background: var(--gray-100); background: var(--bg-elevated);
border-bottom: var(--border); border-bottom: 1px solid var(--border-color);
color: var(--gray-600); color: var(--fg-muted);
} }
td { td {
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
font-size: 12px; font-size: 12px;
border-bottom: 1px solid var(--gray-200); border-bottom: 1px solid var(--border-subtle);
vertical-align: middle; vertical-align: middle;
} }
tr:last-child td { border-bottom: none; } tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--gray-50); } tr:hover td { background: var(--bg-hover); }
td a { td a {
font-weight: 500; font-weight: 500;
@@ -362,14 +394,14 @@ button.copy-link {
font-family: var(--font); font-family: var(--font);
font-size: 11px; font-size: 11px;
letter-spacing: 0.04em; letter-spacing: 0.04em;
background: var(--white); background: var(--bg);
color: var(--black); color: var(--fg);
border: var(--border); border: 1px solid var(--border-color);
cursor: pointer; cursor: pointer;
margin-right: 0.4rem; margin-right: 0.4rem;
} }
button.copy-link:hover { button.copy-link:hover {
background: var(--gray-100); background: var(--bg-elevated);
} }
/* ── File View ──────────────────────────────────────────── */ /* ── File View ──────────────────────────────────────────── */
@@ -388,7 +420,7 @@ button.copy-link:hover {
.file-view h1 { .file-view h1 {
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: var(--gray-600); color: var(--fg-muted);
word-break: break-all; word-break: break-all;
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
@@ -412,14 +444,14 @@ button.copy-link:hover {
/* ── Utility ─────────────────────────────────────────────── */ /* ── Utility ─────────────────────────────────────────────── */
.form-container > p { .form-container > p {
font-size: 12px; font-size: 12px;
color: var(--gray-600); color: var(--fg-muted);
margin-top: 1rem; margin-top: 1rem;
line-height: 1.7; line-height: 1.7;
} }
.form-container > p strong { .form-container > p strong {
color: var(--black); color: var(--fg);
font-weight: 600; font-weight: 600;
} }
.form-container > p a { .form-container > p a {
color: var(--black); color: var(--fg);
} }

1
src/views/layout.ts
View File

@@ -22,6 +22,7 @@ export function layout(title: string, body: string, opts: { authed?: boolean; hi
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>${escHtml(title)} — Nanodrop</title> <title>${escHtml(title)} — Nanodrop</title>
<link rel="stylesheet" href="/public/style.css"> <link rel="stylesheet" href="/public/style.css">
</head> </head>

5
tests/integration/pages.test.ts
View File

@@ -29,6 +29,11 @@ describe('GET /', () => {
expect(res.statusCode).toBe(302); expect(res.statusCode).toBe(302);
expect(res.headers['location']).toBe('/upload'); 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)', () => { describe('POST /login (page)', () => {

17
tests/integration/style.test.ts
View File

@@ -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/ /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', () => { describe('GET /public/style.css', () => {