trackslash
TRACK-97 P2

Let people pick a background colour from a few presets

0
All issues

Description

The in-app background (the still, ambient brand-backdrop: slate page colour, indigo top wash, indigo/violet/sky/rose orbs and the grid) looks good, but not everyone will like it. Signed-in users should be able to choose a different background from a short list of presets.

Proposal (suggested details, not final)

  • Presets: about 4–5 named options shown as swatches, for example:

    • Indigo: the current look, and the default for everyone.
    • Slate: neutral, with the grid but no colour flare.
    • A few other hues, such as emerald, sky and amber.

    Avoid a preset where red or rose dominates, because rose means errors and destructive actions (see DESIGN_CONTEXT "Colour"). Each preset needs light and dark versions, and dark mode keeps following the system.

  • Only the background changes. Cards, chrome, primary buttons (indigo-600) and the rest of the accent colours stay as they are. The brand rules still apply: content never sits directly on the backdrop, and surfaces stay opaque.

  • Where it lives: an "Appearance" card on Profile, or a new account page added through uiAccountPages.

  • Stored per user on the server, so the choice follows people across devices and doesn't flash the default before it loads. It renders as a class on <body> or on the backdrop. CSP forbids inline styles, so every preset has to be a class in the compiled stylesheet (frontend/tailwind.css, next to .brand-backdrop), not a style attribute.

  • Signed-out pages keep the default brand: login, signup and OAuth. The server doesn't know the user there, and those pages are the front door.

Acceptance criteria

  • A signed-in user can pick a preset, and it takes effect straight away without a full reload, or on the next navigation at the latest.
  • The choice persists and applies on every in-app page. Nobody's current look changes until they pick something.
  • Every preset is readable in both light and dark mode, and status tints (statusSurface/statusCard) still look right over it.
  • An unknown or invalid preset value is rejected when saving and falls back to the default when rendering.
  • The DESIGN_CONTEXT "Brand" section documents the presets and says Indigo is the default.
  • Tests cover saving the setting, rejecting bad values and rendering the class.

Open questions

  • Should the top navigation progress bar and the theme-color meta follow the preset, or stay indigo?
  • When a user is signed in, do the legal pages use their preset or the default?
  • Should the setting also be exposed through the settings API and MCP (update_my_settings)?
  • The exact list of presets and their names.

Out of scope: a free-form colour picker, and a light/dark mode switch.

Sub-issues

0

Linked issues

0

GitHub

0

No branches or pull requests linked.

Comments

1
Bradley

Fixed in https://github.com/badbundle/track-slash-app/pull/193 (merged as 2e49b79).

Profile → Appearance offers Indigo (the default), Slate (the grid with no colour), Emerald, Sky and Amber.

Storage. Each person's choice is stored with their account (users.background, migration 0053), so nobody's look changes until they pick. The value is validated on save. A value that's no longer a preset renders as Indigo.

Rendering. A preset is a class on the ambient backdrop, set through CSS variables in tailwind.css with light and dark versions. Only the wash and the orbs change. Saving through htmx swaps the backdrop in place, with no reload.

Decisions on the open questions:

  • The progress bar and theme-color stay indigo.
  • Legal, sign-in and OAuth pages keep the default.
  • It's not exposed through the settings API or MCP, since it's a personal look rather than project work. It can be added to PATCH /me/settings later.
  • The five presets are the ones suggested here.

DESIGN_CONTEXT "Brand" and COMPONENTS.md are updated. I checked all five presets in light and dark on a seeded instance.