Add Dark Mode Support

Overview

Add dark mode support to the Todoist clone app to provide users with a comfortable viewing experience in low-light conditions and follow modern UI/UX standards.

Implementation Checklist

🎨 Theme Infrastructure

• Set up Tailwind CSS dark mode configuration
• Create theme context provider for React
• Add theme state management (localStorage persistence)
• Create theme toggle component/button

🌗 UI Components

• Update landing page for dark mode compatibility
• Style authentication pages (sign-in/sign-up) for dark theme
• Update dashboard layout for dark mode
• Style todo list components for dark theme
• Update todo form components for dark mode
• Style labels and badges for dark theme

🧩 shadcn/ui Components

• Verify all shadcn/ui components support dark mode
• Update custom CSS variables for dark theme
• Test button, card, input, and form components in dark mode
• Ensure proper contrast ratios for accessibility

🔧 Technical Implementation

• Add theme toggle to main navigation/header
• Implement system preference detection (prefers-color-scheme)
• Add smooth transitions between light/dark modes
• Update global CSS variables for consistent theming

🧪 Testing & Quality Assurance

• Test all pages in both light and dark modes
• Verify accessibility standards (WCAG contrast ratios)
• Test theme persistence across browser sessions
• Ensure responsive design works in both themes
• Test authentication flow in dark mode

📱 User Experience

• Add theme preference to user settings (if applicable)
• Ensure Stack Auth components work well with dark theme
• Test all interactive elements (hover states, focus states)
• Verify icon visibility in both themes

📚 Documentation

• Update README with dark mode information
• Document theme switching in CLAUDE.md
• Add screenshots showing both light and dark modes

Acceptance Criteria

• Users can toggle between light and dark modes
• Theme preference is persisted across sessions
• All UI components are properly styled for both themes
• Accessibility standards are maintained
• Authentication flow works seamlessly in both modes
• No visual inconsistencies or contrast issues

Design Considerations

• Follow Tailwind CSS dark mode best practices
• Maintain consistent color palette and branding
• Ensure proper contrast for text readability
• Consider using CSS custom properties for theme variables