[M3] Settings screen: black text on black background - form controls/labels/select unreadable #75

New Issue

2026-09-20T07:43:26Z

HA_Researcher commented

2026-09-20 07:43:26 +00:00

Bug

On the M3 Settings screen (frontend/src/create/settings/Settings.svelte), the form controls render black text on the app's dark background, making them unreadable:

<label> text
<input> / <select> field text (incl. typed values and the â€¢â€¢â€¢â€¢â€¢â€¢â€¢â€¢ configured placeholders)
<select> dropdown options

Root cause

Settings.svelte <style> sets only width/padding on input, select and no color on label/button/input/select:

label { display: block; margin: 8px 0 4px; }
input, select { width: 100%; padding: 6px; }
button { margin-top: 16px; }

With no explicit color, these inherit the browser default (near-black) text color over the dark page background.

Every other M3 screen sets color: #eee on its root (e.g. SlabList.svelte, Review.svelte, Publish.svelte, GenerateText.svelte) - Settings.svelte is the only one that omits it.

Repro

Deploy M3 (e.g. http://192.168.1.202:10881).
Click Settings (dev).
Observe labels and input/select text are black on black.

Fix

Add light text color to the controls in Settings.svelte <style>, matching the other M3 screens, e.g.:

.settings { max-width: 600px; color: #eee; }
input, select { width: 100%; padding: 6px; color: #eee; background: #1c1c1c; }

(and set option color for the <select> dropdown if the platform renders them on a light surface).

Verification

npm run build passes.
Playwright: open Settings, assert label and input text color is light (contrast ratio >= 4.5:1).
Screenshot evidence in tests/e2e/artifacts/.

Blocks

Blocks the UAT walk: credentials (WP username + app password) are entered on this screen, so it must be readable before the SLAB-UAT-* draft (F4) can be created.

Milestone: M3 (Create). Component: Settings.

## Bug On the M3 Settings screen (`frontend/src/create/settings/Settings.svelte`), the form controls render black text on the app's dark background, making them unreadable: - `<label>` text - `<input>` / `<select>` field text (incl. typed values and the `â€¢â€¢â€¢â€¢â€¢â€¢â€¢â€¢` configured placeholders) - `<select>` dropdown options ## Root cause `Settings.svelte` `<style>` sets only `width`/`padding` on `input, select` and no color on `label`/`button`/`input`/`select`: ``` label { display: block; margin: 8px 0 4px; } input, select { width: 100%; padding: 6px; } button { margin-top: 16px; } ``` With no explicit `color`, these inherit the browser default (near-black) text color over the dark page background. Every other M3 screen sets `color: #eee` on its root (e.g. `SlabList.svelte`, `Review.svelte`, `Publish.svelte`, `GenerateText.svelte`) - `Settings.svelte` is the only one that omits it. ## Repro 1. Deploy M3 (e.g. `http://192.168.1.202:10881`). 2. Click **Settings (dev)**. 3. Observe labels and input/select text are black on black. ## Fix Add light text color to the controls in `Settings.svelte` `<style>`, matching the other M3 screens, e.g.: ``` .settings { max-width: 600px; color: #eee; } input, select { width: 100%; padding: 6px; color: #eee; background: #1c1c1c; } ``` (and set `option` color for the `<select>` dropdown if the platform renders them on a light surface). ## Verification - `npm run build` passes. - Playwright: open Settings, assert label and input text color is light (contrast ratio >= 4.5:1). - Screenshot evidence in `tests/e2e/artifacts/`. ## Blocks Blocks the UAT walk: credentials (WP username + app password) are entered on this screen, so it must be readable before the `SLAB-UAT-*` draft (F4) can be created. Milestone: M3 (Create). Component: Settings.

HA_Researcher added the blocking label 2026-09-20 07:46:33 +00:00

HA_Researcher referenced this issue from a commit

2026-09-20 08:10:17 +00:00

Fix Settings black-on-black contrast (Gitea #75)

grokbot_ty referenced this issue

2026-09-21 17:01:22 +00:00

fix(review): #88 thickness band derived; #90 MultiSelect names + commit #97

grokbot_ty closed this issue

2026-09-21 17:18:44 +00:00

Sign in to join this conversation.