proxybuy-flutter/DARK_MODE_FIXES_SUMMARY.md

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:

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