diff --git a/lib/src/screens/exchange/widgets/currency_picker_item_widget.dart b/lib/src/screens/exchange/widgets/currency_picker_item_widget.dart index a38c09ed7..e7ae2ea52 100644 --- a/lib/src/screens/exchange/widgets/currency_picker_item_widget.dart +++ b/lib/src/screens/exchange/widgets/currency_picker_item_widget.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/palette.dart'; @@ -62,19 +63,13 @@ class PickerItemWidget extends StatelessWidget { style: TextStyle( fontSize: 7.0, fontFamily: 'Lato', - color: Theme.of(context) - .textTheme! - .bodyMedium! - .color!), + color: Theme.of(context).extension()!.thumbColor), ), ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(6.0), //border: Border.all(color: ), - color: Theme.of(context) - .textTheme! - .bodyMedium! - .decorationColor!, + color: Theme.of(context).extension()!.trackColor, ), ), ), diff --git a/lib/src/screens/ionia/cards/ionia_debit_card_page.dart b/lib/src/screens/ionia/cards/ionia_debit_card_page.dart index 5f79c5d48..d23978942 100644 --- a/lib/src/screens/ionia/cards/ionia_debit_card_page.dart +++ b/lib/src/screens/ionia/cards/ionia_debit_card_page.dart @@ -6,6 +6,7 @@ import 'package:cake_wallet/src/screens/ionia/widgets/text_icon_button.dart'; import 'package:cake_wallet/src/widgets/alert_background.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart'; +import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/typography.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/view_model/ionia/ionia_gift_cards_list_view_model.dart'; @@ -179,7 +180,7 @@ class IoniaDebitCardPage extends BasePage { S.of(context).how_to_use_card, style: textLargeSemiBold( color: - Theme.of(context).textTheme!.bodyMedium!.color!, + Theme.of(context).extension()!.thumbColor, ), ), SizedBox(height: 24), diff --git a/lib/src/screens/ionia/widgets/ionia_alert_model.dart b/lib/src/screens/ionia/widgets/ionia_alert_model.dart index d2cea8d85..4890f5612 100644 --- a/lib/src/screens/ionia/widgets/ionia_alert_model.dart +++ b/lib/src/screens/ionia/widgets/ionia_alert_model.dart @@ -1,5 +1,6 @@ import 'package:cake_wallet/src/widgets/alert_background.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; +import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/typography.dart'; import 'package:flutter/material.dart'; @@ -41,7 +42,7 @@ class IoniaAlertModal extends StatelessWidget { Text( title, style: textLargeSemiBold( - color: Theme.of(context).textTheme!.bodyMedium!.color!, + color: Theme.of(context).extension()!.thumbColor, ), ), Container( diff --git a/lib/src/widgets/cake_scrollbar.dart b/lib/src/widgets/cake_scrollbar.dart index 6b8cb59da..bf6604d8e 100644 --- a/lib/src/widgets/cake_scrollbar.dart +++ b/lib/src/widgets/cake_scrollbar.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:flutter/material.dart'; class CakeScrollbar extends StatelessWidget { @@ -28,7 +29,7 @@ class CakeScrollbar extends StatelessWidget { width: width, decoration: BoxDecoration( color: backgroundColor ?? - Theme.of(context).textTheme!.bodyMedium!.decorationColor!, + Theme.of(context).extension()!.trackColor, borderRadius: BorderRadius.all(Radius.circular(3))), child: Stack( children: [ @@ -40,7 +41,7 @@ class CakeScrollbar extends StatelessWidget { width: width, decoration: BoxDecoration( color: thumbColor ?? - Theme.of(context).textTheme!.bodyMedium!.color!, + Theme.of(context).extension()!.thumbColor, borderRadius: BorderRadius.all(Radius.circular(3))), ), ) diff --git a/lib/src/widgets/picker.dart b/lib/src/widgets/picker.dart index c053b8348..b5345f884 100644 --- a/lib/src/widgets/picker.dart +++ b/lib/src/widgets/picker.dart @@ -1,5 +1,6 @@ // ignore_for_file: deprecated_member_use +import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:flutter/material.dart'; import 'package:cw_core/currency.dart'; @@ -340,19 +341,13 @@ class _PickerState extends State> { style: TextStyle( fontSize: 7.0, fontFamily: 'Lato', - color: Theme.of(context) - .textTheme! - .bodyMedium! - .color!), + color: Theme.of(context).extension()!.thumbColor), ), ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(6.0), //border: Border.all(color: ), - color: Theme.of(context) - .textTheme! - .bodyMedium! - .decorationColor!, + color: Theme.of(context).extension()!.trackColor, ), ), ), @@ -427,19 +422,13 @@ class _PickerState extends State> { style: TextStyle( fontSize: 7.0, fontFamily: 'Lato', - color: Theme.of(context) - .textTheme! - .bodyMedium! - .color!), + color: Theme.of(context).extension()!.thumbColor), ), ), decoration: BoxDecoration( borderRadius: BorderRadius.circular(6.0), //border: Border.all(color: ), - color: Theme.of(context) - .textTheme! - .bodyMedium! - .decorationColor!, + color: Theme.of(context).extension()!.trackColor, ), ), ), diff --git a/lib/themes/bright_theme.dart b/lib/themes/bright_theme.dart index 4d6a52275..213ab490f 100644 --- a/lib/themes/bright_theme.dart +++ b/lib/themes/bright_theme.dart @@ -15,8 +15,6 @@ class BrightTheme extends LightTheme { @override Color get primaryColor => Palette.moderateSlateBlue; @override - Color get primaryTextColor => Palette.darkBlueCraiola; - @override Color get containerColor => Palette.moderateLavender; @override @@ -84,25 +82,12 @@ class BrightTheme extends LightTheme { decorationColor: Colors.white // background of tiles (account list) ), - // body -> bodyMedium - bodyMedium: TextStyle( - color: Palette.moderatePurpleBlue, // scrollbar thumb - decorationColor: Palette.periwinkleCraiola // scrollbar background - ), // body2 -> bodyLarge bodyLarge: TextStyle( color: Palette.moderateLavender, // menu header decorationColor: Colors.white, // menu background ) ), - scrollbarTheme: ScrollbarThemeData( - thumbColor: MaterialStateProperty.all(Palette.moderatePurpleBlue), - trackColor: MaterialStateProperty.all(Palette.periwinkleCraiola), - radius: Radius.circular(3), - thickness: MaterialStateProperty.all(6), - thumbVisibility: MaterialStateProperty.all(true), - crossAxisMargin: 6, - ), primaryTextTheme: TextTheme( titleLarge: TextStyle( color: Palette.darkBlueCraiola, // title color @@ -205,8 +190,6 @@ class BrightTheme extends LightTheme { headlineSmall: TextStyle( color: Palette .moderateLavender, // first gradient color of wallet action buttons (wallet list page) - backgroundColor: Palette - .moderateLavender, // second gradient color of wallet action buttons (wallet list page) decorationColor: Colors .white // restore wallet button text color (wallet list page) ), diff --git a/lib/themes/dark_theme.dart b/lib/themes/dark_theme.dart index 17a3e0b60..834c4a260 100644 --- a/lib/themes/dark_theme.dart +++ b/lib/themes/dark_theme.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/themes/theme_base.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/palette.dart'; @@ -23,6 +24,10 @@ class DarkTheme extends ThemeBase { @override Color get dialogBackgroundColor => PaletteDark.darkNightBlue; + @override + CakeScrollbarTheme get scrollbarTheme => CakeScrollbarTheme( + thumbColor: PaletteDark.wildBlueGrey, trackColor: PaletteDark.violetBlue); + @override ThemeData get themeData => super.themeData.copyWith( indicatorColor: PaletteDark.cyanBlue, // page indicator @@ -86,25 +91,12 @@ class DarkTheme extends ThemeBase { decorationColor: PaletteDark .darkOceanBlue // background of tiles (account list) ), - // body1 -> bodyMedium - bodyMedium: TextStyle( - color: PaletteDark.wildBlueGrey, // scrollbar thumb - decorationColor: PaletteDark.violetBlue // scrollbar background - ), // body2 -> bodyLarge bodyLarge: TextStyle( color: PaletteDark.deepPurpleBlue, // menu header decorationColor: PaletteDark.deepPurpleBlue, // menu background ) ), - scrollbarTheme: ScrollbarThemeData( - thumbColor: MaterialStateProperty.all(PaletteDark.wildBlueGrey), - trackColor: MaterialStateProperty.all(PaletteDark.violetBlue), - radius: Radius.circular(3), - thickness: MaterialStateProperty.all(6), - thumbVisibility: MaterialStateProperty.all(true), - crossAxisMargin: 6, - ), primaryTextTheme: TextTheme( // title -> titleLarge titleLarge: TextStyle( @@ -200,7 +192,6 @@ class DarkTheme extends ThemeBase { ), // subtitle -> titleSmall titleSmall: TextStyle( - //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page) color: Colors.white, // QR code (exchange trade page) backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page) @@ -211,8 +202,6 @@ class DarkTheme extends ThemeBase { headlineSmall: TextStyle( color: PaletteDark .distantBlue, // first gradient color of wallet action buttons (wallet list page) - backgroundColor: PaletteDark - .distantNightBlue, // second gradient color of wallet action buttons (wallet list page) decorationColor: Palette .darkBlueCraiola // restore wallet button text color (wallet list page) ), diff --git a/lib/themes/extensions/cake_scrollbar_theme.dart b/lib/themes/extensions/cake_scrollbar_theme.dart new file mode 100644 index 000000000..5aeeafa25 --- /dev/null +++ b/lib/themes/extensions/cake_scrollbar_theme.dart @@ -0,0 +1,28 @@ +import 'package:flutter/material.dart'; + +class CakeScrollbarTheme extends ThemeExtension { + final Color thumbColor; + final Color trackColor; + + CakeScrollbarTheme({required this.thumbColor, required this.trackColor}); + + @override + Object get type => CakeScrollbarTheme; + + @override + CakeScrollbarTheme copyWith({Color? thumbColor, Color? trackColor}) => + CakeScrollbarTheme( + thumbColor: thumbColor ?? this.thumbColor, + trackColor: trackColor ?? this.trackColor); + + @override + CakeScrollbarTheme lerp(ThemeExtension? other, double t) { + if (other is! CakeScrollbarTheme) { + return this; + } + + return CakeScrollbarTheme( + thumbColor: Color.lerp(thumbColor, other.thumbColor, t) ?? thumbColor, + trackColor: Color.lerp(trackColor, other.trackColor, t) ?? trackColor); + } +} diff --git a/lib/themes/light_theme.dart b/lib/themes/light_theme.dart index 6c13ed372..98303351f 100644 --- a/lib/themes/light_theme.dart +++ b/lib/themes/light_theme.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/themes/theme_base.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/palette.dart'; @@ -23,6 +24,11 @@ class LightTheme extends ThemeBase { @override Color get dialogBackgroundColor => Colors.white; + @override + CakeScrollbarTheme get scrollbarTheme => CakeScrollbarTheme( + thumbColor: Palette.moderatePurpleBlue, + trackColor: Palette.periwinkleCraiola); + @override ThemeData get themeData => super.themeData.copyWith( indicatorColor: @@ -86,25 +92,12 @@ class LightTheme extends ThemeBase { decorationColor: Colors.white // background of tiles (account list) ), - // body -> bodyMedium - bodyMedium: TextStyle( - color: Palette.moderatePurpleBlue, // scrollbar thumb - decorationColor: Palette.periwinkleCraiola // scrollbar background - ), // body2 -> bodyLarge bodyLarge: TextStyle( color: Palette.moderateLavender, // menu header decorationColor: Colors.white, // menu background ) ), - scrollbarTheme: ScrollbarThemeData( - thumbColor: MaterialStateProperty.all(Palette.moderatePurpleBlue), - trackColor: MaterialStateProperty.all(Palette.periwinkleCraiola), - radius: Radius.circular(3), - thickness: MaterialStateProperty.all(6), - thumbVisibility: MaterialStateProperty.all(true), - crossAxisMargin: 6, - ), primaryTextTheme: TextTheme( // title -> titleLarge titleLarge: TextStyle( @@ -208,8 +201,6 @@ class LightTheme extends ThemeBase { headlineSmall: TextStyle( color: Palette .moderateLavender, // first gradient color of wallet action buttons (wallet list page) - backgroundColor: Palette - .moderateLavender, // second gradient color of wallet action buttons (wallet list page) decorationColor: Colors .white // restore wallet button text color (wallet list page) ), diff --git a/lib/themes/theme_base.dart b/lib/themes/theme_base.dart index eadbd8a09..cf9aa53a5 100644 --- a/lib/themes/theme_base.dart +++ b/lib/themes/theme_base.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart'; import 'package:cake_wallet/themes/extensions/dashboard_gradient_theme.dart'; import 'package:flutter/material.dart'; @@ -27,17 +28,27 @@ abstract class ThemeBase { seedColor: primaryColor, background: backgroundColor); + ThemeData get generatedThemeData => ThemeData.from( + colorScheme: colorScheme, + textTheme: TextTheme().apply(fontFamily: 'Lato')); + DashboardGradientTheme get pageGradientTheme => DashboardGradientTheme( firstGradientColor: backgroundColor, secondGradientColor: backgroundColor, thirdGradientColor: backgroundColor); - ThemeData get themeData => ThemeData.from( - colorScheme: colorScheme, - textTheme: TextTheme().apply(fontFamily: 'Lato')) - .copyWith( - primaryColor: primaryColor, - cardColor: containerColor, - dialogBackgroundColor: dialogBackgroundColor, - extensions: [pageGradientTheme]); + CakeScrollbarTheme get scrollbarTheme; + + ThemeData get themeData => generatedThemeData.copyWith( + primaryColor: primaryColor, + cardColor: containerColor, + dialogBackgroundColor: dialogBackgroundColor, + extensions: [pageGradientTheme, scrollbarTheme], + scrollbarTheme: ScrollbarThemeData( + thumbColor: MaterialStateProperty.all(scrollbarTheme.thumbColor), + trackColor: MaterialStateProperty.all(scrollbarTheme.trackColor), + radius: Radius.circular(3), + thickness: MaterialStateProperty.all(6), + thumbVisibility: MaterialStateProperty.all(true), + crossAxisMargin: 6)); } \ No newline at end of file