feat(webapp): add color scheme switcher with 7 palettes #90

Merged

padreug merged 1 commit from feat/color-scheme-switcher into dev

2026-06-04 09:51:44 +00:00

padreug commented

2026-06-04 09:50:55 +00:00

Owner

Summary

Replaces the bespoke src/assets/index.css with a shadcn-vue-idiomatic theme.css using Catppuccin Latte/Mocha as the default, while preserving the existing tailwindcss-animate plugin, custom accordion keyframes, animation duration/easing tokens, and native-scrollbar styling.
Adds a Color scheme picker to the profile sheet that swaps between 6 alternative palettes scoped under :root[data-theme="<name>"] / :root[data-theme="<name>"].dark: Countryside Castle, Dark Matter, Emerald Forest, Light Green, Neo Brutalist, Starry Night.
Extends useTheme() with palette / setPalette state, persists the choice under localStorage['ui-palette'], and applies it via a data-theme attribute on <html> (alongside the existing .dark class).
Standalone apps (activities, chat, forum, market, restaurant, tasks, wallet, accounting) inherit the palette automatically — each one already mounts via AppShell, which invokes useTheme() on mount.
i18n strings added for EN/FR/ES (common.nav.colorScheme + common.nav.palette_*).

Persistence: ui-palette and ui-theme are both localStorage-backed, so user choice survives reload, app re-open, and crosses between hub and every standalone (same origin in production).

Test plan

npm run build (hub) — green
npm run build:activities — green (verified all 6 alternate data-theme selectors land in the standalone CSS bundle)
vue-tsc -p tsconfig.app.json --noEmit — clean
Hub renders correctly in default Catppuccin Mocha (dark) at 450×820 viewport
Manually verify palette switch persists across reload on hub
Manually verify palette propagates between hub → activities → wallet in production (or staging on aio-demo)
Spot-check light variant of each palette (toggle Theme → Light)

🤖 Generated with Claude Code

## Summary - Replaces the bespoke `src/assets/index.css` with a shadcn-vue-idiomatic theme.css using Catppuccin Latte/Mocha as the default, while preserving the existing `tailwindcss-animate` plugin, custom accordion keyframes, animation duration/easing tokens, and native-scrollbar styling. - Adds a **Color scheme** picker to the profile sheet that swaps between 6 alternative palettes scoped under `:root[data-theme="<name>"]` / `:root[data-theme="<name>"].dark`: Countryside Castle, Dark Matter, Emerald Forest, Light Green, Neo Brutalist, Starry Night. - Extends `useTheme()` with `palette` / `setPalette` state, persists the choice under `localStorage['ui-palette']`, and applies it via a `data-theme` attribute on `<html>` (alongside the existing `.dark` class). - Standalone apps (`activities`, `chat`, `forum`, `market`, `restaurant`, `tasks`, `wallet`, `accounting`) inherit the palette automatically — each one already mounts via `AppShell`, which invokes `useTheme()` on mount. - i18n strings added for EN/FR/ES (`common.nav.colorScheme` + `common.nav.palette_*`). Persistence: `ui-palette` and `ui-theme` are both `localStorage`-backed, so user choice survives reload, app re-open, and crosses between hub and every standalone (same origin in production). ## Test plan - [x] `npm run build` (hub) — green - [x] `npm run build:activities` — green (verified all 6 alternate `data-theme` selectors land in the standalone CSS bundle) - [x] `vue-tsc -p tsconfig.app.json --noEmit` — clean - [x] Hub renders correctly in default Catppuccin Mocha (dark) at 450×820 viewport - [ ] Manually verify palette switch persists across reload on hub - [ ] Manually verify palette propagates between hub → activities → wallet in production (or staging on `aio-demo`) - [ ] Spot-check light variant of each palette (toggle Theme → Light) 🤖 Generated with [Claude Code](https://claude.com/claude-code)

padreug added 1 commit

2026-06-04 09:50:55 +00:00

feat(webapp): add color scheme switcher with 7 palettes 53af36ad01

Replace the bespoke index.css with a shadcn-vue-idiomatic theme.css
(Catppuccin Latte/Mocha as the default), and add a palette picker to the
profile sheet that swaps between 6 alternative palettes scoped under
:root[data-theme="<name>"]: Countryside Castle, Dark Matter, Emerald
Forest, Light Green, Neo Brutalist, Starry Night.

useTheme() now also persists a 'ui-palette' localStorage key alongside
the existing 'ui-theme' (dark/light/system) and applies the choice via a
data-theme attribute on <html>. Standalone apps inherit the palette
automatically since AppShell already invokes useTheme() on mount.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

padreug merged commit ce2488941f into dev

2026-06-04 09:51:44 +00:00

padreug deleted branch feat/color-scheme-switcher

2026-06-04 09:51:44 +00:00

padreug referenced this pull request from a commit

2026-06-04 09:51:44 +00:00

Merge pull request 'feat(webapp): add color scheme switcher with 7 palettes' (#90) from feat/color-scheme-switcher into dev

padreug added the

app:webapp

enhancement

labels

2026-06-04 09:51:47 +00:00