Settings modal: add Background color picker section #122

New issue

Closed

opened 2026-10-02 23:41:25 +00:00 by Mark · 0 comments

Mark commented

2026-10-02 23:41:25 +00:00

Owner

Parent-Issue: #119

Part of the Settings modal implementation (parent #119 covers the full modal). This child is the Background color section.

Scope

Add a Background color section to the Settings modal at src/pages/Workspace.tsx:335-357. Color picker that controls the Workspace canvas background, replacing the hardcoded #F8F2E9 currently in src/components/workspace/canvasRenderer.ts.

Acceptance

Section is a Collapsible matching the right panel's Design Settings pattern.
Color picker shows current background value.
Changing the value updates the canvas background live (no save button needed; persists to localStorage so the choice survives reload).
Existing 480px modal width, role="dialog", aria-modal, data-testid, backdrop click + Close are preserved.
A Playwright regression test confirms: open Settings → pick new color → close modal → reload page → background is the picked color.

Out of scope

Thread library, color simplification preview, default render scale, default undo history depth, grid visibility. Those are separate children of #119.

**Parent-Issue:** #119 Part of the Settings modal implementation (parent #119 covers the full modal). This child is the Background color section. ## Scope Add a Background color section to the Settings modal at `src/pages/Workspace.tsx:335-357`. Color picker that controls the Workspace canvas background, replacing the hardcoded `#F8F2E9` currently in `src/components/workspace/canvasRenderer.ts`. ## Acceptance - Section is a `Collapsible` matching the right panel's Design Settings pattern. - Color picker shows current background value. - Changing the value updates the canvas background live (no save button needed; persists to localStorage so the choice survives reload). - Existing 480px modal width, `role="dialog"`, `aria-modal`, `data-testid`, backdrop click + Close are preserved. - A Playwright regression test confirms: open Settings → pick new color → close modal → reload page → background is the picked color. ## Out of scope Thread library, color simplification preview, default render scale, default undo history depth, grid visibility. Those are separate children of #119.