CAKE-207 | changed Themes class; removed isDarkTheme from settings store and screens; added currentTheme to settings store; changed SwitcherListItem to PickerListItem for themes in the settings_view_model.dart; created item_from_theme.dart; changed currentDarkTheme property on currentTheme in the preferences_key.dart; applied themes to keyboard bar color in the exchange_page.dart, receive_page.dart, send_page.dart and send_template_page.dart; applied itemFromTheme() to new_wallet_page.dart, new_wallet_type_page.dart, pre_seed_page.dart, wallet_seed_page.dart, seed_language_page.dart, welcome_page.dart, base_page.dart and main.dart
OleksandrSobol committed
Dec 10, 2020 at 19:53 UTC
3053c0f3fb81b0ec1148355dda19df6097a7e638
18 files changed
+581
-438
lib/entities/item_from_theme.dart
new
+17
@@ -0,0 +1,17 @@
1
+import 'package:cake_wallet/themes.dart';
2
+import 'package:flutter/material.dart';
3
+
4
+dynamic itemFromTheme({
5
+ @required Themes currentTheme,
6
+ @required Map<Themes, dynamic> items}) {
7
+ switch (currentTheme) {
8
+ case Themes.light:
9
+ return items[Themes.light];
10
+ case Themes.bright:
11
+ return items[Themes.bright];
12
+ case Themes.dark:
13
+ return items[Themes.dark];
14
+ default:
15
+ return items[Themes.light];
16
+ }
17
+}
\ No newline at end of file
lib/entities/preferences_key.dart
+1
-1
@@ -9,7 +9,7 @@ class PreferencesKey {
9
static const shouldSaveRecipientAddressKey = 'save_recipient_address';
10
static const allowBiometricalAuthenticationKey =
11
'allow_biometrical_authentication';
12
- static const currentDarkTheme = 'dark_theme';
12
+ static const currentTheme = 'current_theme';
13
static const displayActionListModeKey = 'display_list_mode';
14
static const currentPinLength = 'current_pin_length';
15
static const currentLanguageCode = 'language_code';
lib/main.dart
+12
-6
@@ -1,3 +1,5 @@
1
+import 'package:cake_wallet/entities/item_from_theme.dart';
2
+import 'package:cake_wallet/themes.dart';
3
import 'package:flutter/material.dart';
4
import 'package:flutter/services.dart';
5
import 'package:hive/hive.dart';
@@ -123,16 +125,20 @@ class App extends StatelessWidget {
125
@override
126
Widget build(BuildContext context) {
127
final settingsStore = getIt.get<AppStore>().settingsStore;
126
-
127
- if (settingsStore.theme == null) {
128
- settingsStore.isDarkTheme = false;
129
- }
128
+ final currentTheme = settingsStore.currentTheme ?? Themes.light;
129
+ final Map<Themes, Brightness> items = {
130
+ Themes.light: Brightness.dark,
131
+ Themes.bright: Brightness.dark,
132
+ Themes.dark: Brightness.light
133
+ };
134
135
final statusBarColor = Colors.transparent;
136
final statusBarBrightness =
133
- settingsStore.isDarkTheme ? Brightness.light : Brightness.dark;
137
+ itemFromTheme(currentTheme: currentTheme, items: items) as Brightness
138
+ ?? Brightness.dark;
139
final statusBarIconBrightness =
135
- settingsStore.isDarkTheme ? Brightness.light : Brightness.dark;
140
+ itemFromTheme(currentTheme: currentTheme, items: items) as Brightness
141
+ ?? Brightness.dark;
142
final authenticationStore = getIt.get<AuthenticationStore>();
143
final initialRoute = authenticationStore.state == AuthenticationState.denied
144
? Routes.disclaimer
lib/palette.dart
+2
@@ -43,6 +43,7 @@ class Palette {
43
static const Color alizarinRed = Color.fromRGBO(233, 45, 45, 1.0);
44
static const Color moderateSlateBlue = Color.fromRGBO(129, 93, 251, 1.0);
45
static const Color brightOrange = Color.fromRGBO(255, 102, 0, 1.0);
46
+ static const Color dullGray = Color.fromRGBO(98, 98, 98, 1.0);
47
48
// FIXME: Rename.
49
static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
@@ -94,6 +95,7 @@ class PaletteDark {
95
static const Color deepVioletBlue = Color.fromRGBO(52, 66, 104, 1.0);
96
static const Color lightPurpleBlue = Color.fromRGBO(120, 133, 170, 1.0);
97
static const Color indicatorVioletBlue = Color.fromRGBO(59, 72, 119, 1.0);
98
+ static const Color granite = Color.fromRGBO(48, 51, 60, 1.0);
99
100
// FIXME: Rename.
101
static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
lib/src/screens/base_page.dart
+34
-12
@@ -1,3 +1,5 @@
1
+import 'package:cake_wallet/entities/item_from_theme.dart';
2
+import 'package:cake_wallet/themes.dart';
3
import 'package:flutter/cupertino.dart';
4
import 'package:flutter/material.dart';
5
import 'package:cake_wallet/palette.dart';
@@ -9,13 +11,19 @@ enum AppBarStyle { regular, withShadow, transparent }
11
12
abstract class BasePage extends StatelessWidget {
13
BasePage()
12
- : _scaffoldKey = GlobalKey<ScaffoldState>(),
13
- _closeButtonImage = Image.asset('assets/images/close_button.png'),
14
- _closeButtonImageDarkTheme =
15
- Image.asset('assets/images/close_button_dark_theme.png');
14
+ : _scaffoldKey = GlobalKey<ScaffoldState>();
15
final GlobalKey<ScaffoldState> _scaffoldKey;
17
- final Image _closeButtonImage;
18
- final Image _closeButtonImageDarkTheme;
16
+
17
+ static final Image closeButtonImage =
18
+ Image.asset('assets/images/close_button.png');
19
+ static final Image closeButtonImageDarkTheme =
20
+ Image.asset('assets/images/close_button_dark_theme.png');
21
+
22
+ final Map<Themes, Image> buttonItems = {
23
+ Themes.light: closeButtonImage,
24
+ Themes.bright: closeButtonImage,
25
+ Themes.dark: closeButtonImageDarkTheme
26
+ };
27
28
String get title => null;
29
@@ -37,7 +45,7 @@ abstract class BasePage extends StatelessWidget {
45
46
Widget Function(BuildContext, Widget) get rootWrapper => null;
47
40
- bool get isDarkTheme => getIt.get<SettingsStore>().isDarkTheme;
48
+ Themes get currentTheme => getIt.get<SettingsStore>().currentTheme;
49
50
void onOpenEndDrawer() => _scaffoldKey.currentState.openEndDrawer();
51
@@ -52,7 +60,8 @@ abstract class BasePage extends StatelessWidget {
60
color: titleColor ?? Theme.of(context).primaryTextTheme.title.color,
61
size: 16,);
62
final _closeButton =
55
- isDarkTheme ? _closeButtonImageDarkTheme : _closeButtonImage;
63
+ itemFromTheme(currentTheme: currentTheme, items: buttonItems) as Image
64
+ ?? closeButtonImage;
65
66
return SizedBox(
67
height: 37,
@@ -88,8 +97,7 @@ abstract class BasePage extends StatelessWidget {
97
Widget floatingActionButton(BuildContext context) => null;
98
99
ObstructingPreferredSizeWidget appBar(BuildContext context) {
91
- final appBarColor =
92
- isDarkTheme ? backgroundDarkColor : backgroundLightColor;
100
+ final appBarColor = _setBackgroundColor();
101
102
switch (appBarStyle) {
103
case AppBarStyle.regular:
@@ -131,10 +139,11 @@ abstract class BasePage extends StatelessWidget {
139
140
@override
141
Widget build(BuildContext context) {
142
+ final _backgroundColor = _setBackgroundColor();
143
+
144
final root = Scaffold(
145
key: _scaffoldKey,
136
- backgroundColor:
137
- isDarkTheme ? backgroundDarkColor : backgroundLightColor,
146
+ backgroundColor: _backgroundColor,
147
resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
148
extendBodyBehindAppBar: extendBodyBehindAppBar,
149
endDrawer: endDrawer,
@@ -144,4 +153,17 @@ abstract class BasePage extends StatelessWidget {
153
154
return rootWrapper?.call(context, root) ?? root;
155
}
156
+
157
+ Color _setBackgroundColor() {
158
+ switch (currentTheme) {
159
+ case Themes.light:
160
+ return backgroundLightColor;
161
+ case Themes.bright:
162
+ return backgroundLightColor;
163
+ case Themes.dark:
164
+ return backgroundDarkColor;
165
+ default:
166
+ return backgroundLightColor;
167
+ }
168
+ }
169
}
lib/src/screens/exchange/exchange_page.dart
+2
-3
@@ -95,9 +95,8 @@ class ExchangePage extends BasePage {
95
return KeyboardActions(
96
config: KeyboardActionsConfig(
97
keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
98
- keyboardBarColor: isDarkTheme
99
- ? Color.fromRGBO(48, 51, 60, 1.0)
100
- : Color.fromRGBO(98, 98, 98, 1.0),
98
+ keyboardBarColor: Theme.of(context).accentTextTheme.body2
99
+ .backgroundColor,
100
nextFocus: false,
101
actions: [
102
KeyboardActionsItem(
lib/src/screens/new_wallet/new_wallet_page.dart
+17
-12
@@ -1,6 +1,4 @@
1
-import 'package:cake_wallet/di.dart';
1
import 'package:cake_wallet/routes.dart';
3
-import 'package:cake_wallet/store/settings_store.dart';
2
import 'package:cake_wallet/utils/show_pop_up.dart';
3
import 'package:mobx/mobx.dart';
4
import 'package:flutter_mobx/flutter_mobx.dart';
@@ -16,23 +14,37 @@ import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_pick
14
import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
15
import 'package:cake_wallet/core/execution_state.dart';
16
import 'package:cake_wallet/view_model/wallet_new_vm.dart';
17
+import 'package:cake_wallet/themes.dart';
18
+import 'package:cake_wallet/entities/item_from_theme.dart';
19
20
class NewWalletPage extends BasePage {
21
NewWalletPage(this._walletNewVM);
22
23
final WalletNewVM _walletNewVM;
24
25
+ static final walletNameImage = Image.asset('assets/images/wallet_name.png');
26
+ static final walletNameLightImage =
27
+ Image.asset('assets/images/wallet_name_light.png');
28
+ final Map<Themes, Image> items = {
29
+ Themes.light: walletNameLightImage,
30
+ Themes.bright: walletNameLightImage,
31
+ Themes.dark: walletNameImage
32
+ };
33
+
34
@override
35
String get title => S.current.new_wallet;
36
37
@override
29
- Widget body(BuildContext context) => WalletNameForm(_walletNewVM);
38
+ Widget body(BuildContext context) => WalletNameForm(_walletNewVM,
39
+ itemFromTheme(currentTheme: currentTheme, items: items) as Image
40
+ ?? walletNameLightImage);
41
}
42
43
class WalletNameForm extends StatefulWidget {
33
- WalletNameForm(this._walletNewVM);
44
+ WalletNameForm(this._walletNewVM, this.walletImage);
45
46
final WalletNewVM _walletNewVM;
47
+ final Image walletImage;
48
49
@override
50
_WalletNameFormState createState() => _WalletNameFormState(_walletNewVM);
@@ -43,9 +55,6 @@ class _WalletNameFormState extends State<WalletNameForm> {
55
56
static const aspectRatioImage = 1.22;
57
46
- final walletNameImage = Image.asset('assets/images/wallet_name.png');
47
- final walletNameLightImage =
48
- Image.asset('assets/images/wallet_name_light.png');
58
final _formKey = GlobalKey<FormState>();
59
final _languageSelectorKey = GlobalKey<SeedLanguageSelectorState>();
60
ReactionDisposer _stateReaction;
@@ -78,10 +87,6 @@ class _WalletNameFormState extends State<WalletNameForm> {
87
88
@override
89
Widget build(BuildContext context) {
81
- final walletImage = getIt.get<SettingsStore>().isDarkTheme
82
- ? walletNameImage
83
- : walletNameLightImage;
84
-
90
return Container(
91
padding: EdgeInsets.only(top: 24),
92
child: ScrollableWithBottomSection(
@@ -92,7 +97,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
97
padding: EdgeInsets.only(left: 12, right: 12),
98
child: AspectRatio(
99
aspectRatio: aspectRatioImage,
95
- child: FittedBox(child: walletImage, fit: BoxFit.fill)),
100
+ child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
101
),
102
Padding(
103
padding: EdgeInsets.only(top: 24),
lib/src/screens/new_wallet/new_wallet_type_page.dart
+19
-10
@@ -1,6 +1,5 @@
1
-import 'package:cake_wallet/di.dart';
1
+import 'package:cake_wallet/entities/item_from_theme.dart';
2
import 'package:cake_wallet/entities/wallet_type.dart';
3
-import 'package:cake_wallet/store/settings_store.dart';
3
import 'package:flutter/material.dart';
4
import 'package:flutter/cupertino.dart';
5
import 'package:cake_wallet/generated/i18n.dart';
@@ -8,6 +7,7 @@ import 'package:cake_wallet/src/screens/base_page.dart';
7
import 'package:cake_wallet/src/widgets/primary_button.dart';
8
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
9
import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
10
+import 'package:cake_wallet/themes.dart';
11
12
class NewWalletTypePage extends BasePage {
13
NewWalletTypePage({this.onTypeSelected, this.isNewWallet = true});
@@ -15,6 +15,15 @@ class NewWalletTypePage extends BasePage {
15
final void Function(BuildContext, WalletType) onTypeSelected;
16
final bool isNewWallet;
17
18
+ static final walletTypeImage = Image.asset('assets/images/wallet_type.png');
19
+ static final walletTypeLightImage =
20
+ Image.asset('assets/images/wallet_type_light.png');
21
+ final Map<Themes, Image> items = {
22
+ Themes.light: walletTypeLightImage,
23
+ Themes.bright: walletTypeLightImage,
24
+ Themes.dark: walletTypeImage
25
+ };
26
+
27
@override
28
String get title => isNewWallet
29
? S.current.new_wallet
@@ -22,13 +31,18 @@ class NewWalletTypePage extends BasePage {
31
32
@override
33
Widget body(BuildContext context) =>
25
- WalletTypeForm(onTypeSelected: onTypeSelected);
34
+ WalletTypeForm(
35
+ onTypeSelected: onTypeSelected,
36
+ walletImage:
37
+ itemFromTheme(currentTheme: currentTheme, items: items) as Image
38
+ ?? walletTypeLightImage);
39
}
40
41
class WalletTypeForm extends StatefulWidget {
29
- WalletTypeForm({this.onTypeSelected});
42
+ WalletTypeForm({this.onTypeSelected, this.walletImage});
43
44
final void Function(BuildContext, WalletType) onTypeSelected;
45
+ final Image walletImage;
46
47
@override
48
WalletTypeFormState createState() => WalletTypeFormState();
@@ -41,8 +55,6 @@ class WalletTypeFormState extends State<WalletTypeForm> {
55
Image.asset('assets/images/monero_logo.png', height: 24, width: 24);
56
final bitcoinIcon =
57
Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
44
- final walletTypeImage = Image.asset('assets/images/wallet_type.png');
45
- final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
58
59
WalletType selected;
60
List<WalletType> types;
@@ -55,9 +67,6 @@ class WalletTypeFormState extends State<WalletTypeForm> {
67
68
@override
69
Widget build(BuildContext context) {
58
- final walletImage = getIt.get<SettingsStore>().isDarkTheme
59
- ? walletTypeImage : walletTypeLightImage;
60
-
70
return Container(
71
padding: EdgeInsets.only(top: 24),
72
child: ScrollableWithBottomSection(
@@ -69,7 +78,7 @@ class WalletTypeFormState extends State<WalletTypeForm> {
78
padding: EdgeInsets.only(left: 12, right: 12),
79
child: AspectRatio(
80
aspectRatio: aspectRatioImage,
72
- child: FittedBox(child: walletImage, fit: BoxFit.fill)),
81
+ child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
82
),
83
Padding(
84
padding: EdgeInsets.only(top: 48),
lib/src/screens/receive/receive_page.dart
+2
-3
@@ -74,9 +74,8 @@ class ReceivePage extends BasePage {
74
return KeyboardActions(
75
config: KeyboardActionsConfig(
76
keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
77
- keyboardBarColor: isDarkTheme
78
- ? Color.fromRGBO(48, 51, 60, 1.0)
79
- : Color.fromRGBO(98, 98, 98, 1.0),
77
+ keyboardBarColor: Theme.of(context).accentTextTheme.body2
78
+ .backgroundColor,
79
nextFocus: false,
80
actions: [
81
KeyboardActionsItem(
lib/src/screens/seed/pre_seed_page.dart
+10
-3
@@ -1,16 +1,22 @@
1
-import 'package:cake_wallet/di.dart';
1
+import 'package:cake_wallet/entities/item_from_theme.dart';
2
import 'package:cake_wallet/routes.dart';
3
-import 'package:cake_wallet/store/settings_store.dart';
3
import 'package:flutter/cupertino.dart';
4
import 'package:flutter/material.dart';
5
import 'package:cake_wallet/generated/i18n.dart';
6
import 'package:cake_wallet/src/widgets/primary_button.dart';
7
import 'package:cake_wallet/src/screens/base_page.dart';
8
+import 'package:cake_wallet/themes.dart';
9
10
class PreSeedPage extends BasePage {
11
static final imageLight = Image.asset('assets/images/pre_seed_light.png');
12
static final imageDark = Image.asset('assets/images/pre_seed_dark.png');
13
14
+ final Map<Themes, Image> items = {
15
+ Themes.light: imageLight,
16
+ Themes.bright: imageLight,
17
+ Themes.dark: imageDark
18
+ };
19
+
20
@override
21
Widget leading(BuildContext context) => null;
22
@@ -20,7 +26,8 @@ class PreSeedPage extends BasePage {
26
@override
27
Widget body(BuildContext context) {
28
final image =
23
- getIt.get<SettingsStore>().isDarkTheme ? imageDark : imageLight;
29
+ itemFromTheme(currentTheme: currentTheme, items: items) as Image
30
+ ?? imageLight;
31
32
return WillPopScope(
33
onWillPop: () async => false,
lib/src/screens/seed/wallet_seed_page.dart
+9
-3
@@ -1,7 +1,6 @@
1
-import 'package:cake_wallet/di.dart';
1
+import 'package:cake_wallet/entities/item_from_theme.dart';
2
import 'package:cake_wallet/palette.dart';
3
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
4
-import 'package:cake_wallet/store/settings_store.dart';
4
import 'package:cake_wallet/utils/show_bar.dart';
5
import 'package:cake_wallet/utils/show_pop_up.dart';
6
import 'package:flutter/cupertino.dart';
@@ -13,12 +12,18 @@ import 'package:cake_wallet/generated/i18n.dart';
12
import 'package:cake_wallet/src/widgets/primary_button.dart';
13
import 'package:cake_wallet/src/screens/base_page.dart';
14
import 'package:cake_wallet/view_model/wallet_seed_view_model.dart';
15
+import 'package:cake_wallet/themes.dart';
16
17
class WalletSeedPage extends BasePage {
18
WalletSeedPage(this.walletSeedViewModel, {@required this.isNewWalletCreated});
19
20
static final imageLight = Image.asset('assets/images/crypto_lock_light.png');
21
static final imageDark = Image.asset('assets/images/crypto_lock.png');
22
+ final Map<Themes, Image> items = {
23
+ Themes.light: imageLight,
24
+ Themes.bright: imageLight,
25
+ Themes.dark: imageDark
26
+ };
27
28
@override
29
String get title => S.current.seed_title;
@@ -84,7 +89,8 @@ class WalletSeedPage extends BasePage {
89
@override
90
Widget body(BuildContext context) {
91
final image =
87
- getIt.get<SettingsStore>().isDarkTheme ? imageDark : imageLight;
92
+ itemFromTheme(currentTheme: currentTheme, items: items) as Image
93
+ ?? imageLight;
94
95
return WillPopScope(onWillPop: () async => false, child: Container(
96
padding: EdgeInsets.all(24),
lib/src/screens/seed_language/seed_language_page.dart
+21
-13
@@ -1,6 +1,5 @@
1
-import 'package:cake_wallet/di.dart';
1
+import 'package:cake_wallet/entities/item_from_theme.dart';
2
import 'package:cake_wallet/src/widgets/seed_language_selector.dart';
3
-import 'package:cake_wallet/store/settings_store.dart';
3
import 'package:flutter_mobx/flutter_mobx.dart';
4
import 'package:flutter/material.dart';
5
import 'package:flutter/cupertino.dart';
@@ -9,23 +8,39 @@ import 'package:cake_wallet/src/screens/base_page.dart';
8
import 'package:cake_wallet/src/widgets/primary_button.dart';
9
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
10
import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_picker.dart';
11
+import 'package:cake_wallet/themes.dart';
12
13
class SeedLanguage extends BasePage {
14
SeedLanguage({this.onConfirm});
15
16
final Function(BuildContext, String) onConfirm;
17
18
+ static final walletNameImage = Image.asset('assets/images/wallet_name.png');
19
+ static final walletNameLightImage =
20
+ Image.asset('assets/images/wallet_name_light.png');
21
+ final Map<Themes, Image> items = {
22
+ Themes.light: walletNameLightImage,
23
+ Themes.bright: walletNameLightImage,
24
+ Themes.dark: walletNameImage
25
+ };
26
+
27
@override
28
String get title => S.current.wallet_list_restore_wallet;
29
30
@override
22
- Widget body(BuildContext context) => SeedLanguageForm(onConfirm: onConfirm);
31
+ Widget body(BuildContext context) =>
32
+ SeedLanguageForm(
33
+ onConfirm: onConfirm,
34
+ walletImage:
35
+ itemFromTheme(currentTheme: currentTheme, items: items) as Image
36
+ ?? walletNameLightImage);
37
}
38
39
class SeedLanguageForm extends StatefulWidget {
26
- SeedLanguageForm({this.onConfirm});
40
+ SeedLanguageForm({this.onConfirm, this.walletImage});
41
42
final Function(BuildContext, String) onConfirm;
43
+ final Image walletImage;
44
45
@override
46
SeedLanguageFormState createState() => SeedLanguageFormState();
@@ -33,18 +48,10 @@ class SeedLanguageForm extends StatefulWidget {
48
49
class SeedLanguageFormState extends State<SeedLanguageForm> {
50
static const aspectRatioImage = 1.22;
36
-
37
- final walletNameImage = Image.asset('assets/images/wallet_name.png');
38
- final walletNameLightImage =
39
- Image.asset('assets/images/wallet_name_light.png');
51
final _languageSelectorKey = GlobalKey<SeedLanguageSelectorState>();
52
53
@override
54
Widget build(BuildContext context) {
44
- final walletImage = getIt.get<SettingsStore>().isDarkTheme
45
- ? walletNameImage
46
- : walletNameLightImage;
47
-
55
return Container(
56
padding: EdgeInsets.only(top: 24),
57
child: ScrollableWithBottomSection(
@@ -55,7 +62,8 @@ class SeedLanguageFormState extends State<SeedLanguageForm> {
62
padding: EdgeInsets.only(left: 12, right: 12),
63
child: AspectRatio(
64
aspectRatio: aspectRatioImage,
58
- child: FittedBox(child: walletImage, fit: BoxFit.fill)),
65
+ child: FittedBox(child: widget.walletImage,
66
+ fit: BoxFit.fill)),
67
),
68
Padding(
69
padding: EdgeInsets.only(top: 40),
lib/src/screens/send/send_page.dart
+2
-3
@@ -83,9 +83,8 @@ class SendPage extends BasePage {
83
return KeyboardActions(
84
config: KeyboardActionsConfig(
85
keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
86
- keyboardBarColor: isDarkTheme
87
- ? Color.fromRGBO(48, 51, 60, 1.0)
88
- : Color.fromRGBO(98, 98, 98, 1.0),
86
+ keyboardBarColor: Theme.of(context).accentTextTheme.body2
87
+ .backgroundColor,
88
nextFocus: false,
89
actions: [
90
KeyboardActionsItem(
lib/src/screens/send/send_template_page.dart
+2
-3
@@ -49,9 +49,8 @@ class SendTemplatePage extends BasePage {
49
return KeyboardActions(
50
config: KeyboardActionsConfig(
51
keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
52
- keyboardBarColor: isDarkTheme
53
- ? Color.fromRGBO(48, 51, 60, 1.0)
54
- : Color.fromRGBO(98, 98, 98, 1.0),
52
+ keyboardBarColor: Theme.of(context).accentTextTheme.body2
53
+ .backgroundColor,
54
nextFocus: false,
55
actions: [
56
KeyboardActionsItem(
lib/src/screens/welcome/welcome_page.dart
+13
-8
@@ -1,15 +1,21 @@
1
-import 'package:cake_wallet/di.dart';
2
-import 'package:cake_wallet/store/settings_store.dart';
1
+import 'package:cake_wallet/entities/item_from_theme.dart';
2
import 'package:flutter/material.dart';
3
import 'package:cake_wallet/routes.dart';
4
import 'package:cake_wallet/src/widgets/primary_button.dart';
5
import 'package:cake_wallet/src/screens/base_page.dart';
6
import 'package:cake_wallet/generated/i18n.dart';
7
+import 'package:cake_wallet/themes.dart';
8
9
class WelcomePage extends BasePage {
10
static const aspectRatioImage = 1.25;
11
- final welcomeImageLight = Image.asset('assets/images/welcome_light.png');
12
- final welcomeImageDark = Image.asset('assets/images/welcome.png');
11
+ static final welcomeImageLight = Image.asset('assets/images/welcome_light.png');
12
+ static final welcomeImageDark = Image.asset('assets/images/welcome.png');
13
+
14
+ final Map<Themes, Image> items = {
15
+ Themes.light: welcomeImageLight,
16
+ Themes.bright: welcomeImageLight,
17
+ Themes.dark: welcomeImageDark
18
+ };
19
20
@override
21
Widget build(BuildContext context) {
@@ -23,10 +29,9 @@ class WelcomePage extends BasePage {
29
30
@override
31
Widget body(BuildContext context) {
26
- final welcomeImage = getIt
27
- .get<SettingsStore>()
28
- .isDarkTheme
29
- ? welcomeImageDark : welcomeImageLight;
32
+ final welcomeImage =
33
+ itemFromTheme(currentTheme: currentTheme, items: items) as Image
34
+ ?? welcomeImageLight;
35
36
final newWalletImage = Image.asset('assets/images/new_wallet.png',
37
height: 12,
lib/store/settings_store.dart
+10
-10
@@ -28,7 +28,7 @@ abstract class SettingsStoreBase with Store {
28
@required BalanceDisplayMode initialBalanceDisplayMode,
29
@required bool initialSaveRecipientAddress,
30
@required bool initialAllowBiometricalAuthentication,
31
- @required bool initialDarkTheme,
31
+ @required Themes initialTheme,
32
@required int initialPinLength,
33
@required String initialLanguageCode,
34
// @required String initialCurrentLocale,
@@ -40,7 +40,7 @@ abstract class SettingsStoreBase with Store {
40
balanceDisplayMode = initialBalanceDisplayMode;
41
shouldSaveRecipientAddress = initialSaveRecipientAddress;
42
allowBiometricalAuthentication = initialAllowBiometricalAuthentication;
43
- isDarkTheme = initialDarkTheme;
43
+ currentTheme = initialTheme;
44
pinCodeLength = initialPinLength;
45
languageCode = initialLanguageCode;
46
currentNode = nodes[WalletType.monero];
@@ -65,9 +65,9 @@ abstract class SettingsStoreBase with Store {
65
shouldSaveRecipientAddress));
66
67
reaction(
68
- (_) => isDarkTheme,
69
- (bool isDarkTheme) => sharedPreferences.setBool(
70
- PreferencesKey.currentDarkTheme, isDarkTheme));
68
+ (_) => currentTheme,
69
+ (Themes theme) => sharedPreferences.setInt(
70
+ PreferencesKey.currentTheme, theme.serialize()));
71
72
reaction(
73
(_) => allowBiometricalAuthentication,
@@ -111,7 +111,7 @@ abstract class SettingsStoreBase with Store {
111
bool allowBiometricalAuthentication;
112
113
@observable
114
- bool isDarkTheme;
114
+ Themes currentTheme;
115
116
@observable
117
int pinCodeLength;
@@ -120,7 +120,7 @@ abstract class SettingsStoreBase with Store {
120
Node currentNode;
121
122
@computed
123
- ThemeData get theme => isDarkTheme ? Themes.darkTheme : Themes.lightTheme;
123
+ ThemeData get theme => currentTheme.themeData;
124
125
@observable
126
String languageCode;
@@ -154,8 +154,8 @@ abstract class SettingsStoreBase with Store {
154
final allowBiometricalAuthentication = sharedPreferences
155
.getBool(PreferencesKey.allowBiometricalAuthenticationKey) ??
156
false;
157
- final savedDarkTheme =
158
- sharedPreferences.getBool(PreferencesKey.currentDarkTheme) ?? false;
157
+ final savedTheme = Themes.deserialize(
158
+ raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? 0);
159
final actionListDisplayMode = ObservableList<ActionListDisplayMode>();
160
actionListDisplayMode.addAll(deserializeActionlistDisplayModes(
161
sharedPreferences.getInt(PreferencesKey.displayActionListModeKey) ??
@@ -188,7 +188,7 @@ abstract class SettingsStoreBase with Store {
188
initialBalanceDisplayMode: currentBalanceDisplayMode,
189
initialSaveRecipientAddress: shouldSaveRecipientAddress,
190
initialAllowBiometricalAuthentication: allowBiometricalAuthentication,
191
- initialDarkTheme: savedDarkTheme,
191
+ initialTheme: savedTheme,
192
actionlistDisplayMode: actionListDisplayMode,
193
initialPinLength: pinLength,
194
initialLanguageCode: savedLanguageCode);
lib/themes.dart
+398
-343
@@ -1,353 +1,408 @@
1
import 'package:flutter/material.dart';
2
import 'palette.dart';
3
+import 'package:cake_wallet/generated/i18n.dart';
4
+import 'package:cake_wallet/entities/enumerable_item.dart';
5
4
-class Themes {
6
+class Themes extends EnumerableItem<int> with Serializable<int> {
7
+ const Themes({String title, int raw})
8
+ : super(title: title, raw: raw);
9
+
10
+ static const all = [
11
+ Themes.light,
12
+ Themes.bright,
13
+ Themes.dark,
14
+ ];
15
+
16
+ static const light = Themes(title: 'Light', raw: 0);
17
+ static const bright = Themes(title: 'Bright', raw: 1);
18
+ static const dark = Themes(title: 'Dark', raw: 2);
19
+
20
+ static Themes deserialize({int raw}) {
21
+ switch (raw) {
22
+ case 0:
23
+ return light;
24
+ case 1:
25
+ return bright;
26
+ case 2:
27
+ return dark;
28
+ default:
29
+ return null;
30
+ }
31
+ }
32
+
33
+ ThemeData get themeData {
34
+ switch (this) {
35
+ case Themes.light:
36
+ return lightTheme;
37
+ case Themes.bright:
38
+ return lightTheme;
39
+ case Themes.dark:
40
+ return darkTheme;
41
+ default:
42
+ return null;
43
+ }
44
+ }
45
+
46
+ @override
47
+ String toString() {
48
+ switch (this) {
49
+ case Themes.light:
50
+ return 'Light';
51
+ case Themes.bright:
52
+ return 'Bright';
53
+ case Themes.dark:
54
+ return 'Dark';
55
+ default:
56
+ return '';
57
+ }
58
+ }
59
60
static final ThemeData lightTheme = ThemeData(
7
- fontFamily: 'Lato',
8
- brightness: Brightness.light,
9
- backgroundColor: Colors.white,
10
- accentColor: Palette.blueCraiola, // first gradient color
11
- scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color
12
- primaryColor: Palette.redHat, // third gradient color
13
- buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page
14
- indicatorColor: Colors.white.withOpacity(0.5), // page indicator
15
- hoverColor: Colors.white, // amount hint text (receive page)
16
- dividerColor: Palette.paleBlue,
17
- hintColor: Palette.gray,
18
- textTheme: TextTheme(
19
- title: TextStyle(
20
- color: Colors.white, // sync_indicator text
21
- backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator
22
- decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator
23
- ),
24
- caption: TextStyle(
25
- color: Palette.shineOrange, // not synced light
26
- decorationColor: Colors.white, // filter icon
27
- ),
28
- overline: TextStyle(
29
- color: Colors.white.withOpacity(0.2), // filter button
30
- backgroundColor: Colors.white.withOpacity(0.5), // date section row
31
- decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows)
32
- ),
33
- subhead: TextStyle(
34
- color: Colors.white.withOpacity(0.2), // address button border
35
- decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget)
36
- ),
37
- headline: TextStyle(
38
- color: Colors.white, // qr code
39
- decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page)
40
- ),
41
- display1: TextStyle(
42
- color: PaletteDark.lightBlueGrey, // icons color (receive page)
43
- decorationColor: Palette.lavender, // icons background (receive page)
44
- ),
45
- display2: TextStyle(
46
- color: Palette.darkBlueCraiola, // text color of tiles (receive page)
47
- decorationColor: Colors.white // background of tiles (receive page)
48
- ),
49
- display3: TextStyle(
50
- color: Colors.white, // text color of current tile (receive page),
51
- //decorationColor: Palette.blueCraiola // background of current tile (receive page)
52
- decorationColor: Palette.moderateSlateBlue // background of current tile (receive page)
53
- ),
54
- display4: TextStyle(
55
- color: Palette.violetBlue, // text color of tiles (account list)
56
- decorationColor: Colors.white // background of tiles (account list)
57
- ),
58
- subtitle: TextStyle(
59
- color: Palette.moderateSlateBlue, // text color of current tile (account list)
60
- decorationColor: Colors.white // background of current tile (account list)
61
- ),
62
- body1: TextStyle(
63
- color: Palette.moderatePurpleBlue, // scrollbar thumb
64
- decorationColor: Palette.periwinkleCraiola // scrollbar background
65
- ),
66
- body2: TextStyle(
67
- color: Palette.moderateLavender, // menu header
68
- decorationColor: Colors.white, // menu background
69
- )
70
- ),
71
- primaryTextTheme: TextTheme(
72
- title: TextStyle(
73
- color: Palette.darkBlueCraiola, // title color
74
- backgroundColor: Palette.wildPeriwinkle // textfield underline
75
- ),
76
- caption: TextStyle(
77
- color: PaletteDark.pigeonBlue, // secondary text
78
- decorationColor: Palette.wildLavender // menu divider
79
- ),
80
- overline: TextStyle(
81
- color: Palette.darkGray, // transaction/trade details titles
82
- decorationColor: Colors.white.withOpacity(0.5), // placeholder
83
- ),
84
- subhead: TextStyle(
85
- color: Palette.blueCraiola, // first gradient color (send page)
86
- decorationColor: Palette.pinkFlamingo // second gradient color (send page)
87
- ),
88
- headline: TextStyle(
89
- color: Colors.white.withOpacity(0.5), // text field border color (send page)
90
- decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page)
91
- ),
92
- display1: TextStyle(
93
- color: Colors.white.withOpacity(0.2), // text field button color (send page)
94
- decorationColor: Colors.white // text field button icon color (send page)
95
- ),
96
- display2: TextStyle(
97
- color: Colors.white.withOpacity(0.5), // estimated fee (send page)
98
- decorationColor: Palette.shadowWhite // template dotted border (send page)
99
- ),
100
- display3: TextStyle(
101
- color: Palette.darkBlueCraiola, // template new text (send page)
102
- decorationColor: Palette.shadowWhite // template background color (send page)
103
- ),
104
- display4: TextStyle(
105
- color: Palette.darkBlueCraiola, // template title (send page)
106
- decorationColor: Palette.niagara // receive amount text (exchange page)
107
- ),
108
- subtitle: TextStyle(
109
- color: Palette.blueCraiola, // first gradient color top panel (exchange page)
110
- decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page)
111
- ),
112
- body1: TextStyle(
113
- color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page)
114
- decorationColor: Palette.pinkFlamingo.withOpacity(0.7) // second gradient color bottom panel (exchange page)
115
- ),
116
- body2: TextStyle(
117
- color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page)
118
- decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page)
119
- )
120
- ),
121
- focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
122
- accentTextTheme: TextTheme(
123
- title: TextStyle(
124
- color: Colors.white, // picker background
125
- backgroundColor: Palette.periwinkleCraiola, // picker divider
126
- decorationColor: Colors.white // dialog background
127
- ),
128
- caption: TextStyle(
129
- color: Palette.moderateLavender, // container (confirm exchange)
130
- backgroundColor: Palette.moderateLavender, // button background (confirm exchange)
131
- decorationColor: Palette.darkBlueCraiola, // text color (information page)
132
- ),
133
- subtitle: TextStyle(
134
- color: Palette.darkBlueCraiola, // QR code (exchange trade page)
135
- backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page)
136
- //decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page)
137
- decorationColor: Palette.moderateSlateBlue // crete new wallet button background (wallet list page)
138
- ),
139
- headline: TextStyle(
140
- color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
141
- backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
142
- decorationColor: Colors.white // restore wallet button text color (wallet list page)
143
- ),
144
- subhead: TextStyle(
145
- color: Palette.darkGray, // titles color (filter widget)
146
- backgroundColor: Palette.periwinkle, // divider color (filter widget)
147
- decorationColor: Colors.white // checkbox background (filter widget)
148
- ),
149
- overline: TextStyle(
150
- color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
151
- decorationColor: Colors.white, // menu subname
152
- ),
153
- display1: TextStyle(
154
- color: Palette.blueCraiola, // first gradient color (menu header)
155
- decorationColor: Palette.pinkFlamingo // second gradient color(menu header)
156
- ),
157
- display2: TextStyle(
158
- color: Palette.shadowWhite, // action button color (address text field)
159
- decorationColor: Palette.darkGray // hint text (seed widget)
160
- ),
161
- display3: TextStyle(
162
- color: Palette.darkGray, // hint text (new wallet page)
163
- decorationColor: Palette.periwinkleCraiola // underline (new wallet page)
164
- ),
165
- display4: TextStyle(
166
- color: Palette.darkGray, // switch background (settings page)
167
- ),
168
- body1: TextStyle(
169
- color: Palette.darkGray, // indicators (PIN code)
170
- decorationColor: Palette.darkGray // switch (PIN code)
171
- ),
172
- body2: TextStyle(
173
- color: Palette.moderateSlateBlue, // primary buttons, alert right buttons
174
- decorationColor: Palette.brightOrange // alert left button
175
- ),
176
- ),
177
- cardColor: Palette.moderateSlateBlue // bottom button (action list)
61
+ fontFamily: 'Lato',
62
+ brightness: Brightness.light,
63
+ backgroundColor: Colors.white,
64
+ accentColor: Palette.blueCraiola, // first gradient color
65
+ scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color
66
+ primaryColor: Palette.redHat, // third gradient color
67
+ buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page
68
+ indicatorColor: Colors.white.withOpacity(0.5), // page indicator
69
+ hoverColor: Colors.white, // amount hint text (receive page)
70
+ dividerColor: Palette.paleBlue,
71
+ hintColor: Palette.gray,
72
+ textTheme: TextTheme(
73
+ title: TextStyle(
74
+ color: Colors.white, // sync_indicator text
75
+ backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator
76
+ decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator
77
+ ),
78
+ caption: TextStyle(
79
+ color: Palette.shineOrange, // not synced light
80
+ decorationColor: Colors.white, // filter icon
81
+ ),
82
+ overline: TextStyle(
83
+ color: Colors.white.withOpacity(0.2), // filter button
84
+ backgroundColor: Colors.white.withOpacity(0.5), // date section row
85
+ decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows)
86
+ ),
87
+ subhead: TextStyle(
88
+ color: Colors.white.withOpacity(0.2), // address button border
89
+ decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget)
90
+ ),
91
+ headline: TextStyle(
92
+ color: Colors.white, // qr code
93
+ decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page)
94
+ ),
95
+ display1: TextStyle(
96
+ color: PaletteDark.lightBlueGrey, // icons color (receive page)
97
+ decorationColor: Palette.lavender, // icons background (receive page)
98
+ ),
99
+ display2: TextStyle(
100
+ color: Palette.darkBlueCraiola, // text color of tiles (receive page)
101
+ decorationColor: Colors.white // background of tiles (receive page)
102
+ ),
103
+ display3: TextStyle(
104
+ color: Colors.white, // text color of current tile (receive page),
105
+ //decorationColor: Palette.blueCraiola // background of current tile (receive page)
106
+ decorationColor: Palette.moderateSlateBlue // background of current tile (receive page)
107
+ ),
108
+ display4: TextStyle(
109
+ color: Palette.violetBlue, // text color of tiles (account list)
110
+ decorationColor: Colors.white // background of tiles (account list)
111
+ ),
112
+ subtitle: TextStyle(
113
+ color: Palette.moderateSlateBlue, // text color of current tile (account list)
114
+ decorationColor: Colors.white // background of current tile (account list)
115
+ ),
116
+ body1: TextStyle(
117
+ color: Palette.moderatePurpleBlue, // scrollbar thumb
118
+ decorationColor: Palette.periwinkleCraiola // scrollbar background
119
+ ),
120
+ body2: TextStyle(
121
+ color: Palette.moderateLavender, // menu header
122
+ decorationColor: Colors.white, // menu background
123
+ )
124
+ ),
125
+ primaryTextTheme: TextTheme(
126
+ title: TextStyle(
127
+ color: Palette.darkBlueCraiola, // title color
128
+ backgroundColor: Palette.wildPeriwinkle // textfield underline
129
+ ),
130
+ caption: TextStyle(
131
+ color: PaletteDark.pigeonBlue, // secondary text
132
+ decorationColor: Palette.wildLavender // menu divider
133
+ ),
134
+ overline: TextStyle(
135
+ color: Palette.darkGray, // transaction/trade details titles
136
+ decorationColor: Colors.white.withOpacity(0.5), // placeholder
137
+ ),
138
+ subhead: TextStyle(
139
+ color: Palette.blueCraiola, // first gradient color (send page)
140
+ decorationColor: Palette.pinkFlamingo // second gradient color (send page)
141
+ ),
142
+ headline: TextStyle(
143
+ color: Colors.white.withOpacity(0.5), // text field border color (send page)
144
+ decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page)
145
+ ),
146
+ display1: TextStyle(
147
+ color: Colors.white.withOpacity(0.2), // text field button color (send page)
148
+ decorationColor: Colors.white // text field button icon color (send page)
149
+ ),
150
+ display2: TextStyle(
151
+ color: Colors.white.withOpacity(0.5), // estimated fee (send page)
152
+ decorationColor: Palette.shadowWhite // template dotted border (send page)
153
+ ),
154
+ display3: TextStyle(
155
+ color: Palette.darkBlueCraiola, // template new text (send page)
156
+ decorationColor: Palette.shadowWhite // template background color (send page)
157
+ ),
158
+ display4: TextStyle(
159
+ color: Palette.darkBlueCraiola, // template title (send page)
160
+ decorationColor: Palette.niagara // receive amount text (exchange page)
161
+ ),
162
+ subtitle: TextStyle(
163
+ color: Palette.blueCraiola, // first gradient color top panel (exchange page)
164
+ decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page)
165
+ ),
166
+ body1: TextStyle(
167
+ color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page)
168
+ decorationColor: Palette.pinkFlamingo.withOpacity(0.7) // second gradient color bottom panel (exchange page)
169
+ ),
170
+ body2: TextStyle(
171
+ color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page)
172
+ decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page)
173
+ )
174
+ ),
175
+ focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
176
+ accentTextTheme: TextTheme(
177
+ title: TextStyle(
178
+ color: Colors.white, // picker background
179
+ backgroundColor: Palette.periwinkleCraiola, // picker divider
180
+ decorationColor: Colors.white // dialog background
181
+ ),
182
+ caption: TextStyle(
183
+ color: Palette.moderateLavender, // container (confirm exchange)
184
+ backgroundColor: Palette.moderateLavender, // button background (confirm exchange)
185
+ decorationColor: Palette.darkBlueCraiola, // text color (information page)
186
+ ),
187
+ subtitle: TextStyle(
188
+ color: Palette.darkBlueCraiola, // QR code (exchange trade page)
189
+ backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page)
190
+ //decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page)
191
+ decorationColor: Palette.moderateSlateBlue // crete new wallet button background (wallet list page)
192
+ ),
193
+ headline: TextStyle(
194
+ color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
195
+ backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
196
+ decorationColor: Colors.white // restore wallet button text color (wallet list page)
197
+ ),
198
+ subhead: TextStyle(
199
+ color: Palette.darkGray, // titles color (filter widget)
200
+ backgroundColor: Palette.periwinkle, // divider color (filter widget)
201
+ decorationColor: Colors.white // checkbox background (filter widget)
202
+ ),
203
+ overline: TextStyle(
204
+ color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
205
+ decorationColor: Colors.white, // menu subname
206
+ ),
207
+ display1: TextStyle(
208
+ color: Palette.blueCraiola, // first gradient color (menu header)
209
+ decorationColor: Palette.pinkFlamingo // second gradient color(menu header)
210
+ ),
211
+ display2: TextStyle(
212
+ color: Palette.shadowWhite, // action button color (address text field)
213
+ decorationColor: Palette.darkGray // hint text (seed widget)
214
+ ),
215
+ display3: TextStyle(
216
+ color: Palette.darkGray, // hint text (new wallet page)
217
+ decorationColor: Palette.periwinkleCraiola // underline (new wallet page)
218
+ ),
219
+ display4: TextStyle(
220
+ color: Palette.darkGray, // switch background (settings page)
221
+ ),
222
+ body1: TextStyle(
223
+ color: Palette.darkGray, // indicators (PIN code)
224
+ decorationColor: Palette.darkGray // switch (PIN code)
225
+ ),
226
+ body2: TextStyle(
227
+ color: Palette.moderateSlateBlue, // primary buttons, alert right buttons
228
+ decorationColor: Palette.brightOrange, // alert left button,
229
+ backgroundColor: Palette.dullGray // keyboard bar color
230
+ ),
231
+ ),
232
+ cardColor: Palette.moderateSlateBlue // bottom button (action list)
233
);
234
180
-
235
static final ThemeData darkTheme = ThemeData(
182
- fontFamily: 'Lato',
183
- brightness: Brightness.dark,
184
- backgroundColor: PaletteDark.backgroundColor,
185
- accentColor: PaletteDark.backgroundColor, // first gradient color
186
- scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color
187
- primaryColor: PaletteDark.backgroundColor, // third gradient color
188
- buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page
189
- indicatorColor: PaletteDark.cyanBlue, // page indicator
190
- hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page)
191
- dividerColor: PaletteDark.dividerColor,
192
- hintColor: PaletteDark.pigeonBlue, // menu
193
- textTheme: TextTheme(
194
- title: TextStyle(
195
- color: PaletteDark.wildBlue, // sync_indicator text
196
- backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator
197
- decorationColor: PaletteDark.oceanBlue // not synced sync_indicator
198
- ),
199
- caption: TextStyle(
200
- color: PaletteDark.orangeYellow, // not synced light
201
- decorationColor: PaletteDark.wildBlue, // filter icon
202
- ),
203
- overline: TextStyle(
204
- color: PaletteDark.oceanBlue, // filter button
205
- backgroundColor: PaletteDark.darkCyanBlue, // date section row
206
- decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows)
207
- ),
208
- subhead: TextStyle(
209
- color: PaletteDark.nightBlue, // address button border
210
- decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget)
211
- ),
212
- headline: TextStyle(
213
- color: PaletteDark.lightBlueGrey, // qr code
214
- decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page)
215
- ),
216
- display1: TextStyle(
217
- color: Colors.white, // icons color (receive page)
218
- decorationColor: PaletteDark.distantNightBlue, // icons background (receive page)
219
- ),
220
- display2: TextStyle(
221
- color: Colors.white, // text color of tiles (receive page)
222
- decorationColor: PaletteDark.nightBlue // background of tiles (receive page)
223
- ),
224
- display3: TextStyle(
225
- color: Palette.blueCraiola, // text color of current tile (receive page)
226
- decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page)
227
- ),
228
- display4: TextStyle(
229
- color: Colors.white, // text color of tiles (account list)
230
- decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list)
231
- ),
232
- subtitle: TextStyle(
233
- color: Palette.blueCraiola, // text color of current tile (account list)
234
- decorationColor: PaletteDark.darkNightBlue // background of current tile (account list)
235
- ),
236
- body1: TextStyle(
237
- color: PaletteDark.wildBlueGrey, // scrollbar thumb
238
- decorationColor: PaletteDark.violetBlue // scrollbar background
239
- ),
240
- body2: TextStyle(
241
- color: PaletteDark.deepPurpleBlue, // menu header
242
- decorationColor: PaletteDark.deepPurpleBlue, // menu background
243
- )
244
- ),
245
- primaryTextTheme: TextTheme(
246
- title: TextStyle(
247
- color: Colors.white, // title color
248
- backgroundColor: PaletteDark.darkOceanBlue // textfield underline
249
- ),
250
- caption: TextStyle(
251
- color: PaletteDark.darkCyanBlue, // secondary text
252
- decorationColor: PaletteDark.darkOceanBlue // menu divider
253
- ),
254
- overline: TextStyle(
255
- color: PaletteDark.lightBlueGrey, // transaction/trade details titles
256
- decorationColor: Colors.grey, // placeholder
257
- ),
258
- subhead: TextStyle(
259
- color: PaletteDark.darkNightBlue, // first gradient color (send page)
260
- decorationColor: PaletteDark.darkNightBlue // second gradient color (send page)
261
- ),
262
- headline: TextStyle(
263
- color: PaletteDark.lightVioletBlue, // text field border color (send page)
264
- decorationColor: PaletteDark.darkCyanBlue, // text field hint color (send page)
265
- ),
266
- display1: TextStyle(
267
- color: PaletteDark.buttonNightBlue, // text field button color (send page)
268
- decorationColor: PaletteDark.gray // text field button icon color (send page)
269
- ),
270
- display2: TextStyle(
271
- color: Colors.white, // estimated fee (send page)
272
- decorationColor: PaletteDark.darkCyanBlue // template dotted border (send page)
273
- ),
274
- display3: TextStyle(
275
- color: PaletteDark.darkCyanBlue, // template new text (send page)
276
- decorationColor: PaletteDark.darkVioletBlue // template background color (send page)
277
- ),
278
- display4: TextStyle(
279
- color: PaletteDark.cyanBlue, // template title (send page)
280
- decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page)
281
- ),
282
- subtitle: TextStyle(
283
- color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page)
284
- decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page)
285
- ),
286
- body1: TextStyle(
287
- color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page)
288
- decorationColor: PaletteDark.darkNightBlue // second gradient color bottom panel (exchange page)
289
- ),
290
- body2: TextStyle(
291
- color: PaletteDark.blueGrey, // text field border on top panel (exchange page)
292
- decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page)
293
- )
294
- ),
295
- focusColor: PaletteDark.moderateBlue, // text field button (exchange page)
296
- accentTextTheme: TextTheme(
297
- title: TextStyle(
298
- color: PaletteDark.nightBlue, // picker background
299
- backgroundColor: PaletteDark.dividerColor, // picker divider
300
- decorationColor: PaletteDark.darkNightBlue // dialog background
301
- ),
302
- caption: TextStyle(
303
- color: PaletteDark.nightBlue, // container (confirm exchange)
304
- backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange)
305
- decorationColor: Palette.darkLavender, // text color (information page)
306
- ),
307
- subtitle: TextStyle(
308
- //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page)
309
- color: Colors.white, // QR code (exchange trade page)
310
- backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page)
311
- decorationColor: Colors.white // crete new wallet button background (wallet list page)
312
- ),
313
- headline: TextStyle(
314
- color: PaletteDark.distantBlue, // first gradient color of wallet action buttons (wallet list page)
315
- backgroundColor: PaletteDark.distantNightBlue, // second gradient color of wallet action buttons (wallet list page)
316
- decorationColor: Palette.darkBlueCraiola // restore wallet button text color (wallet list page)
317
- ),
318
- subhead: TextStyle(
319
- color: Colors.white, // titles color (filter widget)
320
- backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget)
321
- decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget)
322
- ),
323
- overline: TextStyle(
324
- color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget)
325
- decorationColor: PaletteDark.darkCyanBlue, // menu subname
326
- ),
327
- display1: TextStyle(
328
- color: PaletteDark.deepPurpleBlue, // first gradient color (menu header)
329
- decorationColor: PaletteDark.deepPurpleBlue // second gradient color(menu header)
330
- ),
331
- display2: TextStyle(
332
- color: PaletteDark.nightBlue, // action button color (address text field)
333
- decorationColor: PaletteDark.darkCyanBlue // hint text (seed widget)
334
- ),
335
- display3: TextStyle(
336
- color: PaletteDark.cyanBlue, // hint text (new wallet page)
337
- decorationColor: PaletteDark.darkGrey // underline (new wallet page)
338
- ),
339
- display4: TextStyle(
340
- color: PaletteDark.deepVioletBlue, // switch background (settings page)
341
- ),
342
- body1: TextStyle(
343
- color: PaletteDark.indicatorVioletBlue, // indicators (PIN code)
344
- decorationColor: PaletteDark.lightPurpleBlue // switch (PIN code)
345
- ),
346
- body2: TextStyle(
347
- color: Palette.blueCraiola, // primary buttons, alert right buttons
348
- decorationColor: Palette.alizarinRed // alert left button
349
- ),
350
- ),
351
- cardColor: PaletteDark.darkNightBlue // bottom button (action list)
236
+ fontFamily: 'Lato',
237
+ brightness: Brightness.dark,
238
+ backgroundColor: PaletteDark.backgroundColor,
239
+ accentColor: PaletteDark.backgroundColor, // first gradient color
240
+ scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color
241
+ primaryColor: PaletteDark.backgroundColor, // third gradient color
242
+ buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page
243
+ indicatorColor: PaletteDark.cyanBlue, // page indicator
244
+ hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page)
245
+ dividerColor: PaletteDark.dividerColor,
246
+ hintColor: PaletteDark.pigeonBlue, // menu
247
+ textTheme: TextTheme(
248
+ title: TextStyle(
249
+ color: PaletteDark.wildBlue, // sync_indicator text
250
+ backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator
251
+ decorationColor: PaletteDark.oceanBlue // not synced sync_indicator
252
+ ),
253
+ caption: TextStyle(
254
+ color: PaletteDark.orangeYellow, // not synced light
255
+ decorationColor: PaletteDark.wildBlue, // filter icon
256
+ ),
257
+ overline: TextStyle(
258
+ color: PaletteDark.oceanBlue, // filter button
259
+ backgroundColor: PaletteDark.darkCyanBlue, // date section row
260
+ decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows)
261
+ ),
262
+ subhead: TextStyle(
263
+ color: PaletteDark.nightBlue, // address button border
264
+ decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget)
265
+ ),
266
+ headline: TextStyle(
267
+ color: PaletteDark.lightBlueGrey, // qr code
268
+ decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page)
269
+ ),
270
+ display1: TextStyle(
271
+ color: Colors.white, // icons color (receive page)
272
+ decorationColor: PaletteDark.distantNightBlue, // icons background (receive page)
273
+ ),
274
+ display2: TextStyle(
275
+ color: Colors.white, // text color of tiles (receive page)
276
+ decorationColor: PaletteDark.nightBlue // background of tiles (receive page)
277
+ ),
278
+ display3: TextStyle(
279
+ color: Palette.blueCraiola, // text color of current tile (receive page)
280
+ decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page)
281
+ ),
282
+ display4: TextStyle(
283
+ color: Colors.white, // text color of tiles (account list)
284
+ decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list)
285
+ ),
286
+ subtitle: TextStyle(
287
+ color: Palette.blueCraiola, // text color of current tile (account list)
288
+ decorationColor: PaletteDark.darkNightBlue // background of current tile (account list)
289
+ ),
290
+ body1: TextStyle(
291
+ color: PaletteDark.wildBlueGrey, // scrollbar thumb
292
+ decorationColor: PaletteDark.violetBlue // scrollbar background
293
+ ),
294
+ body2: TextStyle(
295
+ color: PaletteDark.deepPurpleBlue, // menu header
296
+ decorationColor: PaletteDark.deepPurpleBlue, // menu background
297
+ )
298
+ ),
299
+ primaryTextTheme: TextTheme(
300
+ title: TextStyle(
301
+ color: Colors.white, // title color
302
+ backgroundColor: PaletteDark.darkOceanBlue // textfield underline
303
+ ),
304
+ caption: TextStyle(
305
+ color: PaletteDark.darkCyanBlue, // secondary text
306
+ decorationColor: PaletteDark.darkOceanBlue // menu divider
307
+ ),
308
+ overline: TextStyle(
309
+ color: PaletteDark.lightBlueGrey, // transaction/trade details titles
310
+ decorationColor: Colors.grey, // placeholder
311
+ ),
312
+ subhead: TextStyle(
313
+ color: PaletteDark.darkNightBlue, // first gradient color (send page)
314
+ decorationColor: PaletteDark.darkNightBlue // second gradient color (send page)
315
+ ),
316
+ headline: TextStyle(
317
+ color: PaletteDark.lightVioletBlue, // text field border color (send page)
318
+ decorationColor: PaletteDark.darkCyanBlue, // text field hint color (send page)
319
+ ),
320
+ display1: TextStyle(
321
+ color: PaletteDark.buttonNightBlue, // text field button color (send page)
322
+ decorationColor: PaletteDark.gray // text field button icon color (send page)
323
+ ),
324
+ display2: TextStyle(
325
+ color: Colors.white, // estimated fee (send page)
326
+ decorationColor: PaletteDark.darkCyanBlue // template dotted border (send page)
327
+ ),
328
+ display3: TextStyle(
329
+ color: PaletteDark.darkCyanBlue, // template new text (send page)
330
+ decorationColor: PaletteDark.darkVioletBlue // template background color (send page)
331
+ ),
332
+ display4: TextStyle(
333
+ color: PaletteDark.cyanBlue, // template title (send page)
334
+ decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page)
335
+ ),
336
+ subtitle: TextStyle(
337
+ color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page)
338
+ decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page)
339
+ ),
340
+ body1: TextStyle(
341
+ color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page)
342
+ decorationColor: PaletteDark.darkNightBlue // second gradient color bottom panel (exchange page)
343
+ ),
344
+ body2: TextStyle(
345
+ color: PaletteDark.blueGrey, // text field border on top panel (exchange page)
346
+ decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page)
347
+ )
348
+ ),
349
+ focusColor: PaletteDark.moderateBlue, // text field button (exchange page)
350
+ accentTextTheme: TextTheme(
351
+ title: TextStyle(
352
+ color: PaletteDark.nightBlue, // picker background
353
+ backgroundColor: PaletteDark.dividerColor, // picker divider
354
+ decorationColor: PaletteDark.darkNightBlue // dialog background
355
+ ),
356
+ caption: TextStyle(
357
+ color: PaletteDark.nightBlue, // container (confirm exchange)
358
+ backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange)
359
+ decorationColor: Palette.darkLavender, // text color (information page)
360
+ ),
361
+ subtitle: TextStyle(
362
+ //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page)
363
+ color: Colors.white, // QR code (exchange trade page)
364
+ backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page)
365
+ decorationColor: Colors.white // crete new wallet button background (wallet list page)
366
+ ),
367
+ headline: TextStyle(
368
+ color: PaletteDark.distantBlue, // first gradient color of wallet action buttons (wallet list page)
369
+ backgroundColor: PaletteDark.distantNightBlue, // second gradient color of wallet action buttons (wallet list page)
370
+ decorationColor: Palette.darkBlueCraiola // restore wallet button text color (wallet list page)
371
+ ),
372
+ subhead: TextStyle(
373
+ color: Colors.white, // titles color (filter widget)
374
+ backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget)
375
+ decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget)
376
+ ),
377
+ overline: TextStyle(
378
+ color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget)
379
+ decorationColor: PaletteDark.darkCyanBlue, // menu subname
380
+ ),
381
+ display1: TextStyle(
382
+ color: PaletteDark.deepPurpleBlue, // first gradient color (menu header)
383
+ decorationColor: PaletteDark.deepPurpleBlue // second gradient color(menu header)
384
+ ),
385
+ display2: TextStyle(
386
+ color: PaletteDark.nightBlue, // action button color (address text field)
387
+ decorationColor: PaletteDark.darkCyanBlue // hint text (seed widget)
388
+ ),
389
+ display3: TextStyle(
390
+ color: PaletteDark.cyanBlue, // hint text (new wallet page)
391
+ decorationColor: PaletteDark.darkGrey // underline (new wallet page)
392
+ ),
393
+ display4: TextStyle(
394
+ color: PaletteDark.deepVioletBlue, // switch background (settings page)
395
+ ),
396
+ body1: TextStyle(
397
+ color: PaletteDark.indicatorVioletBlue, // indicators (PIN code)
398
+ decorationColor: PaletteDark.lightPurpleBlue // switch (PIN code)
399
+ ),
400
+ body2: TextStyle(
401
+ color: Palette.blueCraiola, // primary buttons, alert right buttons
402
+ decorationColor: Palette.alizarinRed, // alert left button
403
+ backgroundColor: PaletteDark.granite // keyboard bar color
404
+ ),
405
+ ),
406
+ cardColor: PaletteDark.darkNightBlue // bottom button (action list)
407
);
408
}
\ No newline at end of file
lib/view_model/settings/settings_view_model.dart
+10
-5
@@ -1,4 +1,5 @@
1
import 'package:cake_wallet/src/screens/pin_code/pin_code_widget.dart';
2
+import 'package:cake_wallet/themes.dart';
3
import 'package:flutter/cupertino.dart';
4
import 'package:mobx/mobx.dart';
5
import 'package:package_info/package_info.dart';
@@ -106,11 +107,12 @@ abstract class SettingsViewModelBase with Store {
107
setAllowBiometricalAuthentication(value);
108
}
109
}),
109
- SwitcherListItem(
110
- title: S.current.settings_dark_mode,
111
- value: () => _settingsStore.isDarkTheme,
112
- onValueChange: (_, bool value) =>
113
- _settingsStore.isDarkTheme = value)
110
+ PickerListItem(
111
+ title: 'Color theme',
112
+ items: Themes.all,
113
+ selectedItem: () => theme,
114
+ onItemSelected: (Themes theme) =>
115
+ _settingsStore.currentTheme = theme)
116
],
117
[
118
LinkListItem(
@@ -186,6 +188,9 @@ abstract class SettingsViewModelBase with Store {
188
bool get allowBiometricalAuthentication =>
189
_settingsStore.allowBiometricalAuthentication;
190
191
+ @computed
192
+ Themes get theme => _settingsStore.currentTheme;
193
+
194
final Map<String, String> itemHeaders;
195
List<List<SettingsListItem>> sections;
196
final SettingsStore _settingsStore;