Overview
Add light theme support to CondorCode with a single toggle button. Currently the app uses a dark theme by default. Users should be able to switch between dark and light modes, with the preference persisted across sessions.
Requirements
UI Toggle
Location: Right side of the screen (app bar or action panel)
Button: Sun icon ☀️ (or moon 🌙 when in light mode)
Behavior:
- Single tap toggles between dark ↔ light
- Animated transition between icons (sun → moon or moon → sun)
- Smooth theme transition across the entire app
Theme Behavior
Dark Theme (Current)
AppColors.grey800 — backgroundAppColors.grey600 — cardsAppColors.white — textAppColors.neon — accents
Light Theme (New)
- Light background (white/off-white)
- Dark text for readability
- Keep
AppColors.neon as accent color
- Adjust all grey scales appropriately
Scope
All screens must support both themes:
/home — Home screen/courses — Course list/course/:id — Course screen with side panels/knowledgeCheck/* — Knowledge check screens/knowledgeBase/* — Knowledge base screens/contacts — Contacts screen/lesson/* — Quiz/test screens- Any other screens
Technical Requirements
State Management:
- Use existing state management (Bloc/Cubit for main app, Riverpod for admin)
- Create
ThemeCubit or extend existing theme handling
- Persist preference to local storage (SharedPreferences or similar)
Implementation approach:
- Define
ThemeMode (dark/light)
- Create theme data for light mode
- Wrap app in
BlocBuilder<ThemeCubit, ThemeMode> or similar
- Apply theme at MaterialApp level
Files to modify:
- Main app entry point — apply theme
- Each screen — verify colors use theme, not hardcoded
- Widgets in
ui_kit — ensure theme-aware colors
Design Freedom
No mockups provided — contributor should:
- Choose appropriate light theme colors
- Ensure sufficient contrast for accessibility
- Test on both web and mobile
- Propose color scheme in PR for feedback
Suggested approach:
- Background:
Colors.grey[50] or white
- Cards:
Colors.grey[100] or white with shadow
- Text:
Colors.grey[900] or black87
- Secondary text:
Colors.grey[600]
- Accents: keep existing
AppColors.neon
Definition of Done
Labels
feature, good first issue, help wanted, ui/ux
Want to work on this? Comment below and we'll assign it to you!
Overview
Add light theme support to CondorCode with a single toggle button. Currently the app uses a dark theme by default. Users should be able to switch between dark and light modes, with the preference persisted across sessions.
Requirements
UI Toggle
Location: Right side of the screen (app bar or action panel)
Button: Sun icon ☀️ (or moon 🌙 when in light mode)
Behavior:
Theme Behavior
Dark Theme (Current)
AppColors.grey800— backgroundAppColors.grey600— cardsAppColors.white— textAppColors.neon— accentsLight Theme (New)
AppColors.neonas accent colorScope
All screens must support both themes:
/home— Home screen/courses— Course list/course/:id— Course screen with side panels/knowledgeCheck/*— Knowledge check screens/knowledgeBase/*— Knowledge base screens/contacts— Contacts screen/lesson/*— Quiz/test screensTechnical Requirements
State Management:
ThemeCubitor extend existing theme handlingImplementation approach:
ThemeMode(dark/light)BlocBuilder<ThemeCubit, ThemeMode>or similarFiles to modify:
ui_kit— ensure theme-aware colorsDesign Freedom
No mockups provided — contributor should:
Suggested approach:
Colors.grey[50]or whiteColors.grey[100]or white with shadowColors.grey[900]or black87Colors.grey[600]AppColors.neonDefinition of Done
Labels
feature,good first issue,help wanted,ui/uxWant to work on this? Comment below and we'll assign it to you!