Skip to content

Add dark mode toggle with system preference detection #8

@MeisnerDan

Description

@MeisnerDan

Implement a dark mode theme using Tailwind's dark mode capabilities. The app should detect the user's system preference (prefers-color-scheme) and auto-enable dark mode if the system is set to dark. Include a manual toggle in the settings or header to override the system preference, and persist the user's choice in localStorage.

Acceptance Criteria

  • Dark mode styles implemented using Tailwind dark: utilities
  • System preference detection on app load
  • Manual toggle button in header or settings page
  • Toggle state persists in localStorage
  • All components have proper contrast in both light and dark modes (WCAG AA standard)
  • shadcn/ui components work correctly in dark mode
  • Dark mode toggle shows current theme state (e.g., sun/moon icon)
  • Works across all pages and modals
  • No jarring flashes or theme shifts during page load

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityAccessibility (WCAG, keyboard, screen readers)dark-modeDark mode themingenhancementNew feature or requestuiUser interface and visual improvements

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions