The README screenshot capture script ran in light mode because
Playwright's headless Chromium reports prefers-color-scheme: light by
default. The Pad layout's onMount logic explicitly forces
data-theme="light" when matchMedia matches 'light' — so the captures
came out light-themed even though Pad defaults to dark when no user
preference exists.
Two effects made this misleading:
1. README screenshots showed a theme most Pad users never see by
default. The first impression in the README didn't match the
first impression of the running app.
2. The screenshots could not be reused in the getpad.dev marketing
site (dark themed) without visible whiplash. TASK-918 (PLAN-911)
needs them on the homepage; light-mode captures would have looked
like screenshots of some other product.
Fix: pass colorScheme: 'dark' via test.use(). Chromium then reports
prefers-color-scheme: dark to the page; the layout's matchMedia check
no longer matches 'light', so it leaves the document on the default
theme — which is dark.
Also fixed a typo in the re-run instruction in the docstring (the
PAD_SCREENSHOTS=1 env var was attached to the wrong command).
Re-captured all three screenshots (dashboard, board, list) under the
new config. Docstring updated to call out the theme rationale so
future maintainers don't accidentally flip it back.
The README had two TODO placeholders for screenshots that have been
sitting commented-out since the project started. With the launch
imminent, fill them in.
Captures:
- docs/screenshots/dashboard.png — workspace dashboard with Active
Work cards, Active Plans (v0.2 — Collaboration with progress),
collection summaries, recent activity.
- docs/screenshots/board.png — tasks board view, four columns
(Open / In-Progress / Done / Cancelled) with realistic task cards.
- docs/screenshots/list.png — list view (not currently referenced
from the README, but kept as part of the reproducible asset set).
Reproducibility:
web/e2e/screenshots.spec.ts is a gated Playwright spec (skipped
unless PAD_SCREENSHOTS=1) that uses the existing e2e fixture
infrastructure to:
1. Spin up a fresh pad binary against a clean data dir.
2. Bootstrap an admin + workspace seeded with the startup template.
3. Add a realistic demo dataset (1 active plan, 7 tasks across
open/in-progress/done with mixed priorities, 2 ideas).
4. Navigate + capture three views at 1440x900.
To regenerate:
make build
cd web && PAD_SCREENSHOTS=1 PAD_E2E_PORT=17801 \\
npx playwright test screenshots --project=desktop-chromium
Notes:
- Table view (?view=table) was originally in scope but the URL
parser only accepts list/board today; setting via toggle would
require localStorage manipulation. Three screenshots already
cover the README's needs; revisit if/when table view becomes
URL-reachable.
- Dark/light variants were also in scope but the web UI is dark-
mode-only at present, so the captures are dark-only.
Refs: TASK-673
xarmian