diff --git a/lib/entities/item_from_theme.dart b/lib/entities/item_from_theme.dart new file mode 100644 index 000000000..94f4db1f7 --- /dev/null +++ b/lib/entities/item_from_theme.dart @@ -0,0 +1,17 @@ +import 'package:cake_wallet/themes.dart'; +import 'package:flutter/material.dart'; + +dynamic itemFromTheme({ + @required Themes currentTheme, + @required Map items}) { + switch (currentTheme) { + case Themes.light: + return items[Themes.light]; + case Themes.bright: + return items[Themes.bright]; + case Themes.dark: + return items[Themes.dark]; + default: + return items[Themes.light]; + } +} \ No newline at end of file diff --git a/lib/entities/preferences_key.dart b/lib/entities/preferences_key.dart index 53d59460a..f9bf224f8 100644 --- a/lib/entities/preferences_key.dart +++ b/lib/entities/preferences_key.dart @@ -9,7 +9,7 @@ class PreferencesKey { static const shouldSaveRecipientAddressKey = 'save_recipient_address'; static const allowBiometricalAuthenticationKey = 'allow_biometrical_authentication'; - static const currentDarkTheme = 'dark_theme'; + static const currentTheme = 'current_theme'; static const displayActionListModeKey = 'display_list_mode'; static const currentPinLength = 'current_pin_length'; static const currentLanguageCode = 'language_code'; diff --git a/lib/main.dart b/lib/main.dart index 9cd55e054..3f72adcba 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,3 +1,5 @@ +import 'package:cake_wallet/entities/item_from_theme.dart'; +import 'package:cake_wallet/themes.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:hive/hive.dart'; @@ -123,16 +125,20 @@ class App extends StatelessWidget { @override Widget build(BuildContext context) { final settingsStore = getIt.get().settingsStore; - - if (settingsStore.theme == null) { - settingsStore.isDarkTheme = false; - } + final currentTheme = settingsStore.currentTheme ?? Themes.light; + final Map items = { + Themes.light: Brightness.dark, + Themes.bright: Brightness.dark, + Themes.dark: Brightness.light + }; final statusBarColor = Colors.transparent; final statusBarBrightness = - settingsStore.isDarkTheme ? Brightness.light : Brightness.dark; + itemFromTheme(currentTheme: currentTheme, items: items) as Brightness + ?? Brightness.dark; final statusBarIconBrightness = - settingsStore.isDarkTheme ? Brightness.light : Brightness.dark; + itemFromTheme(currentTheme: currentTheme, items: items) as Brightness + ?? Brightness.dark; final authenticationStore = getIt.get(); final initialRoute = authenticationStore.state == AuthenticationState.denied ? Routes.disclaimer diff --git a/lib/palette.dart b/lib/palette.dart index f9d0a1e3c..5558df381 100644 --- a/lib/palette.dart +++ b/lib/palette.dart @@ -43,6 +43,7 @@ class Palette { static const Color alizarinRed = Color.fromRGBO(233, 45, 45, 1.0); static const Color moderateSlateBlue = Color.fromRGBO(129, 93, 251, 1.0); static const Color brightOrange = Color.fromRGBO(255, 102, 0, 1.0); + static const Color dullGray = Color.fromRGBO(98, 98, 98, 1.0); // FIXME: Rename. static const Color eee = Color.fromRGBO(236, 239, 245, 1.0); @@ -94,6 +95,7 @@ class PaletteDark { static const Color deepVioletBlue = Color.fromRGBO(52, 66, 104, 1.0); static const Color lightPurpleBlue = Color.fromRGBO(120, 133, 170, 1.0); static const Color indicatorVioletBlue = Color.fromRGBO(59, 72, 119, 1.0); + static const Color granite = Color.fromRGBO(48, 51, 60, 1.0); // FIXME: Rename. static const Color eee = Color.fromRGBO(236, 239, 245, 1.0); diff --git a/lib/src/screens/base_page.dart b/lib/src/screens/base_page.dart index b34cb7310..d7e567da8 100644 --- a/lib/src/screens/base_page.dart +++ b/lib/src/screens/base_page.dart @@ -1,3 +1,5 @@ +import 'package:cake_wallet/entities/item_from_theme.dart'; +import 'package:cake_wallet/themes.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/palette.dart'; @@ -9,13 +11,19 @@ enum AppBarStyle { regular, withShadow, transparent } abstract class BasePage extends StatelessWidget { BasePage() - : _scaffoldKey = GlobalKey(), - _closeButtonImage = Image.asset('assets/images/close_button.png'), - _closeButtonImageDarkTheme = - Image.asset('assets/images/close_button_dark_theme.png'); + : _scaffoldKey = GlobalKey(); final GlobalKey _scaffoldKey; - final Image _closeButtonImage; - final Image _closeButtonImageDarkTheme; + + static final Image closeButtonImage = + Image.asset('assets/images/close_button.png'); + static final Image closeButtonImageDarkTheme = + Image.asset('assets/images/close_button_dark_theme.png'); + + final Map buttonItems = { + Themes.light: closeButtonImage, + Themes.bright: closeButtonImage, + Themes.dark: closeButtonImageDarkTheme + }; String get title => null; @@ -37,7 +45,7 @@ abstract class BasePage extends StatelessWidget { Widget Function(BuildContext, Widget) get rootWrapper => null; - bool get isDarkTheme => getIt.get().isDarkTheme; + Themes get currentTheme => getIt.get().currentTheme; void onOpenEndDrawer() => _scaffoldKey.currentState.openEndDrawer(); @@ -52,7 +60,8 @@ abstract class BasePage extends StatelessWidget { color: titleColor ?? Theme.of(context).primaryTextTheme.title.color, size: 16,); final _closeButton = - isDarkTheme ? _closeButtonImageDarkTheme : _closeButtonImage; + itemFromTheme(currentTheme: currentTheme, items: buttonItems) as Image + ?? closeButtonImage; return SizedBox( height: 37, @@ -88,8 +97,7 @@ abstract class BasePage extends StatelessWidget { Widget floatingActionButton(BuildContext context) => null; ObstructingPreferredSizeWidget appBar(BuildContext context) { - final appBarColor = - isDarkTheme ? backgroundDarkColor : backgroundLightColor; + final appBarColor = _setBackgroundColor(); switch (appBarStyle) { case AppBarStyle.regular: @@ -131,10 +139,11 @@ abstract class BasePage extends StatelessWidget { @override Widget build(BuildContext context) { + final _backgroundColor = _setBackgroundColor(); + final root = Scaffold( key: _scaffoldKey, - backgroundColor: - isDarkTheme ? backgroundDarkColor : backgroundLightColor, + backgroundColor: _backgroundColor, resizeToAvoidBottomPadding: resizeToAvoidBottomPadding, extendBodyBehindAppBar: extendBodyBehindAppBar, endDrawer: endDrawer, @@ -144,4 +153,17 @@ abstract class BasePage extends StatelessWidget { return rootWrapper?.call(context, root) ?? root; } + + Color _setBackgroundColor() { + switch (currentTheme) { + case Themes.light: + return backgroundLightColor; + case Themes.bright: + return backgroundLightColor; + case Themes.dark: + return backgroundDarkColor; + default: + return backgroundLightColor; + } + } } diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index e3260c91a..e085d7880 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/lib/src/screens/exchange/exchange_page.dart @@ -95,9 +95,8 @@ class ExchangePage extends BasePage { return KeyboardActions( config: KeyboardActionsConfig( keyboardActionsPlatform: KeyboardActionsPlatform.IOS, - keyboardBarColor: isDarkTheme - ? Color.fromRGBO(48, 51, 60, 1.0) - : Color.fromRGBO(98, 98, 98, 1.0), + keyboardBarColor: Theme.of(context).accentTextTheme.body2 + .backgroundColor, nextFocus: false, actions: [ KeyboardActionsItem( diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 33a20793e..1f3eb8a3e 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -1,6 +1,4 @@ -import 'package:cake_wallet/di.dart'; import 'package:cake_wallet/routes.dart'; -import 'package:cake_wallet/store/settings_store.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:mobx/mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -16,23 +14,37 @@ import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_pick import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/core/execution_state.dart'; import 'package:cake_wallet/view_model/wallet_new_vm.dart'; +import 'package:cake_wallet/themes.dart'; +import 'package:cake_wallet/entities/item_from_theme.dart'; class NewWalletPage extends BasePage { NewWalletPage(this._walletNewVM); final WalletNewVM _walletNewVM; + static final walletNameImage = Image.asset('assets/images/wallet_name.png'); + static final walletNameLightImage = + Image.asset('assets/images/wallet_name_light.png'); + final Map items = { + Themes.light: walletNameLightImage, + Themes.bright: walletNameLightImage, + Themes.dark: walletNameImage + }; + @override String get title => S.current.new_wallet; @override - Widget body(BuildContext context) => WalletNameForm(_walletNewVM); + Widget body(BuildContext context) => WalletNameForm(_walletNewVM, + itemFromTheme(currentTheme: currentTheme, items: items) as Image + ?? walletNameLightImage); } class WalletNameForm extends StatefulWidget { - WalletNameForm(this._walletNewVM); + WalletNameForm(this._walletNewVM, this.walletImage); final WalletNewVM _walletNewVM; + final Image walletImage; @override _WalletNameFormState createState() => _WalletNameFormState(_walletNewVM); @@ -43,9 +55,6 @@ class _WalletNameFormState extends State { static const aspectRatioImage = 1.22; - final walletNameImage = Image.asset('assets/images/wallet_name.png'); - final walletNameLightImage = - Image.asset('assets/images/wallet_name_light.png'); final _formKey = GlobalKey(); final _languageSelectorKey = GlobalKey(); ReactionDisposer _stateReaction; @@ -78,10 +87,6 @@ class _WalletNameFormState extends State { @override Widget build(BuildContext context) { - final walletImage = getIt.get().isDarkTheme - ? walletNameImage - : walletNameLightImage; - return Container( padding: EdgeInsets.only(top: 24), child: ScrollableWithBottomSection( @@ -92,7 +97,7 @@ class _WalletNameFormState extends State { padding: EdgeInsets.only(left: 12, right: 12), child: AspectRatio( aspectRatio: aspectRatioImage, - child: FittedBox(child: walletImage, fit: BoxFit.fill)), + child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), ), Padding( padding: EdgeInsets.only(top: 24), diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index cf3b3b896..e984f7ad5 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -1,6 +1,5 @@ -import 'package:cake_wallet/di.dart'; +import 'package:cake_wallet/entities/item_from_theme.dart'; import 'package:cake_wallet/entities/wallet_type.dart'; -import 'package:cake_wallet/store/settings_store.dart'; import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:cake_wallet/generated/i18n.dart'; @@ -8,6 +7,7 @@ import 'package:cake_wallet/src/screens/base_page.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/src/screens/new_wallet/widgets/select_button.dart'; +import 'package:cake_wallet/themes.dart'; class NewWalletTypePage extends BasePage { NewWalletTypePage({this.onTypeSelected, this.isNewWallet = true}); @@ -15,6 +15,15 @@ class NewWalletTypePage extends BasePage { final void Function(BuildContext, WalletType) onTypeSelected; final bool isNewWallet; + static final walletTypeImage = Image.asset('assets/images/wallet_type.png'); + static final walletTypeLightImage = + Image.asset('assets/images/wallet_type_light.png'); + final Map items = { + Themes.light: walletTypeLightImage, + Themes.bright: walletTypeLightImage, + Themes.dark: walletTypeImage + }; + @override String get title => isNewWallet ? S.current.new_wallet @@ -22,13 +31,18 @@ class NewWalletTypePage extends BasePage { @override Widget body(BuildContext context) => - WalletTypeForm(onTypeSelected: onTypeSelected); + WalletTypeForm( + onTypeSelected: onTypeSelected, + walletImage: + itemFromTheme(currentTheme: currentTheme, items: items) as Image + ?? walletTypeLightImage); } class WalletTypeForm extends StatefulWidget { - WalletTypeForm({this.onTypeSelected}); + WalletTypeForm({this.onTypeSelected, this.walletImage}); final void Function(BuildContext, WalletType) onTypeSelected; + final Image walletImage; @override WalletTypeFormState createState() => WalletTypeFormState(); @@ -41,8 +55,6 @@ class WalletTypeFormState extends State { Image.asset('assets/images/monero_logo.png', height: 24, width: 24); final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24); - final walletTypeImage = Image.asset('assets/images/wallet_type.png'); - final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png'); WalletType selected; List types; @@ -55,9 +67,6 @@ class WalletTypeFormState extends State { @override Widget build(BuildContext context) { - final walletImage = getIt.get().isDarkTheme - ? walletTypeImage : walletTypeLightImage; - return Container( padding: EdgeInsets.only(top: 24), child: ScrollableWithBottomSection( @@ -69,7 +78,7 @@ class WalletTypeFormState extends State { padding: EdgeInsets.only(left: 12, right: 12), child: AspectRatio( aspectRatio: aspectRatioImage, - child: FittedBox(child: walletImage, fit: BoxFit.fill)), + child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), ), Padding( padding: EdgeInsets.only(top: 48), diff --git a/lib/src/screens/receive/receive_page.dart b/lib/src/screens/receive/receive_page.dart index 5126a1527..c03bf36c7 100644 --- a/lib/src/screens/receive/receive_page.dart +++ b/lib/src/screens/receive/receive_page.dart @@ -74,9 +74,8 @@ class ReceivePage extends BasePage { return KeyboardActions( config: KeyboardActionsConfig( keyboardActionsPlatform: KeyboardActionsPlatform.IOS, - keyboardBarColor: isDarkTheme - ? Color.fromRGBO(48, 51, 60, 1.0) - : Color.fromRGBO(98, 98, 98, 1.0), + keyboardBarColor: Theme.of(context).accentTextTheme.body2 + .backgroundColor, nextFocus: false, actions: [ KeyboardActionsItem( diff --git a/lib/src/screens/seed/pre_seed_page.dart b/lib/src/screens/seed/pre_seed_page.dart index b9ea48eae..4f63c5a79 100644 --- a/lib/src/screens/seed/pre_seed_page.dart +++ b/lib/src/screens/seed/pre_seed_page.dart @@ -1,16 +1,22 @@ -import 'package:cake_wallet/di.dart'; +import 'package:cake_wallet/entities/item_from_theme.dart'; import 'package:cake_wallet/routes.dart'; -import 'package:cake_wallet/store/settings_store.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; +import 'package:cake_wallet/themes.dart'; class PreSeedPage extends BasePage { static final imageLight = Image.asset('assets/images/pre_seed_light.png'); static final imageDark = Image.asset('assets/images/pre_seed_dark.png'); + final Map items = { + Themes.light: imageLight, + Themes.bright: imageLight, + Themes.dark: imageDark + }; + @override Widget leading(BuildContext context) => null; @@ -20,7 +26,8 @@ class PreSeedPage extends BasePage { @override Widget body(BuildContext context) { final image = - getIt.get().isDarkTheme ? imageDark : imageLight; + itemFromTheme(currentTheme: currentTheme, items: items) as Image + ?? imageLight; return WillPopScope( onWillPop: () async => false, diff --git a/lib/src/screens/seed/wallet_seed_page.dart b/lib/src/screens/seed/wallet_seed_page.dart index 0e47ee676..135ca9c46 100644 --- a/lib/src/screens/seed/wallet_seed_page.dart +++ b/lib/src/screens/seed/wallet_seed_page.dart @@ -1,7 +1,6 @@ -import 'package:cake_wallet/di.dart'; +import 'package:cake_wallet/entities/item_from_theme.dart'; import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart'; -import 'package:cake_wallet/store/settings_store.dart'; import 'package:cake_wallet/utils/show_bar.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:flutter/cupertino.dart'; @@ -13,12 +12,18 @@ import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/view_model/wallet_seed_view_model.dart'; +import 'package:cake_wallet/themes.dart'; class WalletSeedPage extends BasePage { WalletSeedPage(this.walletSeedViewModel, {@required this.isNewWalletCreated}); static final imageLight = Image.asset('assets/images/crypto_lock_light.png'); static final imageDark = Image.asset('assets/images/crypto_lock.png'); + final Map items = { + Themes.light: imageLight, + Themes.bright: imageLight, + Themes.dark: imageDark + }; @override String get title => S.current.seed_title; @@ -84,7 +89,8 @@ class WalletSeedPage extends BasePage { @override Widget body(BuildContext context) { final image = - getIt.get().isDarkTheme ? imageDark : imageLight; + itemFromTheme(currentTheme: currentTheme, items: items) as Image + ?? imageLight; return WillPopScope(onWillPop: () async => false, child: Container( padding: EdgeInsets.all(24), diff --git a/lib/src/screens/seed_language/seed_language_page.dart b/lib/src/screens/seed_language/seed_language_page.dart index 701b5dccc..d6d5580ee 100644 --- a/lib/src/screens/seed_language/seed_language_page.dart +++ b/lib/src/screens/seed_language/seed_language_page.dart @@ -1,6 +1,5 @@ -import 'package:cake_wallet/di.dart'; +import 'package:cake_wallet/entities/item_from_theme.dart'; import 'package:cake_wallet/src/widgets/seed_language_selector.dart'; -import 'package:cake_wallet/store/settings_store.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; @@ -9,23 +8,39 @@ import 'package:cake_wallet/src/screens/base_page.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/src/screens/seed_language/widgets/seed_language_picker.dart'; +import 'package:cake_wallet/themes.dart'; class SeedLanguage extends BasePage { SeedLanguage({this.onConfirm}); final Function(BuildContext, String) onConfirm; + static final walletNameImage = Image.asset('assets/images/wallet_name.png'); + static final walletNameLightImage = + Image.asset('assets/images/wallet_name_light.png'); + final Map items = { + Themes.light: walletNameLightImage, + Themes.bright: walletNameLightImage, + Themes.dark: walletNameImage + }; + @override String get title => S.current.wallet_list_restore_wallet; @override - Widget body(BuildContext context) => SeedLanguageForm(onConfirm: onConfirm); + Widget body(BuildContext context) => + SeedLanguageForm( + onConfirm: onConfirm, + walletImage: + itemFromTheme(currentTheme: currentTheme, items: items) as Image + ?? walletNameLightImage); } class SeedLanguageForm extends StatefulWidget { - SeedLanguageForm({this.onConfirm}); + SeedLanguageForm({this.onConfirm, this.walletImage}); final Function(BuildContext, String) onConfirm; + final Image walletImage; @override SeedLanguageFormState createState() => SeedLanguageFormState(); @@ -33,18 +48,10 @@ class SeedLanguageForm extends StatefulWidget { class SeedLanguageFormState extends State { static const aspectRatioImage = 1.22; - - final walletNameImage = Image.asset('assets/images/wallet_name.png'); - final walletNameLightImage = - Image.asset('assets/images/wallet_name_light.png'); final _languageSelectorKey = GlobalKey(); @override Widget build(BuildContext context) { - final walletImage = getIt.get().isDarkTheme - ? walletNameImage - : walletNameLightImage; - return Container( padding: EdgeInsets.only(top: 24), child: ScrollableWithBottomSection( @@ -55,7 +62,8 @@ class SeedLanguageFormState extends State { padding: EdgeInsets.only(left: 12, right: 12), child: AspectRatio( aspectRatio: aspectRatioImage, - child: FittedBox(child: walletImage, fit: BoxFit.fill)), + child: FittedBox(child: widget.walletImage, + fit: BoxFit.fill)), ), Padding( padding: EdgeInsets.only(top: 40), diff --git a/lib/src/screens/send/send_page.dart b/lib/src/screens/send/send_page.dart index cd4c5b06d..50fb14d04 100644 --- a/lib/src/screens/send/send_page.dart +++ b/lib/src/screens/send/send_page.dart @@ -83,9 +83,8 @@ class SendPage extends BasePage { return KeyboardActions( config: KeyboardActionsConfig( keyboardActionsPlatform: KeyboardActionsPlatform.IOS, - keyboardBarColor: isDarkTheme - ? Color.fromRGBO(48, 51, 60, 1.0) - : Color.fromRGBO(98, 98, 98, 1.0), + keyboardBarColor: Theme.of(context).accentTextTheme.body2 + .backgroundColor, nextFocus: false, actions: [ KeyboardActionsItem( diff --git a/lib/src/screens/send/send_template_page.dart b/lib/src/screens/send/send_template_page.dart index b53117309..bb2b1ec6a 100644 --- a/lib/src/screens/send/send_template_page.dart +++ b/lib/src/screens/send/send_template_page.dart @@ -49,9 +49,8 @@ class SendTemplatePage extends BasePage { return KeyboardActions( config: KeyboardActionsConfig( keyboardActionsPlatform: KeyboardActionsPlatform.IOS, - keyboardBarColor: isDarkTheme - ? Color.fromRGBO(48, 51, 60, 1.0) - : Color.fromRGBO(98, 98, 98, 1.0), + keyboardBarColor: Theme.of(context).accentTextTheme.body2 + .backgroundColor, nextFocus: false, actions: [ KeyboardActionsItem( diff --git a/lib/src/screens/welcome/welcome_page.dart b/lib/src/screens/welcome/welcome_page.dart index 7a5b65516..4d73e0fcd 100644 --- a/lib/src/screens/welcome/welcome_page.dart +++ b/lib/src/screens/welcome/welcome_page.dart @@ -1,15 +1,21 @@ -import 'package:cake_wallet/di.dart'; -import 'package:cake_wallet/store/settings_store.dart'; +import 'package:cake_wallet/entities/item_from_theme.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/themes.dart'; class WelcomePage extends BasePage { static const aspectRatioImage = 1.25; - final welcomeImageLight = Image.asset('assets/images/welcome_light.png'); - final welcomeImageDark = Image.asset('assets/images/welcome.png'); + static final welcomeImageLight = Image.asset('assets/images/welcome_light.png'); + static final welcomeImageDark = Image.asset('assets/images/welcome.png'); + + final Map items = { + Themes.light: welcomeImageLight, + Themes.bright: welcomeImageLight, + Themes.dark: welcomeImageDark + }; @override Widget build(BuildContext context) { @@ -23,10 +29,9 @@ class WelcomePage extends BasePage { @override Widget body(BuildContext context) { - final welcomeImage = getIt - .get() - .isDarkTheme - ? welcomeImageDark : welcomeImageLight; + final welcomeImage = + itemFromTheme(currentTheme: currentTheme, items: items) as Image + ?? welcomeImageLight; final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, diff --git a/lib/store/settings_store.dart b/lib/store/settings_store.dart index b4b76bb8d..785763066 100644 --- a/lib/store/settings_store.dart +++ b/lib/store/settings_store.dart @@ -28,7 +28,7 @@ abstract class SettingsStoreBase with Store { @required BalanceDisplayMode initialBalanceDisplayMode, @required bool initialSaveRecipientAddress, @required bool initialAllowBiometricalAuthentication, - @required bool initialDarkTheme, + @required Themes initialTheme, @required int initialPinLength, @required String initialLanguageCode, // @required String initialCurrentLocale, @@ -40,7 +40,7 @@ abstract class SettingsStoreBase with Store { balanceDisplayMode = initialBalanceDisplayMode; shouldSaveRecipientAddress = initialSaveRecipientAddress; allowBiometricalAuthentication = initialAllowBiometricalAuthentication; - isDarkTheme = initialDarkTheme; + currentTheme = initialTheme; pinCodeLength = initialPinLength; languageCode = initialLanguageCode; currentNode = nodes[WalletType.monero]; @@ -65,9 +65,9 @@ abstract class SettingsStoreBase with Store { shouldSaveRecipientAddress)); reaction( - (_) => isDarkTheme, - (bool isDarkTheme) => sharedPreferences.setBool( - PreferencesKey.currentDarkTheme, isDarkTheme)); + (_) => currentTheme, + (Themes theme) => sharedPreferences.setInt( + PreferencesKey.currentTheme, theme.serialize())); reaction( (_) => allowBiometricalAuthentication, @@ -111,7 +111,7 @@ abstract class SettingsStoreBase with Store { bool allowBiometricalAuthentication; @observable - bool isDarkTheme; + Themes currentTheme; @observable int pinCodeLength; @@ -120,7 +120,7 @@ abstract class SettingsStoreBase with Store { Node currentNode; @computed - ThemeData get theme => isDarkTheme ? Themes.darkTheme : Themes.lightTheme; + ThemeData get theme => currentTheme.themeData; @observable String languageCode; @@ -154,8 +154,8 @@ abstract class SettingsStoreBase with Store { final allowBiometricalAuthentication = sharedPreferences .getBool(PreferencesKey.allowBiometricalAuthenticationKey) ?? false; - final savedDarkTheme = - sharedPreferences.getBool(PreferencesKey.currentDarkTheme) ?? false; + final savedTheme = Themes.deserialize( + raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? 0); final actionListDisplayMode = ObservableList(); actionListDisplayMode.addAll(deserializeActionlistDisplayModes( sharedPreferences.getInt(PreferencesKey.displayActionListModeKey) ?? @@ -188,7 +188,7 @@ abstract class SettingsStoreBase with Store { initialBalanceDisplayMode: currentBalanceDisplayMode, initialSaveRecipientAddress: shouldSaveRecipientAddress, initialAllowBiometricalAuthentication: allowBiometricalAuthentication, - initialDarkTheme: savedDarkTheme, + initialTheme: savedTheme, actionlistDisplayMode: actionListDisplayMode, initialPinLength: pinLength, initialLanguageCode: savedLanguageCode); diff --git a/lib/themes.dart b/lib/themes.dart index aa7af6cf2..4158a8d91 100644 --- a/lib/themes.dart +++ b/lib/themes.dart @@ -1,353 +1,408 @@ import 'package:flutter/material.dart'; import 'palette.dart'; +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/entities/enumerable_item.dart'; -class Themes { +class Themes extends EnumerableItem with Serializable { + const Themes({String title, int raw}) + : super(title: title, raw: raw); + + static const all = [ + Themes.light, + Themes.bright, + Themes.dark, + ]; + + static const light = Themes(title: 'Light', raw: 0); + static const bright = Themes(title: 'Bright', raw: 1); + static const dark = Themes(title: 'Dark', raw: 2); + + static Themes deserialize({int raw}) { + switch (raw) { + case 0: + return light; + case 1: + return bright; + case 2: + return dark; + default: + return null; + } + } + + ThemeData get themeData { + switch (this) { + case Themes.light: + return lightTheme; + case Themes.bright: + return lightTheme; + case Themes.dark: + return darkTheme; + default: + return null; + } + } + + @override + String toString() { + switch (this) { + case Themes.light: + return 'Light'; + case Themes.bright: + return 'Bright'; + case Themes.dark: + return 'Dark'; + default: + return ''; + } + } static final ThemeData lightTheme = ThemeData( - fontFamily: 'Lato', - brightness: Brightness.light, - backgroundColor: Colors.white, - accentColor: Palette.blueCraiola, // first gradient color - scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color - primaryColor: Palette.redHat, // third gradient color - buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page - indicatorColor: Colors.white.withOpacity(0.5), // page indicator - hoverColor: Colors.white, // amount hint text (receive page) - dividerColor: Palette.paleBlue, - hintColor: Palette.gray, - textTheme: TextTheme( - title: TextStyle( - color: Colors.white, // sync_indicator text - backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator - decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator + fontFamily: 'Lato', + brightness: Brightness.light, + backgroundColor: Colors.white, + accentColor: Palette.blueCraiola, // first gradient color + scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color + primaryColor: Palette.redHat, // third gradient color + buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page + indicatorColor: Colors.white.withOpacity(0.5), // page indicator + hoverColor: Colors.white, // amount hint text (receive page) + dividerColor: Palette.paleBlue, + hintColor: Palette.gray, + textTheme: TextTheme( + title: TextStyle( + color: Colors.white, // sync_indicator text + backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator + decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator + ), + caption: TextStyle( + color: Palette.shineOrange, // not synced light + decorationColor: Colors.white, // filter icon + ), + overline: TextStyle( + color: Colors.white.withOpacity(0.2), // filter button + backgroundColor: Colors.white.withOpacity(0.5), // date section row + decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows) + ), + subhead: TextStyle( + color: Colors.white.withOpacity(0.2), // address button border + decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget) + ), + headline: TextStyle( + color: Colors.white, // qr code + decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page) + ), + display1: TextStyle( + color: PaletteDark.lightBlueGrey, // icons color (receive page) + decorationColor: Palette.lavender, // icons background (receive page) + ), + display2: TextStyle( + color: Palette.darkBlueCraiola, // text color of tiles (receive page) + decorationColor: Colors.white // background of tiles (receive page) + ), + display3: TextStyle( + color: Colors.white, // text color of current tile (receive page), + //decorationColor: Palette.blueCraiola // background of current tile (receive page) + decorationColor: Palette.moderateSlateBlue // background of current tile (receive page) + ), + display4: TextStyle( + color: Palette.violetBlue, // text color of tiles (account list) + decorationColor: Colors.white // background of tiles (account list) + ), + subtitle: TextStyle( + color: Palette.moderateSlateBlue, // text color of current tile (account list) + decorationColor: Colors.white // background of current tile (account list) + ), + body1: TextStyle( + color: Palette.moderatePurpleBlue, // scrollbar thumb + decorationColor: Palette.periwinkleCraiola // scrollbar background + ), + body2: TextStyle( + color: Palette.moderateLavender, // menu header + decorationColor: Colors.white, // menu background + ) ), - caption: TextStyle( - color: Palette.shineOrange, // not synced light - decorationColor: Colors.white, // filter icon + primaryTextTheme: TextTheme( + title: TextStyle( + color: Palette.darkBlueCraiola, // title color + backgroundColor: Palette.wildPeriwinkle // textfield underline + ), + caption: TextStyle( + color: PaletteDark.pigeonBlue, // secondary text + decorationColor: Palette.wildLavender // menu divider + ), + overline: TextStyle( + color: Palette.darkGray, // transaction/trade details titles + decorationColor: Colors.white.withOpacity(0.5), // placeholder + ), + subhead: TextStyle( + color: Palette.blueCraiola, // first gradient color (send page) + decorationColor: Palette.pinkFlamingo // second gradient color (send page) + ), + headline: TextStyle( + color: Colors.white.withOpacity(0.5), // text field border color (send page) + decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page) + ), + display1: TextStyle( + color: Colors.white.withOpacity(0.2), // text field button color (send page) + decorationColor: Colors.white // text field button icon color (send page) + ), + display2: TextStyle( + color: Colors.white.withOpacity(0.5), // estimated fee (send page) + decorationColor: Palette.shadowWhite // template dotted border (send page) + ), + display3: TextStyle( + color: Palette.darkBlueCraiola, // template new text (send page) + decorationColor: Palette.shadowWhite // template background color (send page) + ), + display4: TextStyle( + color: Palette.darkBlueCraiola, // template title (send page) + decorationColor: Palette.niagara // receive amount text (exchange page) + ), + subtitle: TextStyle( + color: Palette.blueCraiola, // first gradient color top panel (exchange page) + decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page) + ), + body1: TextStyle( + color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page) + decorationColor: Palette.pinkFlamingo.withOpacity(0.7) // second gradient color bottom panel (exchange page) + ), + body2: TextStyle( + color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page) + decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page) + ) ), - overline: TextStyle( - color: Colors.white.withOpacity(0.2), // filter button - backgroundColor: Colors.white.withOpacity(0.5), // date section row - decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows) + focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page) + accentTextTheme: TextTheme( + title: TextStyle( + color: Colors.white, // picker background + backgroundColor: Palette.periwinkleCraiola, // picker divider + decorationColor: Colors.white // dialog background + ), + caption: TextStyle( + color: Palette.moderateLavender, // container (confirm exchange) + backgroundColor: Palette.moderateLavender, // button background (confirm exchange) + decorationColor: Palette.darkBlueCraiola, // text color (information page) + ), + subtitle: TextStyle( + color: Palette.darkBlueCraiola, // QR code (exchange trade page) + backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) + //decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page) + decorationColor: Palette.moderateSlateBlue // crete new wallet button background (wallet list page) + ), + headline: 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) + ), + subhead: TextStyle( + color: Palette.darkGray, // titles color (filter widget) + backgroundColor: Palette.periwinkle, // divider color (filter widget) + decorationColor: Colors.white // checkbox background (filter widget) + ), + overline: TextStyle( + color: Palette.wildPeriwinkle, // checkbox bounds (filter widget) + decorationColor: Colors.white, // menu subname + ), + display1: TextStyle( + color: Palette.blueCraiola, // first gradient color (menu header) + decorationColor: Palette.pinkFlamingo // second gradient color(menu header) + ), + display2: TextStyle( + color: Palette.shadowWhite, // action button color (address text field) + decorationColor: Palette.darkGray // hint text (seed widget) + ), + display3: TextStyle( + color: Palette.darkGray, // hint text (new wallet page) + decorationColor: Palette.periwinkleCraiola // underline (new wallet page) + ), + display4: TextStyle( + color: Palette.darkGray, // switch background (settings page) + ), + body1: TextStyle( + color: Palette.darkGray, // indicators (PIN code) + decorationColor: Palette.darkGray // switch (PIN code) + ), + body2: TextStyle( + color: Palette.moderateSlateBlue, // primary buttons, alert right buttons + decorationColor: Palette.brightOrange, // alert left button, + backgroundColor: Palette.dullGray // keyboard bar color + ), ), - subhead: TextStyle( - color: Colors.white.withOpacity(0.2), // address button border - decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget) - ), - headline: TextStyle( - color: Colors.white, // qr code - decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page) - ), - display1: TextStyle( - color: PaletteDark.lightBlueGrey, // icons color (receive page) - decorationColor: Palette.lavender, // icons background (receive page) - ), - display2: TextStyle( - color: Palette.darkBlueCraiola, // text color of tiles (receive page) - decorationColor: Colors.white // background of tiles (receive page) - ), - display3: TextStyle( - color: Colors.white, // text color of current tile (receive page), - //decorationColor: Palette.blueCraiola // background of current tile (receive page) - decorationColor: Palette.moderateSlateBlue // background of current tile (receive page) - ), - display4: TextStyle( - color: Palette.violetBlue, // text color of tiles (account list) - decorationColor: Colors.white // background of tiles (account list) - ), - subtitle: TextStyle( - color: Palette.moderateSlateBlue, // text color of current tile (account list) - decorationColor: Colors.white // background of current tile (account list) - ), - body1: TextStyle( - color: Palette.moderatePurpleBlue, // scrollbar thumb - decorationColor: Palette.periwinkleCraiola // scrollbar background - ), - body2: TextStyle( - color: Palette.moderateLavender, // menu header - decorationColor: Colors.white, // menu background - ) - ), - primaryTextTheme: TextTheme( - title: TextStyle( - color: Palette.darkBlueCraiola, // title color - backgroundColor: Palette.wildPeriwinkle // textfield underline - ), - caption: TextStyle( - color: PaletteDark.pigeonBlue, // secondary text - decorationColor: Palette.wildLavender // menu divider - ), - overline: TextStyle( - color: Palette.darkGray, // transaction/trade details titles - decorationColor: Colors.white.withOpacity(0.5), // placeholder - ), - subhead: TextStyle( - color: Palette.blueCraiola, // first gradient color (send page) - decorationColor: Palette.pinkFlamingo // second gradient color (send page) - ), - headline: TextStyle( - color: Colors.white.withOpacity(0.5), // text field border color (send page) - decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page) - ), - display1: TextStyle( - color: Colors.white.withOpacity(0.2), // text field button color (send page) - decorationColor: Colors.white // text field button icon color (send page) - ), - display2: TextStyle( - color: Colors.white.withOpacity(0.5), // estimated fee (send page) - decorationColor: Palette.shadowWhite // template dotted border (send page) - ), - display3: TextStyle( - color: Palette.darkBlueCraiola, // template new text (send page) - decorationColor: Palette.shadowWhite // template background color (send page) - ), - display4: TextStyle( - color: Palette.darkBlueCraiola, // template title (send page) - decorationColor: Palette.niagara // receive amount text (exchange page) - ), - subtitle: TextStyle( - color: Palette.blueCraiola, // first gradient color top panel (exchange page) - decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page) - ), - body1: TextStyle( - color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page) - decorationColor: Palette.pinkFlamingo.withOpacity(0.7) // second gradient color bottom panel (exchange page) - ), - body2: TextStyle( - color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page) - decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page) - ) - ), - focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page) - accentTextTheme: TextTheme( - title: TextStyle( - color: Colors.white, // picker background - backgroundColor: Palette.periwinkleCraiola, // picker divider - decorationColor: Colors.white // dialog background - ), - caption: TextStyle( - color: Palette.moderateLavender, // container (confirm exchange) - backgroundColor: Palette.moderateLavender, // button background (confirm exchange) - decorationColor: Palette.darkBlueCraiola, // text color (information page) - ), - subtitle: TextStyle( - color: Palette.darkBlueCraiola, // QR code (exchange trade page) - backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) - //decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page) - decorationColor: Palette.moderateSlateBlue // crete new wallet button background (wallet list page) - ), - headline: 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) - ), - subhead: TextStyle( - color: Palette.darkGray, // titles color (filter widget) - backgroundColor: Palette.periwinkle, // divider color (filter widget) - decorationColor: Colors.white // checkbox background (filter widget) - ), - overline: TextStyle( - color: Palette.wildPeriwinkle, // checkbox bounds (filter widget) - decorationColor: Colors.white, // menu subname - ), - display1: TextStyle( - color: Palette.blueCraiola, // first gradient color (menu header) - decorationColor: Palette.pinkFlamingo // second gradient color(menu header) - ), - display2: TextStyle( - color: Palette.shadowWhite, // action button color (address text field) - decorationColor: Palette.darkGray // hint text (seed widget) - ), - display3: TextStyle( - color: Palette.darkGray, // hint text (new wallet page) - decorationColor: Palette.periwinkleCraiola // underline (new wallet page) - ), - display4: TextStyle( - color: Palette.darkGray, // switch background (settings page) - ), - body1: TextStyle( - color: Palette.darkGray, // indicators (PIN code) - decorationColor: Palette.darkGray // switch (PIN code) - ), - body2: TextStyle( - color: Palette.moderateSlateBlue, // primary buttons, alert right buttons - decorationColor: Palette.brightOrange // alert left button - ), - ), - cardColor: Palette.moderateSlateBlue // bottom button (action list) + cardColor: Palette.moderateSlateBlue // bottom button (action list) ); - static final ThemeData darkTheme = ThemeData( - fontFamily: 'Lato', - brightness: Brightness.dark, - backgroundColor: PaletteDark.backgroundColor, - accentColor: PaletteDark.backgroundColor, // first gradient color - scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color - primaryColor: PaletteDark.backgroundColor, // third gradient color - buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page - indicatorColor: PaletteDark.cyanBlue, // page indicator - hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page) - dividerColor: PaletteDark.dividerColor, - hintColor: PaletteDark.pigeonBlue, // menu - textTheme: TextTheme( - title: TextStyle( - color: PaletteDark.wildBlue, // sync_indicator text - backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator - decorationColor: PaletteDark.oceanBlue // not synced sync_indicator + fontFamily: 'Lato', + brightness: Brightness.dark, + backgroundColor: PaletteDark.backgroundColor, + accentColor: PaletteDark.backgroundColor, // first gradient color + scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color + primaryColor: PaletteDark.backgroundColor, // third gradient color + buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page + indicatorColor: PaletteDark.cyanBlue, // page indicator + hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page) + dividerColor: PaletteDark.dividerColor, + hintColor: PaletteDark.pigeonBlue, // menu + textTheme: TextTheme( + title: TextStyle( + color: PaletteDark.wildBlue, // sync_indicator text + backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator + decorationColor: PaletteDark.oceanBlue // not synced sync_indicator + ), + caption: TextStyle( + color: PaletteDark.orangeYellow, // not synced light + decorationColor: PaletteDark.wildBlue, // filter icon + ), + overline: TextStyle( + color: PaletteDark.oceanBlue, // filter button + backgroundColor: PaletteDark.darkCyanBlue, // date section row + decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows) + ), + subhead: TextStyle( + color: PaletteDark.nightBlue, // address button border + decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget) + ), + headline: TextStyle( + color: PaletteDark.lightBlueGrey, // qr code + decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page) + ), + display1: TextStyle( + color: Colors.white, // icons color (receive page) + decorationColor: PaletteDark.distantNightBlue, // icons background (receive page) + ), + display2: TextStyle( + color: Colors.white, // text color of tiles (receive page) + decorationColor: PaletteDark.nightBlue // background of tiles (receive page) + ), + display3: TextStyle( + color: Palette.blueCraiola, // text color of current tile (receive page) + decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page) + ), + display4: TextStyle( + color: Colors.white, // text color of tiles (account list) + decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list) + ), + subtitle: TextStyle( + color: Palette.blueCraiola, // text color of current tile (account list) + decorationColor: PaletteDark.darkNightBlue // background of current tile (account list) + ), + body1: TextStyle( + color: PaletteDark.wildBlueGrey, // scrollbar thumb + decorationColor: PaletteDark.violetBlue // scrollbar background + ), + body2: TextStyle( + color: PaletteDark.deepPurpleBlue, // menu header + decorationColor: PaletteDark.deepPurpleBlue, // menu background + ) ), - caption: TextStyle( - color: PaletteDark.orangeYellow, // not synced light - decorationColor: PaletteDark.wildBlue, // filter icon + primaryTextTheme: TextTheme( + title: TextStyle( + color: Colors.white, // title color + backgroundColor: PaletteDark.darkOceanBlue // textfield underline + ), + caption: TextStyle( + color: PaletteDark.darkCyanBlue, // secondary text + decorationColor: PaletteDark.darkOceanBlue // menu divider + ), + overline: TextStyle( + color: PaletteDark.lightBlueGrey, // transaction/trade details titles + decorationColor: Colors.grey, // placeholder + ), + subhead: TextStyle( + color: PaletteDark.darkNightBlue, // first gradient color (send page) + decorationColor: PaletteDark.darkNightBlue // second gradient color (send page) + ), + headline: TextStyle( + color: PaletteDark.lightVioletBlue, // text field border color (send page) + decorationColor: PaletteDark.darkCyanBlue, // text field hint color (send page) + ), + display1: TextStyle( + color: PaletteDark.buttonNightBlue, // text field button color (send page) + decorationColor: PaletteDark.gray // text field button icon color (send page) + ), + display2: TextStyle( + color: Colors.white, // estimated fee (send page) + decorationColor: PaletteDark.darkCyanBlue // template dotted border (send page) + ), + display3: TextStyle( + color: PaletteDark.darkCyanBlue, // template new text (send page) + decorationColor: PaletteDark.darkVioletBlue // template background color (send page) + ), + display4: TextStyle( + color: PaletteDark.cyanBlue, // template title (send page) + decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page) + ), + subtitle: TextStyle( + color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page) + decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page) + ), + body1: TextStyle( + color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page) + decorationColor: PaletteDark.darkNightBlue // second gradient color bottom panel (exchange page) + ), + body2: TextStyle( + color: PaletteDark.blueGrey, // text field border on top panel (exchange page) + decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page) + ) ), - overline: TextStyle( - color: PaletteDark.oceanBlue, // filter button - backgroundColor: PaletteDark.darkCyanBlue, // date section row - decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows) + focusColor: PaletteDark.moderateBlue, // text field button (exchange page) + accentTextTheme: TextTheme( + title: TextStyle( + color: PaletteDark.nightBlue, // picker background + backgroundColor: PaletteDark.dividerColor, // picker divider + decorationColor: PaletteDark.darkNightBlue // dialog background + ), + caption: TextStyle( + color: PaletteDark.nightBlue, // container (confirm exchange) + backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange) + decorationColor: Palette.darkLavender, // text color (information page) + ), + subtitle: TextStyle( + //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page) + color: Colors.white, // QR code (exchange trade page) + backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page) + decorationColor: Colors.white // crete new wallet button background (wallet list page) + ), + headline: 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) + ), + subhead: TextStyle( + color: Colors.white, // titles color (filter widget) + backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget) + decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget) + ), + overline: TextStyle( + color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget) + decorationColor: PaletteDark.darkCyanBlue, // menu subname + ), + display1: TextStyle( + color: PaletteDark.deepPurpleBlue, // first gradient color (menu header) + decorationColor: PaletteDark.deepPurpleBlue // second gradient color(menu header) + ), + display2: TextStyle( + color: PaletteDark.nightBlue, // action button color (address text field) + decorationColor: PaletteDark.darkCyanBlue // hint text (seed widget) + ), + display3: TextStyle( + color: PaletteDark.cyanBlue, // hint text (new wallet page) + decorationColor: PaletteDark.darkGrey // underline (new wallet page) + ), + display4: TextStyle( + color: PaletteDark.deepVioletBlue, // switch background (settings page) + ), + body1: TextStyle( + color: PaletteDark.indicatorVioletBlue, // indicators (PIN code) + decorationColor: PaletteDark.lightPurpleBlue // switch (PIN code) + ), + body2: TextStyle( + color: Palette.blueCraiola, // primary buttons, alert right buttons + decorationColor: Palette.alizarinRed, // alert left button + backgroundColor: PaletteDark.granite // keyboard bar color + ), ), - subhead: TextStyle( - color: PaletteDark.nightBlue, // address button border - decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget) - ), - headline: TextStyle( - color: PaletteDark.lightBlueGrey, // qr code - decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page) - ), - display1: TextStyle( - color: Colors.white, // icons color (receive page) - decorationColor: PaletteDark.distantNightBlue, // icons background (receive page) - ), - display2: TextStyle( - color: Colors.white, // text color of tiles (receive page) - decorationColor: PaletteDark.nightBlue // background of tiles (receive page) - ), - display3: TextStyle( - color: Palette.blueCraiola, // text color of current tile (receive page) - decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page) - ), - display4: TextStyle( - color: Colors.white, // text color of tiles (account list) - decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list) - ), - subtitle: TextStyle( - color: Palette.blueCraiola, // text color of current tile (account list) - decorationColor: PaletteDark.darkNightBlue // background of current tile (account list) - ), - body1: TextStyle( - color: PaletteDark.wildBlueGrey, // scrollbar thumb - decorationColor: PaletteDark.violetBlue // scrollbar background - ), - body2: TextStyle( - color: PaletteDark.deepPurpleBlue, // menu header - decorationColor: PaletteDark.deepPurpleBlue, // menu background - ) - ), - primaryTextTheme: TextTheme( - title: TextStyle( - color: Colors.white, // title color - backgroundColor: PaletteDark.darkOceanBlue // textfield underline - ), - caption: TextStyle( - color: PaletteDark.darkCyanBlue, // secondary text - decorationColor: PaletteDark.darkOceanBlue // menu divider - ), - overline: TextStyle( - color: PaletteDark.lightBlueGrey, // transaction/trade details titles - decorationColor: Colors.grey, // placeholder - ), - subhead: TextStyle( - color: PaletteDark.darkNightBlue, // first gradient color (send page) - decorationColor: PaletteDark.darkNightBlue // second gradient color (send page) - ), - headline: TextStyle( - color: PaletteDark.lightVioletBlue, // text field border color (send page) - decorationColor: PaletteDark.darkCyanBlue, // text field hint color (send page) - ), - display1: TextStyle( - color: PaletteDark.buttonNightBlue, // text field button color (send page) - decorationColor: PaletteDark.gray // text field button icon color (send page) - ), - display2: TextStyle( - color: Colors.white, // estimated fee (send page) - decorationColor: PaletteDark.darkCyanBlue // template dotted border (send page) - ), - display3: TextStyle( - color: PaletteDark.darkCyanBlue, // template new text (send page) - decorationColor: PaletteDark.darkVioletBlue // template background color (send page) - ), - display4: TextStyle( - color: PaletteDark.cyanBlue, // template title (send page) - decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page) - ), - subtitle: TextStyle( - color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page) - decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page) - ), - body1: TextStyle( - color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page) - decorationColor: PaletteDark.darkNightBlue // second gradient color bottom panel (exchange page) - ), - body2: TextStyle( - color: PaletteDark.blueGrey, // text field border on top panel (exchange page) - decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page) - ) - ), - focusColor: PaletteDark.moderateBlue, // text field button (exchange page) - accentTextTheme: TextTheme( - title: TextStyle( - color: PaletteDark.nightBlue, // picker background - backgroundColor: PaletteDark.dividerColor, // picker divider - decorationColor: PaletteDark.darkNightBlue // dialog background - ), - caption: TextStyle( - color: PaletteDark.nightBlue, // container (confirm exchange) - backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange) - decorationColor: Palette.darkLavender, // text color (information page) - ), - subtitle: TextStyle( - //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page) - color: Colors.white, // QR code (exchange trade page) - backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page) - decorationColor: Colors.white // crete new wallet button background (wallet list page) - ), - headline: 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) - ), - subhead: TextStyle( - color: Colors.white, // titles color (filter widget) - backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget) - decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget) - ), - overline: TextStyle( - color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget) - decorationColor: PaletteDark.darkCyanBlue, // menu subname - ), - display1: TextStyle( - color: PaletteDark.deepPurpleBlue, // first gradient color (menu header) - decorationColor: PaletteDark.deepPurpleBlue // second gradient color(menu header) - ), - display2: TextStyle( - color: PaletteDark.nightBlue, // action button color (address text field) - decorationColor: PaletteDark.darkCyanBlue // hint text (seed widget) - ), - display3: TextStyle( - color: PaletteDark.cyanBlue, // hint text (new wallet page) - decorationColor: PaletteDark.darkGrey // underline (new wallet page) - ), - display4: TextStyle( - color: PaletteDark.deepVioletBlue, // switch background (settings page) - ), - body1: TextStyle( - color: PaletteDark.indicatorVioletBlue, // indicators (PIN code) - decorationColor: PaletteDark.lightPurpleBlue // switch (PIN code) - ), - body2: TextStyle( - color: Palette.blueCraiola, // primary buttons, alert right buttons - decorationColor: Palette.alizarinRed // alert left button - ), - ), - cardColor: PaletteDark.darkNightBlue // bottom button (action list) + cardColor: PaletteDark.darkNightBlue // bottom button (action list) ); } \ No newline at end of file diff --git a/lib/view_model/settings/settings_view_model.dart b/lib/view_model/settings/settings_view_model.dart index a3ae7a0aa..10f152c73 100644 --- a/lib/view_model/settings/settings_view_model.dart +++ b/lib/view_model/settings/settings_view_model.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/src/screens/pin_code/pin_code_widget.dart'; +import 'package:cake_wallet/themes.dart'; import 'package:flutter/cupertino.dart'; import 'package:mobx/mobx.dart'; import 'package:package_info/package_info.dart'; @@ -106,11 +107,12 @@ abstract class SettingsViewModelBase with Store { setAllowBiometricalAuthentication(value); } }), - SwitcherListItem( - title: S.current.settings_dark_mode, - value: () => _settingsStore.isDarkTheme, - onValueChange: (_, bool value) => - _settingsStore.isDarkTheme = value) + PickerListItem( + title: 'Color theme', + items: Themes.all, + selectedItem: () => theme, + onItemSelected: (Themes theme) => + _settingsStore.currentTheme = theme) ], [ LinkListItem( @@ -186,6 +188,9 @@ abstract class SettingsViewModelBase with Store { bool get allowBiometricalAuthentication => _settingsStore.allowBiometricalAuthentication; + @computed + Themes get theme => _settingsStore.currentTheme; + final Map itemHeaders; List> sections; final SettingsStore _settingsStore;