Dark Mode / Theme System #40
Description
Description
Design a dark mode theme and theme system for Callora. Should include light mode (if applicable), dark mode, and system preference detection.
Requirements and Context
- Must maintain brand identity
- Ensure readability in both modes
- Consistent color usage
- Smooth theme transitions
Detailed Design Specifications
Theme Modes:
- Dark mode (default for Callora)
- Light mode (optional)
- System preference (auto-detect)
Color Palette:
Dark Mode:
- Background: Dark (#0f1419 or similar)
- Surface: Darker gray (#1a2332)
- Text: Light (#e6edf3)
- Accent: Stellar blue (#58a6ff)
- Borders: Dark gray (#30363d)
Light Mode (if applicable):
- Background: White or light gray
- Surface: White
- Text: Dark
- Accent: Stellar blue
- Borders: Light gray
Components:
- All components designed in both themes
- Consistent contrast ratios
- Accessible colors (WCAG AA minimum)
Theme Toggle:
- Toggle in settings
- Smooth transition animation
- Persist preference (localStorage)
Design Deliverables:
- Dark mode color palette
- Light mode color palette (if applicable)
- All components in both themes
- Theme toggle component design
- Transition specifications
- Design specifications
Guidelines
- Maintain brand
- Accessible contrast
- Smooth transitions
- Consistent theming
- Timeframe: 96 hours
- Project details: #