extension: dark mode for popup and extension pages

[spencerc99]

Summary

Adds dark mode to the extension in two phases, both in this PR:

Phase 1 — extension surfaces (popup, options/setup, portrait, stats, commute, scraps, walking-record, color-picker) follow the OS setting via prefers-color-scheme (no in-app toggle).

Phase 2 — injected in-page UI (inventory satchel, emote wheel, milestone toasts, message bottle, historical overlay, presence pill) follows the host page's apparent theme instead of the OS: a dark satchel floating on a light website reads as broken even for dark-mode OS users. Theme is detected from the page's effective background luminance (body/html composited over white, threshold 0.4), falling back to prefers-color-scheme when indeterminate. Tokens are written inline on each shadow host since :host { all: initial } blocks :root inheritance; one shared TS token map (injected-ui-theme.ts) mirrors _variables.scss.

Design spec: internal-docs/2026-08-17-extension-dark-mode.md (not committed).

Design

• Dark mode keeps the warm-paper identity: warm brown-black grounds, warm off-white text, same accent hues lifted for contrast (>= 4.5:1 for text-size use).
• Paper texture survives the dark: grain/grid/weave re-expressed as marks slightly lighter than the ground.
• Night scenes: illustrated surfaces treat dark mode as night in the scene's world with the lights on — commute becomes a night station with a lit incandescent carriage and glowing lamps.
• Portrait stays a light paper sheet (riso inks, trail colors, and exports are paper-tuned) framed in a darkened room. Light mode pixel-identical.
• The satchel gets a night-leather counterpart (same hue family, deeper) rather than generic dark gray.

Implementation

• Runtime CSS-token layer in _variables.scss/_base.scss with a dark block; all in-scope stylesheets migrated from compile-time SCSS $ vars to var(--*).
• Base token layer attached to pages that lacked it; scraps got a real stylesheet replacing inline styles.
• <meta name="color-scheme" content="light dark"> on every entrypoint (fixes UA form controls going dark on their own).
• Shared portrait-styles.scss uses var(--*, <light fallback>) so the website (no dark tokens) is unchanged.
• inject-ui.ts gained a theme option; HistoricalOverlay.scss found to be dead (never imported) and left untouched — the live inline styles in HistoricalOverlay.tsx were themed instead.
• PresenceCountPill renders in light DOM, so it takes literal values from the token map at creation instead of CSS vars, avoiding collisions with host-page custom properties.

Verification

• bun run check:extension clean; bun run test:extension 806/806 pass; WXT production build succeeds.
• Extension pages screenshotted in dark + light via a Playwright rig loading the built extension with emulated color scheme.
• Injected UI verified on the social playground (real extension code, no install): the same satchel renders tan leather on a light page and night-leather on a dark page. Screenshots in the evidence comment.

Release notes for both phases added to extension/PENDING.md.

[cloudflare-workers-and-pages]

Deploying we-were-online-website with    Cloudflare Pages

Latest commit:	4c9cd5d
Status:	✅  Deploy successful!
Preview URL:	https://060198df.we-were-online-website.pages.dev
Branch Preview URL:	https://cd-extension-dark-mode-36bb7.we-were-online-website.pages.dev

View logs

[spencerc99]

Preview evidence

Fresh Chromium proof that popup controls and synchronized commute notices retain dark mode after merging current main.

Open preview · Review all evidence · Commit 4c9cd5d

Popup Slow Mode settings after current-main merge

The freshly built popup keeps readable dark tokens across the wordmark, commute card, sharing selector, controls, and page texture.

Open captured page · 400×800

Synchronized commute notices after current-main merge

The freshly built commute page keeps the warm night scene while the sharing notice and live route-update notice remain legible.

Open captured page · 1280×900

_{Published by PR Evidence. Media is temporary and is removed after retention expires.}

[spencerc99]

Code review

• [P2] Make the collector icons follow the active color scheme — extension/src/styles/_base.scss:11-14 now activates the dark tokens globally, but extension/src/components/icons.tsx:6-8 still hard-codes the light palette used throughout those SVGs. The normal collection-status grid renders these icons at extension/src/components/InternetPortraitHome.tsx:279-285 without a separate background, so the #3d3833 strokes/fills sit on the new #1f1b17 dark background at roughly 1.48:1 contrast and nearly disappear. Use currentColor or the theme custom properties for the shared icon colors, then verify the popup and Collections surfaces in both schemes.

• [P2] Keep a dark foreground on the gold History button in light mode — extension/src/components/QuickActions.scss:23 changes the foreground from $text to var(--btn-fg), while the light tokens define --btn-fg as white and --accent-gold as #d4b85c at extension/src/styles/_variables.scss:20-31. The always-rendered History action therefore regresses from about 5.97:1 contrast to 1.94:1 in light mode. Give gold buttons a dedicated dark foreground token instead of sharing the generic accent-button foreground.

[pkg-pr-new]

Open in StackBlitz

bun add https://pkg.pr.new/@playhtml/common@400

bun add https://pkg.pr.new/playhtml@400

bun add https://pkg.pr.new/@playhtml/react@400

commit: 4c9cd5d

[spencerc99]

Re: the code review sweep — both findings were addressed in 5e5a2e9 (it landed after the reviewed head 33f2b65):

• Collector icons: icons.tsx now uses currentColor / var(--surface-hover) / var(--text-faint) instead of the hardcoded light palette, with a regression test (icons.test.tsx) asserting no hardcoded hex remains.
• Gold History button: added a dedicated --gold-btn-fg token (#3d3833 light / #1f1b17 dark) and QuickActions.scss uses it, so the gold button keeps a dark foreground in both schemes (~6:1 in light).

Also merged main into the branch (conflicts in PENDING.md — dropped bullets already shipped in v0.1.23 — and walking-record.tsx, where main's shared style const now carries the theme tokens). 833/833 tests pass post-merge.

[cloudflare-workers-and-pages]

Deploying playhtml with    Cloudflare Pages

Latest commit:	32ec30d
Status:	✅  Deploy successful!
Preview URL:	https://0f07da32.playhtml.pages.dev
Branch Preview URL:	https://cd-extension-dark-mode-36bb7.playhtml.pages.dev

View logs

[spencerc99]

Code review

No issues found. Verified the changes addressing the previous review findings.