Raised while scoping the AAA contrast gate in #79. Recording the direction; not acting on it.
The situation
The app registers 34 themes — 32 stock DaisyUI (globals.css, the @plugin "daisyui" block) plus spoketowork-dark and spoketowork-light. All 34 are offered to users in the navbar theme dropdown and on /themes.
But only the two brand themes are authored to AAA. globals.css carries a block of hand-written [data-theme='spoketowork-*'] overrides — .label-text, inactive .tab, .text-error/info/success/warning, th, .label-text-alt, .stat-title, .stat-desc, the .text-base-content/* ladder — and there is nothing equivalent for the other 32.
So the contrast gate landing in #79 sweeps the 2 it can make claims about. Sweeping all 34 would produce a large permanently-red baseline about palettes we neither authored nor control.
That means: a user who picks one of the 32 gets an experience we have never tested and make no accessibility claim about.
The direction
A curated set, thematically coherent with the product — steampunk-leaning was the specific thought, which fits a bicycle app rather better than cyberpunk and lemonade do. Fewer palettes, each held to the AAA gate.
The gate is already theme-agnostic, so onboarding a theme costs exactly one array entry:
// tests/e2e/color-contrast.spec.ts
const THEMES = ['spoketowork-light', 'spoketowork-dark'] as const;
// later:
const THEMES = ['steampunk-brass', 'steampunk-noir', ...] as const;
That ordering matters — the gate exists before the palettes, so new themes are held to AAA from their first commit rather than retrofitted.
Work involved
- Decide the set and how many
- Author each as a
@plugin "daisyui/theme" block with AAA-compliant token values
- Drop the 32 stock registrations, or keep them clearly marked as unsupported
- Update the switcher lists (
ThemeSwitcher.tsx, GlobalNav.tsx) and /themes
- Add each to
THEMES in the contrast gate and make it pass
useMapTheme.ts and MapContainerInner.tsx branch on spoketowork-dark for map tiles — those need updating with any rename
Note tests/e2e/tests/theme-switching.spec.ts has a stale theme list (duplicate sunset, missing cmyk, missing both brand themes); ThemeSwitcher.tsx is the accurate source.
Related: #67 (design system redesign), #79 (the AAA gate).
Raised while scoping the AAA contrast gate in #79. Recording the direction; not acting on it.
The situation
The app registers 34 themes — 32 stock DaisyUI (
globals.css, the@plugin "daisyui"block) plusspoketowork-darkandspoketowork-light. All 34 are offered to users in the navbar theme dropdown and on/themes.But only the two brand themes are authored to AAA.
globals.csscarries a block of hand-written[data-theme='spoketowork-*']overrides —.label-text, inactive.tab,.text-error/info/success/warning,th,.label-text-alt,.stat-title,.stat-desc, the.text-base-content/*ladder — and there is nothing equivalent for the other 32.So the contrast gate landing in #79 sweeps the 2 it can make claims about. Sweeping all 34 would produce a large permanently-red baseline about palettes we neither authored nor control.
That means: a user who picks one of the 32 gets an experience we have never tested and make no accessibility claim about.
The direction
A curated set, thematically coherent with the product — steampunk-leaning was the specific thought, which fits a bicycle app rather better than
cyberpunkandlemonadedo. Fewer palettes, each held to the AAA gate.The gate is already theme-agnostic, so onboarding a theme costs exactly one array entry:
That ordering matters — the gate exists before the palettes, so new themes are held to AAA from their first commit rather than retrofitted.
Work involved
@plugin "daisyui/theme"block with AAA-compliant token valuesThemeSwitcher.tsx,GlobalNav.tsx) and/themesTHEMESin the contrast gate and make it passuseMapTheme.tsandMapContainerInner.tsxbranch onspoketowork-darkfor map tiles — those need updating with any renameNote
tests/e2e/tests/theme-switching.spec.tshas a stale theme list (duplicatesunset, missingcmyk, missing both brand themes);ThemeSwitcher.tsxis the accurate source.Related: #67 (design system redesign), #79 (the AAA gate).