From 762395ce507815727cc3a072173a6f5bc1caa1ae Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Fri, 3 Oct 2025 15:57:56 +0700 Subject: [PATCH] fix theme --- lib/core/constants/environment_config.dart | 2 +- lib/core/theme/app_theme.dart | 128 +++++++++++++----- .../auth/presentation/pages/login_page.dart | 2 +- .../presentation/pages/settings_page.dart | 46 +++---- 4 files changed, 115 insertions(+), 63 deletions(-) diff --git a/lib/core/constants/environment_config.dart b/lib/core/constants/environment_config.dart index 6051d95..5cfabdc 100644 --- a/lib/core/constants/environment_config.dart +++ b/lib/core/constants/environment_config.dart @@ -17,7 +17,7 @@ class EnvironmentConfig { static String get baseUrl { switch (currentEnvironment) { case Environment.development: - return 'http://localhost:3000'; + return 'http://103.188.82.191:4003'; case Environment.staging: return 'https://api-staging.example.com'; case Environment.production: diff --git a/lib/core/theme/app_theme.dart b/lib/core/theme/app_theme.dart index 0d1c03a..208af41 100644 --- a/lib/core/theme/app_theme.dart +++ b/lib/core/theme/app_theme.dart @@ -16,8 +16,11 @@ class AppTheme { useMaterial3: true, colorScheme: AppColors.lightScheme, - // Typography - textTheme: AppTypography.textTheme, + // Typography - Apply theme colors to text styles + textTheme: AppTypography.textTheme.apply( + bodyColor: AppColors.lightScheme.onSurface, + displayColor: AppColors.lightScheme.onSurface, + ), // App bar theme appBarTheme: _lightAppBarTheme, @@ -40,7 +43,7 @@ class AppTheme { floatingActionButtonTheme: _lightFabTheme, // Input field themes - inputDecorationTheme: _inputDecorationTheme, + inputDecorationTheme: _getInputDecorationTheme(AppColors.lightScheme), // Other component themes bottomNavigationBarTheme: _lightBottomNavTheme, @@ -52,14 +55,18 @@ class AppTheme { shape: RoundedRectangleBorder( borderRadius: AppSpacing.dialogRadius, ), - titleTextStyle: AppTypography.headlineSmall, - contentTextStyle: AppTypography.bodyMedium, + titleTextStyle: AppTypography.headlineSmall.copyWith( + color: AppColors.lightScheme.onSurface, + ), + contentTextStyle: AppTypography.bodyMedium.copyWith( + color: AppColors.lightScheme.onSurfaceVariant, + ), ), bottomSheetTheme: _bottomSheetTheme, - snackBarTheme: _snackBarTheme, + snackBarTheme: _getSnackBarTheme(AppColors.lightScheme), chipTheme: _lightChipTheme, dividerTheme: _dividerTheme, - listTileTheme: _listTileTheme, + listTileTheme: _getListTileTheme(AppColors.lightScheme), switchTheme: _lightSwitchTheme, checkboxTheme: _lightCheckboxTheme, radioTheme: _lightRadioTheme, @@ -92,8 +99,11 @@ class AppTheme { useMaterial3: true, colorScheme: AppColors.darkScheme, - // Typography - textTheme: AppTypography.textTheme, + // Typography - Apply theme colors to text styles + textTheme: AppTypography.textTheme.apply( + bodyColor: AppColors.darkScheme.onSurface, + displayColor: AppColors.darkScheme.onSurface, + ), // App bar theme appBarTheme: _darkAppBarTheme, @@ -116,7 +126,7 @@ class AppTheme { floatingActionButtonTheme: _darkFabTheme, // Input field themes - inputDecorationTheme: _inputDecorationTheme, + inputDecorationTheme: _getInputDecorationTheme(AppColors.darkScheme), // Other component themes bottomNavigationBarTheme: _darkBottomNavTheme, @@ -128,14 +138,18 @@ class AppTheme { shape: RoundedRectangleBorder( borderRadius: AppSpacing.dialogRadius, ), - titleTextStyle: AppTypography.headlineSmall, - contentTextStyle: AppTypography.bodyMedium, + titleTextStyle: AppTypography.headlineSmall.copyWith( + color: AppColors.darkScheme.onSurface, + ), + contentTextStyle: AppTypography.bodyMedium.copyWith( + color: AppColors.darkScheme.onSurfaceVariant, + ), ), bottomSheetTheme: _bottomSheetTheme, - snackBarTheme: _snackBarTheme, + snackBarTheme: _getSnackBarTheme(AppColors.darkScheme), chipTheme: _darkChipTheme, dividerTheme: _dividerTheme, - listTileTheme: _listTileTheme, + listTileTheme: _getListTileTheme(AppColors.darkScheme), switchTheme: _darkSwitchTheme, checkboxTheme: _darkCheckboxTheme, radioTheme: _darkRadioTheme, @@ -285,7 +299,7 @@ class AppTheme { ), ); - static InputDecorationTheme get _inputDecorationTheme => InputDecorationTheme( + static InputDecorationTheme _getInputDecorationTheme(ColorScheme colorScheme) => InputDecorationTheme( filled: true, contentPadding: const EdgeInsets.all(AppSpacing.fieldPadding), border: OutlineInputBorder( @@ -308,35 +322,65 @@ class AppTheme { borderRadius: AppSpacing.fieldRadius, borderSide: const BorderSide(width: AppSpacing.borderWidthThick), ), - errorStyle: AppTypography.errorText, - hintStyle: AppTypography.hintText, - labelStyle: AppTypography.bodyMedium, + errorStyle: AppTypography.errorText.copyWith(color: colorScheme.error), + hintStyle: AppTypography.hintText.copyWith(color: colorScheme.onSurfaceVariant), + labelStyle: AppTypography.bodyMedium.copyWith(color: colorScheme.onSurfaceVariant), ); - static BottomNavigationBarThemeData get _lightBottomNavTheme => const BottomNavigationBarThemeData( + static BottomNavigationBarThemeData get _lightBottomNavTheme => BottomNavigationBarThemeData( type: BottomNavigationBarType.fixed, elevation: AppSpacing.elevationMedium, - selectedLabelStyle: AppTypography.labelSmall, - unselectedLabelStyle: AppTypography.labelSmall, + selectedLabelStyle: AppTypography.labelSmall.copyWith( + color: AppColors.lightScheme.primary, + ), + unselectedLabelStyle: AppTypography.labelSmall.copyWith( + color: AppColors.lightScheme.onSurfaceVariant, + ), ); - static BottomNavigationBarThemeData get _darkBottomNavTheme => const BottomNavigationBarThemeData( + static BottomNavigationBarThemeData get _darkBottomNavTheme => BottomNavigationBarThemeData( type: BottomNavigationBarType.fixed, elevation: AppSpacing.elevationMedium, - selectedLabelStyle: AppTypography.labelSmall, - unselectedLabelStyle: AppTypography.labelSmall, + selectedLabelStyle: AppTypography.labelSmall.copyWith( + color: AppColors.darkScheme.primary, + ), + unselectedLabelStyle: AppTypography.labelSmall.copyWith( + color: AppColors.darkScheme.onSurfaceVariant, + ), ); static NavigationBarThemeData get _lightNavigationBarTheme => NavigationBarThemeData( height: 80, elevation: AppSpacing.elevationMedium, - labelTextStyle: WidgetStateProperty.all(AppTypography.labelSmall), + labelTextStyle: WidgetStateProperty.resolveWith( + (Set states) { + if (states.contains(WidgetState.selected)) { + return AppTypography.labelSmall.copyWith( + color: AppColors.lightScheme.primary, + ); + } + return AppTypography.labelSmall.copyWith( + color: AppColors.lightScheme.onSurfaceVariant, + ); + }, + ), ); static NavigationBarThemeData get _darkNavigationBarTheme => NavigationBarThemeData( height: 80, elevation: AppSpacing.elevationMedium, - labelTextStyle: WidgetStateProperty.all(AppTypography.labelSmall), + labelTextStyle: WidgetStateProperty.resolveWith( + (Set states) { + if (states.contains(WidgetState.selected)) { + return AppTypography.labelSmall.copyWith( + color: AppColors.darkScheme.primary, + ); + } + return AppTypography.labelSmall.copyWith( + color: AppColors.darkScheme.onSurfaceVariant, + ); + }, + ), ); static NavigationRailThemeData get _lightNavigationRailTheme => const NavigationRailThemeData( @@ -369,13 +413,15 @@ class AppTheme { ), ); - static SnackBarThemeData get _snackBarTheme => SnackBarThemeData( + static SnackBarThemeData _getSnackBarTheme(ColorScheme colorScheme) => SnackBarThemeData( elevation: AppSpacing.elevationMedium, shape: RoundedRectangleBorder( borderRadius: AppSpacing.radiusSM, ), behavior: SnackBarBehavior.floating, - contentTextStyle: AppTypography.bodyMedium, + contentTextStyle: AppTypography.bodyMedium.copyWith( + color: colorScheme.onInverseSurface, + ), ); static ChipThemeData get _lightChipTheme => ChipThemeData( @@ -383,7 +429,9 @@ class AppTheme { shape: RoundedRectangleBorder( borderRadius: AppSpacing.radiusSM, ), - labelStyle: AppTypography.labelMedium, + labelStyle: AppTypography.labelMedium.copyWith( + color: AppColors.lightScheme.onSurfaceVariant, + ), ); static ChipThemeData get _darkChipTheme => ChipThemeData( @@ -391,7 +439,9 @@ class AppTheme { shape: RoundedRectangleBorder( borderRadius: AppSpacing.radiusSM, ), - labelStyle: AppTypography.labelMedium, + labelStyle: AppTypography.labelMedium.copyWith( + color: AppColors.darkScheme.onSurfaceVariant, + ), ); static const DividerThemeData _dividerTheme = DividerThemeData( @@ -399,13 +449,17 @@ class AppTheme { space: AppSpacing.dividerSpacing, ); - static ListTileThemeData get _listTileTheme => const ListTileThemeData( - contentPadding: EdgeInsets.symmetric( + static ListTileThemeData _getListTileTheme(ColorScheme colorScheme) => ListTileThemeData( + contentPadding: const EdgeInsets.symmetric( horizontal: AppSpacing.listItemPadding, vertical: AppSpacing.listItemMargin, ), - titleTextStyle: AppTypography.titleMedium, - subtitleTextStyle: AppTypography.bodyMedium, + titleTextStyle: AppTypography.titleMedium.copyWith( + color: colorScheme.onSurface, + ), + subtitleTextStyle: AppTypography.bodyMedium.copyWith( + color: colorScheme.onSurfaceVariant, + ), ); static SwitchThemeData get _lightSwitchTheme => SwitchThemeData( @@ -463,7 +517,11 @@ class AppTheme { /// Create responsive theme based on screen size static ThemeData responsiveTheme(BuildContext context, {required bool isDark}) { final baseTheme = isDark ? darkTheme : lightTheme; - final responsiveTextTheme = AppTypography.responsiveTextTheme(context); + final colorScheme = isDark ? AppColors.darkScheme : AppColors.lightScheme; + final responsiveTextTheme = AppTypography.responsiveTextTheme(context).apply( + bodyColor: colorScheme.onSurface, + displayColor: colorScheme.onSurface, + ); return baseTheme.copyWith( textTheme: responsiveTextTheme, diff --git a/lib/features/auth/presentation/pages/login_page.dart b/lib/features/auth/presentation/pages/login_page.dart index 1fe6905..c7790b9 100644 --- a/lib/features/auth/presentation/pages/login_page.dart +++ b/lib/features/auth/presentation/pages/login_page.dart @@ -284,7 +284,7 @@ class _LoginPageState extends ConsumerState ) { return AnimatedContainer( duration: AppSpacing.animationNormal, - height: isKeyboardVisible ? 120 : 180, + height: isKeyboardVisible ? 120 : 190, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ diff --git a/lib/features/settings/presentation/pages/settings_page.dart b/lib/features/settings/presentation/pages/settings_page.dart index 6788b9a..05e9431 100644 --- a/lib/features/settings/presentation/pages/settings_page.dart +++ b/lib/features/settings/presentation/pages/settings_page.dart @@ -575,38 +575,32 @@ class ThemeSettingsPage extends ConsumerWidget { body: Column( children: [ const SizedBox(height: 16), - RadioListTile( - title: const Text('Light'), - subtitle: const Text('Use light theme'), - value: ThemeMode.light, - groupValue: themeMode, - onChanged: (value) { - if (value != null) { - ref.read(themeModeProvider.notifier).setThemeMode(value); - } - }, - ), - RadioListTile( - title: const Text('Dark'), - subtitle: const Text('Use dark theme'), - value: ThemeMode.dark, - groupValue: themeMode, - onChanged: (value) { - if (value != null) { - ref.read(themeModeProvider.notifier).setThemeMode(value); - } - }, - ), - RadioListTile( - title: const Text('System'), - subtitle: const Text('Follow system theme'), - value: ThemeMode.system, + RadioGroup( groupValue: themeMode, onChanged: (value) { if (value != null) { ref.read(themeModeProvider.notifier).setThemeMode(value); } }, + child: Column( + children: [ + RadioListTile( + title: const Text('Light'), + subtitle: const Text('Use light theme'), + value: ThemeMode.light, + ), + RadioListTile( + title: const Text('Dark'), + subtitle: const Text('Use dark theme'), + value: ThemeMode.dark, + ), + RadioListTile( + title: const Text('System'), + subtitle: const Text('Follow system theme'), + value: ThemeMode.system, + ), + ], + ), ), const SizedBox(height: 32), Padding(