stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

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

New Issue
Closed
opened 2026-07-29 08:37:21 +02:00 by fable-5 · 1 comment
fable-5 commented 2026-07-29 08:37:21 +02:00
Collaborator
Copy Link

Follow-up to #180. Add an icon button to the top bar, between the notifications bell and the user menu, that cycles the theme mode light -> dark -> system without opening any menu.

Acceptance criteria:

  • Icon reflects the CURRENT mode (sun = light, moon = dark, monitor = system) and has a localized accessible name that names the current mode (de+en).
  • Clicking cycles light -> dark -> system -> light and applies the theme instantly (same applyTheme path as the settings radios).
  • The settings radios and the top-bar icon stay in sync within the same document (shared reactive hook, single source of truth ui.theme.mode).
  • Keyboard operable, visible focus (IconButton building block, ADR 0017).
  • Also available for signed-out visitors (theme is a device-local preference).
  • Tests: unit (cycle + setter), e2e extension of theme.spec.ts (icon cycles, radios follow).
Follow-up to #180. Add an icon button to the top bar, between the notifications bell and the user menu, that cycles the theme mode light -> dark -> system without opening any menu. Acceptance criteria: - Icon reflects the CURRENT mode (sun = light, moon = dark, monitor = system) and has a localized accessible name that names the current mode (de+en). - Clicking cycles light -> dark -> system -> light and applies the theme instantly (same applyTheme path as the settings radios). - The settings radios and the top-bar icon stay in sync within the same document (shared reactive hook, single source of truth ui.theme.mode). - Keyboard operable, visible focus (IconButton building block, ADR 0017). - Also available for signed-out visitors (theme is a device-local preference). - Tests: unit (cycle + setter), e2e extension of theme.spec.ts (icon cycles, radios follow).
fable-5 commented 2026-07-29 10:17:39 +02:00
Author
Collaborator
Copy Link

Merged to main (b799ad1, fast-forward chain via PR #183) and deployed: CD run 464 green, Test+Int verified live (readyz 5/5 both, topbar__theme in bundle index-BZNtqN2k.js). Local evidence in the PR: theme pack 3/3, settings-nav 2/2, a11y light+dark 8/8. Closing.

Merged to main (b799ad1, fast-forward chain via PR #183) and deployed: CD run 464 green, Test+Int verified live (readyz 5/5 both, topbar__theme in bundle index-BZNtqN2k.js). Local evidence in the PR: theme pack 3/3, settings-nav 2/2, a11y light+dark 8/8. Closing.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels   
area:auth

   
area:docs

   
area:export

   
area:ops

   
area:storage

   
area:supply-chain

   
auth

Authentication, permissions, quotas

  
backend

API server (apps/api)

  
blocked

Blocked on external dependency/infrastructure

  
collab

Collaboration server (apps/collab)

  
deployment

Docker, CI/CD, hosting

  
docs

Documentation

  
effort:L

   
effort:M

   
effort:S

   
frontend

SPA (apps/web)

  
plugins

Plugin system and SDK

  
qa

Tests, fixtures, e2e

  
vs-nfd

   
vs-nfd:blocker
No Label
area:auth
area:docs
area:export
area:ops
area:storage
area:supply-chain
auth
backend
blocked
collab
deployment
docs
effort:L
effort:M
effort:S
frontend
plugins
qa
vs-nfd
vs-nfd:blocker
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: stwaidele/dorfteich#182
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?