[STORY-042] Add Dark Mode Toggle to Settings

Owner: AG-UI Status: TODO Epic: [EPIC-005] User Experience Improvements Priority: P2 Estimate: 5 story points

User Story

As a user who works at night, I want to toggle dark mode in the settings, So that I can reduce eye strain and improve readability in low-light conditions.

Acceptance Criteria

AC1: Settings Toggle Available

Given I am on the settings page When I navigate to the "Appearance" section Then I should see a dark mode toggle switch

AC2: Theme Switches Immediately

Given I am viewing the app in light mode When I toggle dark mode on Then the entire UI should switch to dark theme within 200ms

AC3: Preference Persists

Given I have enabled dark mode When I close and reopen the application Then dark mode should still be active

AC4: System Preference Detection

Given I have not set a preference When the app loads for the first time Then it should default to my system's dark mode preference

Technical Notes

Use CSS custom properties for theme colors
Store preference in localStorage: theme: 'light' | 'dark' | 'system'
Listen to prefers-color-scheme media query for system default
Ensure all components support both themes
Add transition animations for smooth mode switching

Testing Strategy

Test theme switching in all major browsers (Chrome, Firefox, Safari)
Verify localStorage persistence across sessions
Test system preference detection on different OS
Validate WCAG contrast ratios in dark mode
Test with keyboard navigation (accessibility)

Definition of Done

Dark mode toggle implemented in settings UI
Theme preference stored in localStorage
All components styled for dark mode
System preference detection working
Unit tests for theme switching logic
E2E tests for toggle interaction
Documentation updated with theme implementation details
Deployed to staging and tested
Accessibility audit passed (WCAG AA)

2.0 KiB Raw Blame History