#182: top-bar theme toggle (cycle light/dark/system) #183

fable-5 · 2026-07-29T08:43:59+02:00

fable-5 commented

2026-07-29 08:43:59 +02:00

Implements #182 (follow-up to #180).

IconButton between the notifications bell and the user menu; icons mirror the CURRENT mode (sun=light, moon=dark, monitor=system), localized accessible name states the current mode (de+en).
Clicking cycles light -> dark -> system (radio order) via the shared applyTheme path.
New useThemeMode() hook: single write path (persist JSON + apply + same-document event); the settings radios use it too, so both controls stay in sync without a reload.
Also rendered for signed-out visitors (device-local preference; /login sits inside AppLayout).

Verified locally: typecheck, eslint+prettier, i18n:check, 121 web unit tests (2 new: cycle + setter), fresh e2e env (DB dorfteich_e2e_182): theme.spec 3/3 (2 new tests: cycling+radio sync+persistence, signed-out toggle), settings-nav 2/2 (section count unchanged), a11y pack light+dark 8/8; screenshots of all three icon states; 320px reflow overflow 0px.

Do not merge on red CI. Issue #182 will be closed manually after a green pipeline.

Implements #182 (follow-up to #180). - IconButton between the notifications bell and the user menu; icons mirror the CURRENT mode (sun=light, moon=dark, monitor=system), localized accessible name states the current mode (de+en). - Clicking cycles light -> dark -> system (radio order) via the shared applyTheme path. - New useThemeMode() hook: single write path (persist JSON + apply + same-document event); the settings radios use it too, so both controls stay in sync without a reload. - Also rendered for signed-out visitors (device-local preference; /login sits inside AppLayout). Verified locally: typecheck, eslint+prettier, i18n:check, 121 web unit tests (2 new: cycle + setter), fresh e2e env (DB dorfteich_e2e_182): theme.spec 3/3 (2 new tests: cycling+radio sync+persistence, signed-out toggle), settings-nav 2/2 (section count unchanged), a11y pack light+dark 8/8; screenshots of all three icon states; 320px reflow overflow 0px. Do not merge on red CI. Issue #182 will be closed manually after a green pipeline.

fable-5 added 1 commit 2026-07-29 08:43:59 +02:00

#182 : top-bar theme toggle — cycle light/dark/system without a menu

CI / Lint, typecheck, test (pull_request) Successful in 4m40s

Details

CI / Build container images (pull_request) Successful in 4m1s

Details

CI / Auth e2e pack (pull_request) Successful in 8m30s

Details

CI / Import/export fidelity gate (pull_request) Successful in 54s

Details

CD / Deploy to Test (push) Blocked by required conditions

Details

CD / Smoke tests against Test (push) Blocked by required conditions

Details

CD / Promote to Int (push) Blocked by required conditions

Details

CI / Auth e2e pack (push) Blocked by required conditions

Details

CI / Import/export fidelity gate (push) Blocked by required conditions

Details

CI / Build container images (push) Blocked by required conditions

Details

CD / Build and push images (push) Has been cancelled

Details

CI / Lint, typecheck, test (push) Has been cancelled

Details

b799ad180b

An IconButton between the notifications bell and the user menu cycles
the theme mode in radio order (sun/moon/monitor mirror the CURRENT
choice). New useThemeMode() hook is the single write path (persist +
apply + same-document event), so the settings radios and the toggle
stay in sync; AppearanceSection now uses it too. Also rendered for
signed-out visitors — the mode is a device-local preference. i18n de+en;
unit tests for cycle/setter, theme.spec covers cycling, radio sync,
persistence, and the signed-out top bar.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QRtCnB3uLdQtFmvp9HXcRX

fable-5 referenced this pull request

2026-07-29 08:59:48 +02:00

#184: accent theme engine — presets and free color (ADR 0018 stage B) #185

fable-5 referenced this pull request

2026-07-29 09:09:55 +02:00

#186: pond accent theming (ADR 0018 stage C) #187

stwaidele merged commit b799ad180b into main

2026-07-29 10:11:19 +02:00

fable-5 referenced this pull request

2026-07-29 10:17:39 +02:00

Theme toggle icon in the top bar (cycle light/dark/system) #182

Sign in to join this conversation.