TopherMayor/cabo-voting-app
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

Dark / light theme toggle #8

New Issue
Open
opened 2026-04-29 03:55:18 +00:00 by TopherMayor · 0 comments
TopherMayor commented 2026-04-29 03:55:18 +00:00
Owner
Copy Link

Problem

The app only has a dark theme — some users may prefer or need light mode, especially in bright outdoor settings.

Proposed Solution

  • Add a theme toggle button (🌙/☀️) in the header
  • Store preference in localStorage so it persists across sessions
  • Respect prefers-color-scheme media query as default
  • Define CSS custom properties for both themes — minimal duplication

Acceptance Criteria

  • Toggle button in header, visible at all breakpoints
  • Theme persists across page reloads via localStorage
  • OS preference detected correctly on first visit
  • Smooth 200ms transition on theme switch (no flash)
  • Both themes fully tested — no unstyled elements in either mode
## Problem The app only has a dark theme — some users may prefer or need light mode, especially in bright outdoor settings. ## Proposed Solution - Add a theme toggle button (🌙/☀️) in the header - Store preference in `localStorage` so it persists across sessions - Respect `prefers-color-scheme` media query as default - Define CSS custom properties for both themes — minimal duplication ## Acceptance Criteria - [ ] Toggle button in header, visible at all breakpoints - [ ] Theme persists across page reloads via localStorage - [ ] OS preference detected correctly on first visit - [ ] Smooth 200ms transition on theme switch (no flash) - [ ] Both themes fully tested — no unstyled elements in either mode
TopherMayor added the ui/uxfrontendpriority/low labels 2026-04-29 03:55:18 +00:00
TopherMayor added this to the UI/UX Overhaul v1.0 milestone 2026-04-29 03:56:15 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
Accessibility improvements
 backend
Backend/Express/WebSocket/API
 enhancement
New feature or enhancement
 frontend
Frontend/HTML/CSS/JS
 mobile
Mobile-specific improvements
 priority/high
High priority
 priority/low
Low priority
 priority/medium
Medium priority
 ui/ux
UI/UX work
No Label frontend priority/low ui/ux
Milestone
No items
No Milestone UI/UX Overhaul v1.0
Projects
Clear projects
No project
Assignees
Clear assignees
TopherMayor
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: TopherMayor/cabo-voting-app#8
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?