fix: keep autofilled form fields readable in the dark theme #3

Merged

jfro merged 1 commit from jtk/dark-mode-inputs into main

2026-10-18 15:52:20 +00:00

jfro commented

2026-10-18 15:43:13 +00:00

Owner

Fixes GitHub #3 (old mirror): in the dark theme, a filled-in email on the registration page was unreadable when the browser or a password manager (1Password) autofilled it.

Cause
Autofill paints its own light background behind the field but keeps our text color, which in the dark theme is near-white. Typing by hand looks fine (checked computed styles in dark and light: base-content on base-100).

What changed

app.css: autofilled input/textarea/select keep the theme's colors (text fill + an inset shadow over the autofill background). Split into :autofill and :-webkit-autofill rules, since a browser drops a whole rule over a selector it doesn't know.
The registration page's verification note used a fixed text-gray-600; now text-base-content/70.

Testing
CSS only; checked the rules land in the built app.css. mix precommit: 148 passed. Autofill can't be triggered from a headless browser, so worth a quick look with 1Password on a real device.

Note: other pages still use fixed light colors (bg-white, text-gray-*, ~95 spots in admin users, import/export, user settings) that don't follow the dark theme. That's outside this fix; flagged separately.

Fixes GitHub #3 (old mirror): in the dark theme, a filled-in email on the registration page was unreadable when the browser or a password manager (1Password) autofilled it. **Cause** Autofill paints its own light background behind the field but keeps our text color, which in the dark theme is near-white. Typing by hand looks fine (checked computed styles in dark and light: base-content on base-100). **What changed** - `app.css`: autofilled `input`/`textarea`/`select` keep the theme's colors (text fill + an inset shadow over the autofill background). Split into `:autofill` and `:-webkit-autofill` rules, since a browser drops a whole rule over a selector it doesn't know. - The registration page's verification note used a fixed `text-gray-600`; now `text-base-content/70`. **Testing** CSS only; checked the rules land in the built `app.css`. `mix precommit`: 148 passed. Autofill can't be triggered from a headless browser, so worth a quick look with 1Password on a real device. Note: other pages still use fixed light colors (`bg-white`, `text-gray-*`, ~95 spots in admin users, import/export, user settings) that don't follow the dark theme. That's outside this fix; flagged separately.

jfro added 1 commit

2026-10-18 15:43:13 +00:00

fix: keep autofilled form fields readable in the dark theme

CI / test (pull_request) Successful in 34s

Details

4425de70a7

Browser and password manager autofill painted a light background behind the
dark theme's light text, so a filled-in email on the registration page was
unreadable (GitHub #3). Autofilled fields now keep the theme's colors. Also
swaps the registration note's fixed gray for the theme's muted text color.

jfro commented

2026-10-18 15:52:10 +00:00

Author

Owner

Review from Nye (approved) — Autofill rules split correctly (standard + -webkit-), use theme vars so they follow light and dark; registration hint text moved off text-gray-600. Needs a manual check in a real browser with 1Password/Chrome autofill after deploy; not blocking.

**Review from Nye (approved)** — Autofill rules split correctly (standard + -webkit-), use theme vars so they follow light and dark; registration hint text moved off text-gray-600. Needs a manual check in a real browser with 1Password/Chrome autofill after deploy; not blocking.

jfro merged commit 76ef5ad2fd into main

2026-10-18 15:52:20 +00:00

jfro deleted branch jtk/dark-mode-inputs

2026-10-18 15:52:20 +00:00

jfro referenced this pull request from a commit

2026-10-18 15:52:20 +00:00

fix: keep autofilled form fields readable in the dark theme (#3)