Add Dark Mode Support
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
## 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
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by inspecting the existing Tailwind configuration, React entry points, navigation/header, global CSS, and shadcn/ui usage; the issue does not identify specific files or tests. The work is done when users can switch and persist themes, all listed pages and authentication components work in both modes, contrast and responsive behavior are verified, and README and CLAUDE.md are updated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, tailwindcss, typescript
- Domain
- accessibility, authentication, documentation, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100