125 lines
4.4 KiB
Markdown
125 lines
4.4 KiB
Markdown
# Dark Mode Implementation Summary
|
|
|
|
This document summarizes all the hardcoded colors that have been replaced with theme-aware colors to support dark mode throughout the LBA app.
|
|
|
|
## Files Updated
|
|
|
|
### 1. Widgets
|
|
- `lib/widgets/country_popup.dart` ✅
|
|
- `Colors.white` → `AppColors.surface`
|
|
- `Colors.black` → `AppColors.textPrimary`
|
|
- `Colors.black.withOpacity(0.3)` → `AppColors.shadowColor`
|
|
|
|
- `lib/widgets/time_selection_bottom_sheet.dart` ✅
|
|
- `Colors.white` → `AppColors.surface`
|
|
- `Colors.grey[300]` → `AppColors.greyBorder`
|
|
- `Colors.grey.shade300` → `AppColors.divider`
|
|
- `Colors.grey.shade600` → `AppColors.textSecondary`
|
|
- `LightAppColors.offerTimer` → `AppColors.offerTimer`
|
|
- `LightAppColors.fillOrder` → `AppColors.fillOrder`
|
|
- `Colors.black` → `AppColors.textPrimary`
|
|
|
|
- `lib/widgets/similar_business_card.dart` ✅
|
|
- `Colors.black.withOpacity(0.15)` → `AppColors.shadowColor`
|
|
- `Colors.black` → `AppColors.textPrimary`
|
|
- `Colors.white` → `AppColors.surface`
|
|
|
|
- `lib/widgets/gpsPopup.dart` ✅
|
|
- `Colors.black.withOpacity(0.4)` → `AppColors.shadowColor`
|
|
- `LightAppColors.confirmPopup` → `AppColors.confirmPopup`
|
|
- `Colors.black` → `AppColors.textPrimary`
|
|
- `LightAppColors.inputBorder` → `AppColors.inputBorder`
|
|
- `Colors.white` → `AppColors.surface`
|
|
|
|
- `lib/widgets/logout_popup.dart` ✅
|
|
- `Colors.black` → `AppColors.textPrimary`
|
|
|
|
- `lib/widgets/search_bar.dart` ✅
|
|
- `Colors.grey` → `AppColors.textSecondary`
|
|
- `Color.fromARGB(255, 248, 248, 248)` → `AppColors.profileField`
|
|
- `Color.fromARGB(255, 14, 63, 102)` → `AppColors.borderPrimary`
|
|
|
|
- `lib/widgets/reviews.dart` ✅
|
|
- `LightAppColors.confirmButton` → `AppColors.confirmButton`
|
|
- `LightAppColors.hint` → `AppColors.hint`
|
|
|
|
- `lib/widgets/reserve_bottom_sheet.dart` ✅
|
|
- `Colors.white` → `AppColors.surface`
|
|
- `Colors.grey[300]` → `AppColors.greyBorder`
|
|
- `Color.fromARGB(255, 234, 247, 238)` → `AppColors.deliverySelectedButton`
|
|
- `Colors.grey.shade300` → `AppColors.divider`
|
|
- `Colors.grey.shade700` → `AppColors.textSecondary`
|
|
- `Colors.black87` → `AppColors.textPrimary`
|
|
- `Colors.grey` → `AppColors.textSecondary`
|
|
- `Colors.black` → `AppColors.textPrimary`
|
|
- `Colors.red` → `AppColors.errorColor`
|
|
- `Colors.orangeAccent` → `AppColors.offerTimer`
|
|
- `Colors.grey.shade800` → `AppColors.textSecondary`
|
|
|
|
- `lib/widgets/recording_indicator.dart` ✅
|
|
- `Colors.red` → `AppColors.errorColor` (all instances)
|
|
|
|
- `lib/widgets/recorded_audio_preview.dart` ✅
|
|
- `Colors.white` → `AppColors.surface`
|
|
- `Colors.grey[700]` → `AppColors.textSecondary`
|
|
- `Colors.grey[300]` → `AppColors.greyBorder`
|
|
- `Colors.grey[600]` → `AppColors.textSecondary`
|
|
- `Colors.red` → `AppColors.errorColor`
|
|
|
|
### 2. Screens
|
|
- `lib/screens/qr_scanner/qr_scanner_page.dart` ✅
|
|
- `Colors.red` → `AppColors.errorColor`
|
|
- `Colors.black` → `AppColors.scaffoldBackground`
|
|
- `Colors.black87` → `AppColors.scaffoldBackground`
|
|
- `Colors.white54` → `AppColors.textSecondary`
|
|
- `Colors.white` → `AppColors.textPrimary`
|
|
- `Colors.grey[100]` → `AppColors.cardBackground`
|
|
|
|
- `lib/screens/mains/profile/transactions_wallets_page.dart` ✅
|
|
- `Colors.white` → `AppColors.scaffoldBackground`
|
|
|
|
### 3. Features/Auth
|
|
- `lib/features/auth/presentation/pages/otp_verification_page.dart` ✅
|
|
- `Colors.red` → `AppColors.errorColor`
|
|
|
|
## Colors System Already in Place
|
|
|
|
The app already has a comprehensive color system with:
|
|
- `LightAppColors` class with all light theme colors
|
|
- `DarkAppColors` class with all dark theme colors
|
|
- `AppColors` class with dynamic getters that switch based on `_isDarkMode` flag
|
|
|
|
## Remaining Files That May Need Attention
|
|
|
|
Some files still contain hardcoded colors that should be reviewed:
|
|
|
|
1. `lib/widgets/optionSelector.dart`
|
|
- `Colors.blue`, `Colors.grey`, `Colors.black`
|
|
|
|
2. `lib/widgets/legal_and_policies_page.dart`
|
|
- `Colors.black87`
|
|
|
|
3. `lib/widgets/dividerTitle.dart`
|
|
- `Colors.grey`
|
|
|
|
4. `lib/widgets/custom_switch_tile.dart`
|
|
- `Colors.white`
|
|
|
|
5. `lib/widgets/customBottomSheet.dart`
|
|
- `Colors.white`, `Colors.grey[400]`
|
|
|
|
## How to Use
|
|
|
|
To toggle dark mode, call:
|
|
```dart
|
|
AppColors.setDarkMode(true); // Enable dark mode
|
|
AppColors.setDarkMode(false); // Enable light mode
|
|
```
|
|
|
|
## Next Steps
|
|
|
|
1. Fix remaining files with hardcoded colors
|
|
2. Test the dark mode implementation thoroughly
|
|
3. Consider adding system theme detection
|
|
4. Update any theme-related documentation
|