feat(ui): add accent-color picker to first-run onboarding - #11893
feat(ui): add accent-color picker to first-run onboarding#11893roninjin10 wants to merge 1 commit into
Conversation
Onboarding previously left every new user stuck on the default brand orange — there was no accent picker anywhere (Appearance settings only exposed theme mode). This adds a small, skippable "make it yours" accent step to the in-chat first-run conductor at wrap-up, and mirrors the same control in Settings › Appearance so accent becomes a real, reusable, persisted preference. - New curated ACCENT_PRESETS (never blue, brand rule elizaOS#8796) as the single source of truth shared by onboarding + Settings. - persistence: loadUiAccentId/saveUiAccentId + applyUiAccent, which overrides the --accent family inline (winning over base.css / any host brand theme) and derives rgb/hover/muted/subtle; the `default` preset clears the override, restoring the brand accent. - useDisplayPreferences: uiAccentId state + setUiAccent, applied live and persisted (same store/path Settings' theme mode uses); wired through AppContext + AppState/AppContextValue types. - Onboarding: an accent CHOICE is seeded alongside the tutorial prompt, so it never gates completion (a user who ignores it just taps a tutorial option). Picking a swatch calls the shared setUiAccent. - Settings › Appearance: a swatch grid driving the same preference. - Tests: applyUiAccent derivation + clear, store persist/restore/normalize, and the conductor seeding/handling the accent pick without gating finish. Closes elizaOS#11892 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
2 participants
Closes #11892
What & why
New users finished first-run onboarding stuck on the default brand orange — there was no accent picker anywhere in the app (Settings › Appearance only exposed theme mode: light/dark/system). This adds a small, skippable "make it yours" accent step to the in-chat first-run conductor, and mirrors the same control in Settings › Appearance, so accent color becomes a real, discoverable, persisted preference.
The app did not previously support user-selectable accents (arbitrary or preset) —
--accentwas set once bybase.css/ an optional host brand theme. So this introduces a minimal preset mechanism that reuses the existing display-preferences store + the--accentCSS var; it does not add a parallel theming system.How it works
ACCENT_PRESETS(state/ui-preferences.ts) — the single source of truth (Eliza Orange · Amber · Rose · Red · Green · Olive). Curated warm/neutral palette, never blue (brand rule Production-quality pass + all-views aesthetic audit gate for every dashboard view #8796). Thedefaultpreset carriescolor: null.state/persistence.ts—loadUiAccentId/saveUiAccentId(eliza:ui-accent, mirroringsaveUiThemeMode) +applyUiAccent(color), which overrides the--accentfamily inline on<html>(winning over base.css / any host brand theme) and derives--accent-rgb/-hover/-muted/-subtle/--ring/--border-hover/--primary.default(null) clears the overrides → brand accent.useDisplayPreferences.ts—uiAccentId+setUiAccent, applied live and persisted through the same store/path Settings' theme mode uses; wired throughAppContext+AppState/AppContextValue.use-first-run-conductor.ts) — an accentCHOICEis seeded alongside the tutorial prompt at wrap-up, so it never gates completion: a user who ignores it just taps a tutorial option; the tutorial pick stays the single realcompleteFirstRun. Picking a swatch calls the sharedsetUiAccent. Additive: a new step + handler group, no refactor of the surrounding conductor.Placement in the step order
Runtime → (provider) → finish/provision → accent ("make it yours") + tutorial (seeded together) → tutorial pick completes. The accent step is non-blocking by construction.
Evidence
state/useDisplayPreferences.accent.test.tsx(18 assertions across the palette helpers,applyUiAccentderivation + clear + malformed-input handling, and store persist/restore/normalize) and a newuse-first-run-conductor.test.tscase (accent step seeded alongside the tutorial; a swatch pick callssetUiAccent+ does not complete first-run; a garbage id no-ops; the tutorial pick remains the single completion). All existing conductor/setup-steps/appearance tests pass unchanged..github/issue-evidence/onboarding-accent-color-picker.png— the onboarding accent choice + the Settings swatch grid + the accent applied live to a primary button/link (rendered from the shippedACCENT_PRESETS+ the exactapplyUiAccentderivation).Verification run
bun run --cwd packages/ui typecheck— clean.bunx @biomejs/biome check <changed files>— clean.bun run --cwd packages/ui test -- --run src/state/ src/first-run/— 773 passed (includes the new accent + conductor tests).N/A rows: real-LLM trajectories (no agent/model/prompt behavior changed — a client-side UI preference); audio (no voice change).
🤖 Generated with Claude Code