CAKE-182 | applied new color scheme to alert buttons; deleted themes.dart; added theme_base.dart, light_theme.dart, bright_theme.dart, dark_theme.dart, theme_list.dart to the app

OleksandrSobol committed Dec 15, 2020 at 21:30 UTC 10b419fbbe94a1e06c902d63e351a86ba4e09ee5
17 files changed +675 -650
lib/main.dart
+3 -2
@@ -1,3 +1,4 @@
1 +import 'package:cake_wallet/src/themes/theme_base.dart';
2 import 'package:flutter/material.dart';
3 import 'package:flutter/services.dart';
4 import 'package:hive/hive.dart';
@@ -131,10 +132,10 @@ class App extends StatelessWidget {
132
133 return Observer(builder: (BuildContext context) {
134 final currentTheme = settingsStore.currentTheme;
134 - final statusBarBrightness = currentTheme.isDarkTheme
135 + final statusBarBrightness = currentTheme.type == ThemeType.dark
136 ? Brightness.dark
137 : Brightness.light;
137 - final statusBarIconBrightness = currentTheme.isDarkTheme
138 + final statusBarIconBrightness = currentTheme.type == ThemeType.dark
139 ? Brightness.light
140 : Brightness.dark;
141 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
lib/src/screens/base_page.dart
+8 -8
@@ -1,4 +1,4 @@
1 -import 'package:cake_wallet/themes.dart';
1 +import 'package:cake_wallet/src/themes/theme_base.dart';
2 import 'package:flutter/cupertino.dart';
3 import 'package:flutter/material.dart';
4 import 'package:cake_wallet/palette.dart';
@@ -38,7 +38,7 @@ abstract class BasePage extends StatelessWidget {
38
39 Widget Function(BuildContext, Widget) get rootWrapper => null;
40
41 - Themes get currentTheme => getIt.get<SettingsStore>().currentTheme;
41 + ThemeBase get currentTheme => getIt.get<SettingsStore>().currentTheme;
42
43 void onOpenEndDrawer() => _scaffoldKey.currentState.openEndDrawer();
44
@@ -52,8 +52,8 @@ abstract class BasePage extends StatelessWidget {
52 final _backButton = Icon(Icons.arrow_back_ios,
53 color: titleColor ?? Theme.of(context).primaryTextTheme.title.color,
54 size: 16,);
55 - final _closeButton =
56 - currentTheme.isDarkTheme ? closeButtonImageDarkTheme : closeButtonImage;
55 + final _closeButton = currentTheme.type == ThemeType.dark
56 + ? closeButtonImageDarkTheme : closeButtonImage;
57
58 return SizedBox(
59 height: 37,
@@ -89,8 +89,8 @@ abstract class BasePage extends StatelessWidget {
89 Widget floatingActionButton(BuildContext context) => null;
90
91 ObstructingPreferredSizeWidget appBar(BuildContext context) {
92 - final appBarColor =
93 - currentTheme.isDarkTheme ? backgroundDarkColor : backgroundLightColor;
92 + final appBarColor = currentTheme.type == ThemeType.dark
93 + ? backgroundDarkColor : backgroundLightColor;
94
95 switch (appBarStyle) {
96 case AppBarStyle.regular:
@@ -132,8 +132,8 @@ abstract class BasePage extends StatelessWidget {
132
133 @override
134 Widget build(BuildContext context) {
135 - final _backgroundColor =
136 - currentTheme.isDarkTheme ? backgroundDarkColor : backgroundLightColor;
135 + final _backgroundColor = currentTheme.type == ThemeType.dark
136 + ? backgroundDarkColor : backgroundLightColor;
137
138 final root = Scaffold(
139 key: _scaffoldKey,
lib/src/screens/new_wallet/new_wallet_page.dart
+3 -1
@@ -1,4 +1,5 @@
1 import 'package:cake_wallet/routes.dart';
2 +import 'package:cake_wallet/src/themes/theme_base.dart';
3 import 'package:cake_wallet/utils/show_pop_up.dart';
4 import 'package:mobx/mobx.dart';
5 import 'package:flutter_mobx/flutter_mobx.dart';
@@ -29,7 +30,8 @@ class NewWalletPage extends BasePage {
30
31 @override
32 Widget body(BuildContext context) => WalletNameForm(_walletNewVM,
32 - currentTheme.isDarkTheme ? walletNameImage : walletNameLightImage);
33 + currentTheme.type == ThemeType.dark
34 + ? walletNameImage : walletNameLightImage);
35 }
36
37 class WalletNameForm extends StatefulWidget {
lib/src/screens/new_wallet/new_wallet_type_page.dart
+2 -1
@@ -1,4 +1,5 @@
1 import 'package:cake_wallet/entities/wallet_type.dart';
2 +import 'package:cake_wallet/src/themes/theme_base.dart';
3 import 'package:flutter/material.dart';
4 import 'package:flutter/cupertino.dart';
5 import 'package:cake_wallet/generated/i18n.dart';
@@ -26,7 +27,7 @@ class NewWalletTypePage extends BasePage {
27 Widget body(BuildContext context) =>
28 WalletTypeForm(
29 onTypeSelected: onTypeSelected,
29 - walletImage: currentTheme.isDarkTheme
30 + walletImage: currentTheme.type == ThemeType.dark
31 ? walletTypeImage : walletTypeLightImage);
32 }
33
lib/src/screens/seed/pre_seed_page.dart
+2 -1
@@ -1,4 +1,5 @@
1 import 'package:cake_wallet/routes.dart';
2 +import 'package:cake_wallet/src/themes/theme_base.dart';
3 import 'package:flutter/cupertino.dart';
4 import 'package:flutter/material.dart';
5 import 'package:cake_wallet/generated/i18n.dart';
@@ -17,7 +18,7 @@ class PreSeedPage extends BasePage {
18
19 @override
20 Widget body(BuildContext context) {
20 - final image = currentTheme.isDarkTheme ? imageDark : imageLight;
21 + final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight;
22
23 return WillPopScope(
24 onWillPop: () async => false,
lib/src/screens/seed/wallet_seed_page.dart
+2 -1
@@ -1,4 +1,5 @@
1 import 'package:cake_wallet/palette.dart';
2 +import 'package:cake_wallet/src/themes/theme_base.dart';
3 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
4 import 'package:cake_wallet/utils/show_bar.dart';
5 import 'package:cake_wallet/utils/show_pop_up.dart';
@@ -81,7 +82,7 @@ class WalletSeedPage extends BasePage {
82
83 @override
84 Widget body(BuildContext context) {
84 - final image = currentTheme.isDarkTheme ? imageDark : imageLight;
85 + final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight;
86
87 return WillPopScope(onWillPop: () async => false, child: Container(
88 padding: EdgeInsets.all(24),
lib/src/screens/seed_language/seed_language_page.dart
+3 -2
@@ -1,3 +1,4 @@
1 +import 'package:cake_wallet/src/themes/theme_base.dart';
2 import 'package:cake_wallet/src/widgets/seed_language_selector.dart';
3 import 'package:flutter_mobx/flutter_mobx.dart';
4 import 'package:flutter/material.dart';
@@ -24,8 +25,8 @@ class SeedLanguage extends BasePage {
25 Widget body(BuildContext context) =>
26 SeedLanguageForm(
27 onConfirm: onConfirm,
27 - walletImage:
28 - currentTheme.isDarkTheme ? walletNameImage : walletNameLightImage);
28 + walletImage: currentTheme.type == ThemeType.dark
29 + ? walletNameImage : walletNameLightImage);
30 }
31
32 class SeedLanguageForm extends StatefulWidget {
lib/src/screens/welcome/welcome_page.dart
+3 -3
@@ -1,9 +1,9 @@
1 +import 'package:cake_wallet/src/themes/theme_base.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';
6 -import 'package:cake_wallet/themes.dart';
7
8 class WelcomePage extends BasePage {
9 static const aspectRatioImage = 1.25;
@@ -22,8 +22,8 @@ class WelcomePage extends BasePage {
22
23 @override
24 Widget body(BuildContext context) {
25 - final welcomeImage =
26 - currentTheme.isDarkTheme ? welcomeImageDark : welcomeImageLight;
25 + final welcomeImage = currentTheme.type == ThemeType.dark
26 + ? welcomeImageDark : welcomeImageLight;
27
28 final newWalletImage = Image.asset('assets/images/new_wallet.png',
29 height: 12,
lib/src/themes/bright_theme.dart new
+197
@@ -0,0 +1,197 @@
1 +import 'package:cake_wallet/src/themes/theme_base.dart';
2 +import 'package:cake_wallet/generated/i18n.dart';
3 +import 'package:cake_wallet/palette.dart';
4 +import 'package:flutter/material.dart';
5 +
6 +class BrightTheme extends ThemeBase {
7 + BrightTheme({@required int raw}) : super(raw: raw);
8 +
9 + @override
10 + String get title => S.current.bright_theme;
11 +
12 + @override
13 + ThemeType get type => ThemeType.bright;
14 +
15 + @override
16 + ThemeData get themeData => ThemeData(
17 + fontFamily: 'Lato',
18 + brightness: Brightness.light,
19 + backgroundColor: Colors.white,
20 + accentColor: Palette.blueCraiola, // first gradient color
21 + scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color
22 + primaryColor: Palette.redHat, // third gradient color
23 + buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page
24 + indicatorColor: Colors.white.withOpacity(0.5), // page indicator
25 + hoverColor: Colors.white, // amount hint text (receive page)
26 + dividerColor: Palette.paleBlue,
27 + hintColor: Palette.gray,
28 + textTheme: TextTheme(
29 + title: TextStyle(
30 + color: Colors.white, // sync_indicator text
31 + backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator
32 + decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator
33 + ),
34 + caption: TextStyle(
35 + color: Palette.shineOrange, // not synced light
36 + decorationColor: Colors.white, // filter icon
37 + ),
38 + overline: TextStyle(
39 + color: Colors.white.withOpacity(0.2), // filter button
40 + backgroundColor: Colors.white.withOpacity(0.5), // date section row
41 + decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows)
42 + ),
43 + subhead: TextStyle(
44 + color: Colors.white.withOpacity(0.2), // address button border
45 + decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget)
46 + ),
47 + headline: TextStyle(
48 + color: Colors.white, // qr code
49 + decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page)
50 + ),
51 + display1: TextStyle(
52 + color: PaletteDark.lightBlueGrey, // icons color (receive page)
53 + decorationColor: Palette.lavender, // icons background (receive page)
54 + ),
55 + display2: TextStyle(
56 + color: Palette.darkBlueCraiola, // text color of tiles (receive page)
57 + decorationColor: Colors.white // background of tiles (receive page)
58 + ),
59 + display3: TextStyle(
60 + color: Colors.white, // text color of current tile (receive page),
61 + //decorationColor: Palette.blueCraiola // background of current tile (receive page)
62 + decorationColor: Palette.moderateSlateBlue // background of current tile (receive page)
63 + ),
64 + display4: TextStyle(
65 + color: Palette.violetBlue, // text color of tiles (account list)
66 + decorationColor: Colors.white // background of tiles (account list)
67 + ),
68 + subtitle: TextStyle(
69 + color: Palette.moderateSlateBlue, // text color of current tile (account list)
70 + decorationColor: Colors.white // background of current tile (account list)
71 + ),
72 + body1: TextStyle(
73 + color: Palette.moderatePurpleBlue, // scrollbar thumb
74 + decorationColor: Palette.periwinkleCraiola // scrollbar background
75 + ),
76 + body2: TextStyle(
77 + color: Palette.moderateLavender, // menu header
78 + decorationColor: Colors.white, // menu background
79 + )
80 + ),
81 + primaryTextTheme: TextTheme(
82 + title: TextStyle(
83 + color: Palette.darkBlueCraiola, // title color
84 + backgroundColor: Palette.wildPeriwinkle // textfield underline
85 + ),
86 + caption: TextStyle(
87 + color: PaletteDark.pigeonBlue, // secondary text
88 + decorationColor: Palette.wildLavender // menu divider
89 + ),
90 + overline: TextStyle(
91 + color: Palette.darkGray, // transaction/trade details titles
92 + decorationColor: Colors.white.withOpacity(0.5), // placeholder
93 + ),
94 + subhead: TextStyle(
95 + color: Palette.blueCraiola, // first gradient color (send page)
96 + decorationColor: Palette.pinkFlamingo // second gradient color (send page)
97 + ),
98 + headline: TextStyle(
99 + color: Colors.white.withOpacity(0.5), // text field border color (send page)
100 + decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page)
101 + ),
102 + display1: TextStyle(
103 + color: Colors.white.withOpacity(0.2), // text field button color (send page)
104 + decorationColor: Colors.white // text field button icon color (send page)
105 + ),
106 + display2: TextStyle(
107 + color: Colors.white.withOpacity(0.5), // estimated fee (send page)
108 + decorationColor: Palette.shadowWhite // template dotted border (send page)
109 + ),
110 + display3: TextStyle(
111 + color: Palette.darkBlueCraiola, // template new text (send page)
112 + decorationColor: Palette.shadowWhite // template background color (send page)
113 + ),
114 + display4: TextStyle(
115 + color: Palette.darkBlueCraiola, // template title (send page)
116 + decorationColor: Palette.niagara // receive amount text (exchange page)
117 + ),
118 + subtitle: TextStyle(
119 + color: Palette.blueCraiola, // first gradient color top panel (exchange page)
120 + decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page)
121 + ),
122 + body1: TextStyle(
123 + color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page)
124 + decorationColor: Palette.pinkFlamingo.withOpacity(0.7), // second gradient color bottom panel (exchange page)
125 + backgroundColor: Palette.moderateSlateBlue // alert right button text
126 + ),
127 + body2: TextStyle(
128 + color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page)
129 + decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page)
130 + backgroundColor: Palette.brightOrange // alert left button text
131 + )
132 + ),
133 + focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
134 + accentTextTheme: TextTheme(
135 + title: TextStyle(
136 + color: Colors.white, // picker background
137 + backgroundColor: Palette.periwinkleCraiola, // picker divider
138 + decorationColor: Colors.white // dialog background
139 + ),
140 + caption: TextStyle(
141 + color: Palette.moderateLavender, // container (confirm exchange)
142 + backgroundColor: Palette.moderateLavender, // button background (confirm exchange)
143 + decorationColor: Palette.darkBlueCraiola, // text color (information page)
144 + ),
145 + subtitle: TextStyle(
146 + color: Palette.darkBlueCraiola, // QR code (exchange trade page)
147 + backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page)
148 + //decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page)
149 + decorationColor: Palette.moderateSlateBlue // crete new wallet button background (wallet list page)
150 + ),
151 + headline: TextStyle(
152 + color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
153 + backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
154 + decorationColor: Colors.white // restore wallet button text color (wallet list page)
155 + ),
156 + subhead: TextStyle(
157 + color: Palette.darkGray, // titles color (filter widget)
158 + backgroundColor: Palette.periwinkle, // divider color (filter widget)
159 + decorationColor: Colors.white // checkbox background (filter widget)
160 + ),
161 + overline: TextStyle(
162 + color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
163 + decorationColor: Colors.white, // menu subname
164 + ),
165 + display1: TextStyle(
166 + color: Palette.blueCraiola, // first gradient color (menu header)
167 + decorationColor: Palette.pinkFlamingo, // second gradient color(menu header)
168 + backgroundColor: Colors.white // active dot color
169 + ),
170 + display2: TextStyle(
171 + color: Palette.shadowWhite, // action button color (address text field)
172 + decorationColor: Palette.darkGray, // hint text (seed widget)
173 + backgroundColor: Colors.white.withOpacity(0.5) // text on balance page
174 + ),
175 + display3: TextStyle(
176 + color: Palette.darkGray, // hint text (new wallet page)
177 + decorationColor: Palette.periwinkleCraiola, // underline (new wallet page)
178 + backgroundColor: Colors.white // menu, icons, balance (dashboard page)
179 + ),
180 + display4: TextStyle(
181 + color: Palette.darkGray, // switch background (settings page)
182 + decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page)
183 + ),
184 + body1: TextStyle(
185 + color: Palette.darkGray, // indicators (PIN code)
186 + decorationColor: Palette.darkGray, // switch (PIN code)
187 + backgroundColor: Colors.white // alert right button
188 + ),
189 + body2: TextStyle(
190 + color: Palette.moderateSlateBlue, // primary buttons
191 + decorationColor: Colors.white, // alert left button,
192 + backgroundColor: Palette.dullGray // keyboard bar color
193 + ),
194 + ),
195 + cardColor: Palette.moderateSlateBlue // bottom button (action list)
196 + );
197 +}
\ No newline at end of file
lib/src/themes/dark_theme.dart new
+196
@@ -0,0 +1,196 @@
1 +import 'package:cake_wallet/src/themes/theme_base.dart';
2 +import 'package:cake_wallet/generated/i18n.dart';
3 +import 'package:cake_wallet/palette.dart';
4 +import 'package:flutter/material.dart';
5 +
6 +class DarkTheme extends ThemeBase {
7 + DarkTheme({@required int raw}) : super(raw: raw);
8 +
9 + @override
10 + String get title => S.current.dark_theme;
11 +
12 + @override
13 + ThemeType get type => ThemeType.dark;
14 +
15 + @override
16 + ThemeData get themeData => ThemeData(
17 + fontFamily: 'Lato',
18 + brightness: Brightness.dark,
19 + backgroundColor: PaletteDark.backgroundColor,
20 + accentColor: PaletteDark.backgroundColor, // first gradient color
21 + scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color
22 + primaryColor: PaletteDark.backgroundColor, // third gradient color
23 + buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page
24 + indicatorColor: PaletteDark.cyanBlue, // page indicator
25 + hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page)
26 + dividerColor: PaletteDark.dividerColor,
27 + hintColor: PaletteDark.pigeonBlue, // menu
28 + textTheme: TextTheme(
29 + title: TextStyle(
30 + color: PaletteDark.wildBlue, // sync_indicator text
31 + backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator
32 + decorationColor: PaletteDark.oceanBlue // not synced sync_indicator
33 + ),
34 + caption: TextStyle(
35 + color: PaletteDark.orangeYellow, // not synced light
36 + decorationColor: PaletteDark.wildBlue, // filter icon
37 + ),
38 + overline: TextStyle(
39 + color: PaletteDark.oceanBlue, // filter button
40 + backgroundColor: PaletteDark.darkCyanBlue, // date section row
41 + decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows)
42 + ),
43 + subhead: TextStyle(
44 + color: PaletteDark.nightBlue, // address button border
45 + decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget)
46 + ),
47 + headline: TextStyle(
48 + color: PaletteDark.lightBlueGrey, // qr code
49 + decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page)
50 + ),
51 + display1: TextStyle(
52 + color: Colors.white, // icons color (receive page)
53 + decorationColor: PaletteDark.distantNightBlue, // icons background (receive page)
54 + ),
55 + display2: TextStyle(
56 + color: Colors.white, // text color of tiles (receive page)
57 + decorationColor: PaletteDark.nightBlue // background of tiles (receive page)
58 + ),
59 + display3: TextStyle(
60 + color: Palette.blueCraiola, // text color of current tile (receive page)
61 + decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page)
62 + ),
63 + display4: TextStyle(
64 + color: Colors.white, // text color of tiles (account list)
65 + decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list)
66 + ),
67 + subtitle: TextStyle(
68 + color: Palette.blueCraiola, // text color of current tile (account list)
69 + decorationColor: PaletteDark.darkNightBlue // background of current tile (account list)
70 + ),
71 + body1: TextStyle(
72 + color: PaletteDark.wildBlueGrey, // scrollbar thumb
73 + decorationColor: PaletteDark.violetBlue // scrollbar background
74 + ),
75 + body2: TextStyle(
76 + color: PaletteDark.deepPurpleBlue, // menu header
77 + decorationColor: PaletteDark.deepPurpleBlue, // menu background
78 + )
79 + ),
80 + primaryTextTheme: TextTheme(
81 + title: TextStyle(
82 + color: Colors.white, // title color
83 + backgroundColor: PaletteDark.darkOceanBlue // textfield underline
84 + ),
85 + caption: TextStyle(
86 + color: PaletteDark.darkCyanBlue, // secondary text
87 + decorationColor: PaletteDark.darkOceanBlue // menu divider
88 + ),
89 + overline: TextStyle(
90 + color: PaletteDark.lightBlueGrey, // transaction/trade details titles
91 + decorationColor: Colors.grey, // placeholder
92 + ),
93 + subhead: TextStyle(
94 + color: PaletteDark.darkNightBlue, // first gradient color (send page)
95 + decorationColor: PaletteDark.darkNightBlue // second gradient color (send page)
96 + ),
97 + headline: TextStyle(
98 + color: PaletteDark.lightVioletBlue, // text field border color (send page)
99 + decorationColor: PaletteDark.darkCyanBlue, // text field hint color (send page)
100 + ),
101 + display1: TextStyle(
102 + color: PaletteDark.buttonNightBlue, // text field button color (send page)
103 + decorationColor: PaletteDark.gray // text field button icon color (send page)
104 + ),
105 + display2: TextStyle(
106 + color: Colors.white, // estimated fee (send page)
107 + decorationColor: PaletteDark.darkCyanBlue // template dotted border (send page)
108 + ),
109 + display3: TextStyle(
110 + color: PaletteDark.darkCyanBlue, // template new text (send page)
111 + decorationColor: PaletteDark.darkVioletBlue // template background color (send page)
112 + ),
113 + display4: TextStyle(
114 + color: PaletteDark.cyanBlue, // template title (send page)
115 + decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page)
116 + ),
117 + subtitle: TextStyle(
118 + color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page)
119 + decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page)
120 + ),
121 + body1: TextStyle(
122 + color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page)
123 + decorationColor: PaletteDark.darkNightBlue, // second gradient color bottom panel (exchange page)
124 + backgroundColor: Palette.blueCraiola // alert right button text
125 + ),
126 + body2: TextStyle(
127 + color: PaletteDark.blueGrey, // text field border on top panel (exchange page)
128 + decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page)
129 + backgroundColor: Palette.alizarinRed // alert left button text
130 + )
131 + ),
132 + focusColor: PaletteDark.moderateBlue, // text field button (exchange page)
133 + accentTextTheme: TextTheme(
134 + title: TextStyle(
135 + color: PaletteDark.nightBlue, // picker background
136 + backgroundColor: PaletteDark.dividerColor, // picker divider
137 + decorationColor: PaletteDark.darkNightBlue // dialog background
138 + ),
139 + caption: TextStyle(
140 + color: PaletteDark.nightBlue, // container (confirm exchange)
141 + backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange)
142 + decorationColor: Palette.darkLavender, // text color (information page)
143 + ),
144 + subtitle: TextStyle(
145 + //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page)
146 + color: Colors.white, // QR code (exchange trade page)
147 + backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page)
148 + decorationColor: Colors.white // crete new wallet button background (wallet list page)
149 + ),
150 + headline: TextStyle(
151 + color: PaletteDark.distantBlue, // first gradient color of wallet action buttons (wallet list page)
152 + backgroundColor: PaletteDark.distantNightBlue, // second gradient color of wallet action buttons (wallet list page)
153 + decorationColor: Palette.darkBlueCraiola // restore wallet button text color (wallet list page)
154 + ),
155 + subhead: TextStyle(
156 + color: Colors.white, // titles color (filter widget)
157 + backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget)
158 + decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget)
159 + ),
160 + overline: TextStyle(
161 + color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget)
162 + decorationColor: PaletteDark.darkCyanBlue, // menu subname
163 + ),
164 + display1: TextStyle(
165 + color: PaletteDark.deepPurpleBlue, // first gradient color (menu header)
166 + decorationColor: PaletteDark.deepPurpleBlue, // second gradient color(menu header)
167 + backgroundColor: Colors.white // active dot color
168 + ),
169 + display2: TextStyle(
170 + color: PaletteDark.nightBlue, // action button color (address text field)
171 + decorationColor: PaletteDark.darkCyanBlue, // hint text (seed widget)
172 + backgroundColor: PaletteDark.cyanBlue // text on balance page
173 + ),
174 + display3: TextStyle(
175 + color: PaletteDark.cyanBlue, // hint text (new wallet page)
176 + decorationColor: PaletteDark.darkGrey, // underline (new wallet page)
177 + backgroundColor: Colors.white // menu, icons, balance (dashboard page)
178 + ),
179 + display4: TextStyle(
180 + color: PaletteDark.deepVioletBlue, // switch background (settings page)
181 + decorationColor: PaletteDark.lightBlueGrey // hint text (exchange page)
182 + ),
183 + body1: TextStyle(
184 + color: PaletteDark.indicatorVioletBlue, // indicators (PIN code)
185 + decorationColor: PaletteDark.lightPurpleBlue, // switch (PIN code)
186 + backgroundColor: PaletteDark.darkNightBlue // alert right button
187 + ),
188 + body2: TextStyle(
189 + color: Palette.blueCraiola, // primary buttons
190 + decorationColor: PaletteDark.darkNightBlue, // alert left button
191 + backgroundColor: PaletteDark.granite // keyboard bar color
192 + ),
193 + ),
194 + cardColor: PaletteDark.darkNightBlue // bottom button (action list)
195 + );
196 +}
\ No newline at end of file
lib/src/themes/light_theme.dart new
+196
@@ -0,0 +1,196 @@
1 +import 'package:cake_wallet/src/themes/theme_base.dart';
2 +import 'package:cake_wallet/generated/i18n.dart';
3 +import 'package:cake_wallet/palette.dart';
4 +import 'package:flutter/material.dart';
5 +
6 +class LightTheme extends ThemeBase {
7 + LightTheme({@required int raw}) : super(raw: raw);
8 +
9 + @override
10 + String get title => S.current.light_theme;
11 +
12 + @override
13 + ThemeType get type => ThemeType.light;
14 +
15 + @override
16 + ThemeData get themeData => ThemeData(
17 + fontFamily: 'Lato',
18 + brightness: Brightness.light,
19 + backgroundColor: Colors.white,
20 + accentColor: Colors.white, // first gradient color
21 + scaffoldBackgroundColor: Colors.white, // second gradient color
22 + primaryColor: Colors.white, // third gradient color
23 + buttonColor: Palette.blueAlice, // action buttons on dashboard page
24 + indicatorColor: PaletteDark.darkCyanBlue.withOpacity(0.67), // page indicator
25 + hoverColor: Palette.darkBlueCraiola, // amount hint text (receive page)
26 + dividerColor: Palette.paleBlue,
27 + hintColor: Palette.gray,
28 + textTheme: TextTheme(
29 + title: TextStyle(
30 + color: Palette.darkBlueCraiola, // sync_indicator text
31 + backgroundColor: Palette.blueAlice, // synced sync_indicator
32 + decorationColor: Palette.blueAlice.withOpacity(0.75), // not synced sync_indicator
33 + ),
34 + caption: TextStyle(
35 + color: Palette.shineOrange, // not synced light
36 + decorationColor: PaletteDark.wildBlue, // filter icon
37 + ),
38 + overline: TextStyle(
39 + color: Palette.blueAlice, // filter button
40 + backgroundColor: PaletteDark.darkCyanBlue, // date section row
41 + decorationColor: Palette.blueAlice // icons (transaction and trade rows)
42 + ),
43 + subhead: TextStyle(
44 + color: Palette.blueAlice, // address button border
45 + decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget)
46 + ),
47 + headline: TextStyle(
48 + color: Colors.white, // qr code
49 + decorationColor: Palette.darkBlueCraiola, // bottom border of amount (receive page)
50 + ),
51 + display1: TextStyle(
52 + color: PaletteDark.lightBlueGrey, // icons color (receive page)
53 + decorationColor: Palette.moderateLavender, // icons background (receive page)
54 + ),
55 + display2: TextStyle(
56 + color: Palette.darkBlueCraiola, // text color of tiles (receive page)
57 + decorationColor: Palette.blueAlice // background of tiles (receive page)
58 + ),
59 + display3: TextStyle(
60 + color: Colors.white, // text color of current tile (receive page),
61 + //decorationColor: Palette.blueCraiola // background of current tile (receive page)
62 + decorationColor: Palette.blueCraiola // background of current tile (receive page)
63 + ),
64 + display4: TextStyle(
65 + color: Palette.violetBlue, // text color of tiles (account list)
66 + decorationColor: Colors.white // background of tiles (account list)
67 + ),
68 + subtitle: TextStyle(
69 + color: Palette.protectiveBlue, // text color of current tile (account list)
70 + decorationColor: Colors.white // background of current tile (account list)
71 + ),
72 + body1: TextStyle(
73 + color: Palette.moderatePurpleBlue, // scrollbar thumb
74 + decorationColor: Palette.periwinkleCraiola // scrollbar background
75 + ),
76 + body2: TextStyle(
77 + color: Palette.moderateLavender, // menu header
78 + decorationColor: Colors.white, // menu background
79 + )
80 + ),
81 + primaryTextTheme: TextTheme(
82 + title: TextStyle(
83 + color: Palette.darkBlueCraiola, // title color
84 + backgroundColor: Palette.wildPeriwinkle // textfield underline
85 + ),
86 + caption: TextStyle(
87 + color: PaletteDark.pigeonBlue, // secondary text
88 + decorationColor: Palette.wildLavender // menu divider
89 + ),
90 + overline: TextStyle(
91 + color: Palette.darkGray, // transaction/trade details titles
92 + decorationColor: PaletteDark.darkCyanBlue, // placeholder
93 + ),
94 + subhead: TextStyle(
95 + color: Palette.blueCraiola, // first gradient color (send page)
96 + decorationColor: Palette.blueGreyCraiola // second gradient color (send page)
97 + ),
98 + headline: TextStyle(
99 + color: Colors.white.withOpacity(0.5), // text field border color (send page)
100 + decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page)
101 + ),
102 + display1: TextStyle(
103 + color: Colors.white.withOpacity(0.2), // text field button color (send page)
104 + decorationColor: Colors.white // text field button icon color (send page)
105 + ),
106 + display2: TextStyle(
107 + color: Colors.white.withOpacity(0.5), // estimated fee (send page)
108 + decorationColor: Palette.moderateLavender // template dotted border (send page)
109 + ),
110 + display3: TextStyle(
111 + color: Palette.darkBlueCraiola, // template new text (send page)
112 + decorationColor: Palette.blueAlice // template background color (send page)
113 + ),
114 + display4: TextStyle(
115 + color: Palette.darkBlueCraiola, // template title (send page)
116 + decorationColor: Palette.niagara // receive amount text (exchange page)
117 + ),
118 + subtitle: TextStyle(
119 + color: Palette.blueCraiola, // first gradient color top panel (exchange page)
120 + decorationColor: Palette.blueGreyCraiola // second gradient color top panel (exchange page)
121 + ),
122 + body1: TextStyle(
123 + color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page)
124 + decorationColor: Palette.blueGreyCraiola.withOpacity(0.7), // second gradient color bottom panel (exchange page)
125 + backgroundColor: Palette.protectiveBlue // alert right button text
126 + ),
127 + body2: TextStyle(
128 + color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page)
129 + decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page)
130 + backgroundColor: Palette.brightOrange // alert left button text
131 + )
132 + ),
133 + focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
134 + accentTextTheme: TextTheme(
135 + title: TextStyle(
136 + color: Colors.white, // picker background
137 + backgroundColor: Palette.periwinkleCraiola, // picker divider
138 + decorationColor: Colors.white // dialog background
139 + ),
140 + caption: TextStyle(
141 + color: Palette.blueAlice, // container (confirm exchange)
142 + backgroundColor: Palette.blueAlice, // button background (confirm exchange)
143 + decorationColor: Palette.darkBlueCraiola, // text color (information page)
144 + ),
145 + subtitle: TextStyle(
146 + color: Palette.darkBlueCraiola, // QR code (exchange trade page)
147 + backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page)
148 + decorationColor: Palette.protectiveBlue // crete new wallet button background (wallet list page)
149 + ),
150 + headline: TextStyle(
151 + color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
152 + backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
153 + decorationColor: Colors.white // restore wallet button text color (wallet list page)
154 + ),
155 + subhead: TextStyle(
156 + color: Palette.darkGray, // titles color (filter widget)
157 + backgroundColor: Palette.periwinkle, // divider color (filter widget)
158 + decorationColor: Colors.white // checkbox background (filter widget)
159 + ),
160 + overline: TextStyle(
161 + color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
162 + decorationColor: Colors.white, // menu subname
163 + ),
164 + display1: TextStyle(
165 + color: Palette.blueCraiola, // first gradient color (menu header)
166 + decorationColor: Palette.blueGreyCraiola, // second gradient color(menu header)
167 + backgroundColor: PaletteDark.darkNightBlue // active dot color
168 + ),
169 + display2: TextStyle(
170 + color: Palette.shadowWhite, // action button color (address text field)
171 + decorationColor: Palette.darkGray, // hint text (seed widget)
172 + backgroundColor: Palette.darkBlueCraiola.withOpacity(0.67) // text on balance page
173 + ),
174 + display3: TextStyle(
175 + color: Palette.darkGray, // hint text (new wallet page)
176 + decorationColor: Palette.periwinkleCraiola, // underline (new wallet page)
177 + backgroundColor: Palette.darkBlueCraiola // menu, icons, balance (dashboard page)
178 + ),
179 + display4: TextStyle(
180 + color: Palette.darkGray, // switch background (settings page)
181 + decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page)
182 + ),
183 + body1: TextStyle(
184 + color: Palette.darkGray, // indicators (PIN code)
185 + decorationColor: Palette.darkGray, // switch (PIN code)
186 + backgroundColor: Colors.white // alert right button
187 + ),
188 + body2: TextStyle(
189 + color: Palette.protectiveBlue, // primary buttons
190 + decorationColor: Colors.white, // alert left button,
191 + backgroundColor: Palette.dullGray // keyboard bar color
192 + ),
193 + ),
194 + cardColor: Palette.protectiveBlue // bottom button (action list)
195 + );
196 +}
\ No newline at end of file
lib/src/themes/theme_base.dart new
+17
@@ -0,0 +1,17 @@
1 +import 'package:flutter/material.dart';
2 +
3 +enum ThemeType {light, bright, dark}
4 +
5 +abstract class ThemeBase {
6 + ThemeBase({@required this.raw});
7 +
8 + final int raw;
9 + String get title;
10 + ThemeData get themeData;
11 + ThemeType get type;
12 +
13 + @override
14 + String toString() {
15 + return title;
16 + }
17 +}
\ No newline at end of file
lib/src/themes/theme_list.dart new
+25
@@ -0,0 +1,25 @@
1 +import 'package:cake_wallet/src/themes/bright_theme.dart';
2 +import 'package:cake_wallet/src/themes/dark_theme.dart';
3 +import 'package:cake_wallet/src/themes/light_theme.dart';
4 +import 'package:cake_wallet/src/themes/theme_base.dart';
5 +
6 +class ThemeList {
7 + static final all = [lightTheme, brightTheme, darkTheme];
8 +
9 + static final lightTheme = LightTheme(raw: 0);
10 + static final brightTheme = BrightTheme(raw: 1);
11 + static final darkTheme = DarkTheme(raw: 2);
12 +
13 + static ThemeBase deserialize({int raw}) {
14 + switch (raw) {
15 + case 0:
16 + return lightTheme;
17 + case 1:
18 + return brightTheme;
19 + case 2:
20 + return darkTheme;
21 + default:
22 + return null;
23 + }
24 + }
25 +}
\ No newline at end of file
lib/src/widgets/base_alert_dialog.dart
+6 -14
@@ -1,7 +1,4 @@
1 import 'dart:ui';
2 -import 'package:cake_wallet/di.dart';
3 -import 'package:cake_wallet/store/settings_store.dart';
4 -import 'package:cake_wallet/themes.dart';
2 import 'package:flutter/material.dart';
3 import 'package:cake_wallet/palette.dart';
4
@@ -13,7 +10,6 @@ class BaseAlertDialog extends StatelessWidget {
10 VoidCallback get actionLeft => () {};
11 VoidCallback get actionRight => () {};
12 bool get barrierDismissible => true;
16 - Themes get currentTheme => getIt.get<SettingsStore>().currentTheme;
13
14 Widget title(BuildContext context) {
15 return Text(
@@ -73,13 +69,11 @@ class BaseAlertDialog extends StatelessWidget {
69 ),
70 )
71 ),
76 - currentTheme.isLightTheme
77 - ? Container(
72 + Container(
73 width: 1,
74 height: 52,
80 - color: Colors.grey[300],
81 - )
82 - : Offstage(),
75 + color: Theme.of(context).dividerColor,
76 + ),
77 Flexible(
78 child: Container(
79 height: 52,
@@ -146,12 +140,10 @@ class BaseAlertDialog extends StatelessWidget {
140 ],
141 ),
142 ),
149 - currentTheme.isLightTheme
150 - ? Container(
143 + Container(
144 height: 1,
152 - color: Colors.grey[300],
153 - )
154 - : Offstage(),
145 + color: Theme.of(context).dividerColor,
146 + ),
147 actionButtons(context)
148 ],
149 ),
lib/store/settings_store.dart
+7 -6
@@ -1,5 +1,6 @@
1 import 'package:cake_wallet/entities/preferences_key.dart';
2 -import 'package:cake_wallet/themes.dart';
2 +import 'package:cake_wallet/src/themes/theme_base.dart';
3 +import 'package:cake_wallet/src/themes/theme_list.dart';
4 import 'package:flutter/foundation.dart';
5 import 'package:flutter/material.dart';
6 import 'package:hive/hive.dart';
@@ -28,7 +29,7 @@ abstract class SettingsStoreBase with Store {
29 @required BalanceDisplayMode initialBalanceDisplayMode,
30 @required bool initialSaveRecipientAddress,
31 @required bool initialAllowBiometricalAuthentication,
31 - @required Themes initialTheme,
32 + @required ThemeBase initialTheme,
33 @required int initialPinLength,
34 @required String initialLanguageCode,
35 // @required String initialCurrentLocale,
@@ -66,8 +67,8 @@ abstract class SettingsStoreBase with Store {
67
68 reaction(
69 (_) => currentTheme,
69 - (Themes theme) => sharedPreferences.setInt(
70 - PreferencesKey.currentTheme, theme.serialize()));
70 + (ThemeBase theme) => sharedPreferences.setInt(
71 + PreferencesKey.currentTheme, theme.raw));
72
73 reaction(
74 (_) => allowBiometricalAuthentication,
@@ -111,7 +112,7 @@ abstract class SettingsStoreBase with Store {
112 bool allowBiometricalAuthentication;
113
114 @observable
114 - Themes currentTheme;
115 + ThemeBase currentTheme;
116
117 @observable
118 int pinCodeLength;
@@ -154,7 +155,7 @@ abstract class SettingsStoreBase with Store {
155 final allowBiometricalAuthentication = sharedPreferences
156 .getBool(PreferencesKey.allowBiometricalAuthenticationKey) ??
157 false;
157 - final savedTheme = Themes.deserialize(
158 + final savedTheme = ThemeList.deserialize(
159 raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? 0);
160 final actionListDisplayMode = ObservableList<ActionListDisplayMode>();
161 actionListDisplayMode.addAll(deserializeActionlistDisplayModes(
lib/themes.dart deleted
-607
@@ -1,607 +0,0 @@
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 -
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 brightTheme;
39 - case Themes.dark:
40 - return darkTheme;
41 - default:
42 - return null;
43 - }
44 - }
45 -
46 - bool get isLightTheme => this == Themes.light;
47 - bool get isBrightTheme => this == Themes.bright;
48 - bool get isDarkTheme => this == Themes.dark;
49 -
50 - @override
51 - String toString() {
52 - switch (this) {
53 - case Themes.light:
54 - return S.current.light_theme;
55 - case Themes.bright:
56 - return S.current.bright_theme;
57 - case Themes.dark:
58 - return S.current.dark_theme;
59 - default:
60 - return '';
61 - }
62 - }
63 -
64 - static final ThemeData lightTheme = ThemeData(
65 - fontFamily: 'Lato',
66 - brightness: Brightness.light,
67 - backgroundColor: Colors.white,
68 - accentColor: Colors.white, // first gradient color
69 - scaffoldBackgroundColor: Colors.white, // second gradient color
70 - primaryColor: Colors.white, // third gradient color
71 - buttonColor: Palette.blueAlice, // action buttons on dashboard page
72 - indicatorColor: PaletteDark.darkCyanBlue.withOpacity(0.67), // page indicator
73 - hoverColor: Palette.darkBlueCraiola, // amount hint text (receive page)
74 - dividerColor: Palette.paleBlue,
75 - hintColor: Palette.gray,
76 - textTheme: TextTheme(
77 - title: TextStyle(
78 - color: Palette.darkBlueCraiola, // sync_indicator text
79 - backgroundColor: Palette.blueAlice, // synced sync_indicator
80 - decorationColor: Palette.blueAlice.withOpacity(0.75), // not synced sync_indicator
81 - ),
82 - caption: TextStyle(
83 - color: Palette.shineOrange, // not synced light
84 - decorationColor: PaletteDark.wildBlue, // filter icon
85 - ),
86 - overline: TextStyle(
87 - color: Palette.blueAlice, // filter button
88 - backgroundColor: PaletteDark.darkCyanBlue, // date section row
89 - decorationColor: Palette.blueAlice // icons (transaction and trade rows)
90 - ),
91 - subhead: TextStyle(
92 - color: Palette.blueAlice, // address button border
93 - decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget)
94 - ),
95 - headline: TextStyle(
96 - color: Colors.white, // qr code
97 - decorationColor: Palette.darkBlueCraiola, // bottom border of amount (receive page)
98 - ),
99 - display1: TextStyle(
100 - color: PaletteDark.lightBlueGrey, // icons color (receive page)
101 - decorationColor: Palette.moderateLavender, // icons background (receive page)
102 - ),
103 - display2: TextStyle(
104 - color: Palette.darkBlueCraiola, // text color of tiles (receive page)
105 - decorationColor: Palette.blueAlice // background of tiles (receive page)
106 - ),
107 - display3: TextStyle(
108 - color: Colors.white, // text color of current tile (receive page),
109 - //decorationColor: Palette.blueCraiola // background of current tile (receive page)
110 - decorationColor: Palette.blueCraiola // background of current tile (receive page)
111 - ),
112 - display4: TextStyle(
113 - color: Palette.violetBlue, // text color of tiles (account list)
114 - decorationColor: Colors.white // background of tiles (account list)
115 - ),
116 - subtitle: TextStyle(
117 - color: Palette.protectiveBlue, // text color of current tile (account list)
118 - decorationColor: Colors.white // background of current tile (account list)
119 - ),
120 - body1: TextStyle(
121 - color: Palette.moderatePurpleBlue, // scrollbar thumb
122 - decorationColor: Palette.periwinkleCraiola // scrollbar background
123 - ),
124 - body2: TextStyle(
125 - color: Palette.moderateLavender, // menu header
126 - decorationColor: Colors.white, // menu background
127 - )
128 - ),
129 - primaryTextTheme: TextTheme(
130 - title: TextStyle(
131 - color: Palette.darkBlueCraiola, // title color
132 - backgroundColor: Palette.wildPeriwinkle // textfield underline
133 - ),
134 - caption: TextStyle(
135 - color: PaletteDark.pigeonBlue, // secondary text
136 - decorationColor: Palette.wildLavender // menu divider
137 - ),
138 - overline: TextStyle(
139 - color: Palette.darkGray, // transaction/trade details titles
140 - decorationColor: PaletteDark.darkCyanBlue, // placeholder
141 - ),
142 - subhead: TextStyle(
143 - color: Palette.blueCraiola, // first gradient color (send page)
144 - decorationColor: Palette.blueGreyCraiola // second gradient color (send page)
145 - ),
146 - headline: TextStyle(
147 - color: Colors.white.withOpacity(0.5), // text field border color (send page)
148 - decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page)
149 - ),
150 - display1: TextStyle(
151 - color: Colors.white.withOpacity(0.2), // text field button color (send page)
152 - decorationColor: Colors.white // text field button icon color (send page)
153 - ),
154 - display2: TextStyle(
155 - color: Colors.white.withOpacity(0.5), // estimated fee (send page)
156 - decorationColor: Palette.moderateLavender // template dotted border (send page)
157 - ),
158 - display3: TextStyle(
159 - color: Palette.darkBlueCraiola, // template new text (send page)
160 - decorationColor: Palette.blueAlice // template background color (send page)
161 - ),
162 - display4: TextStyle(
163 - color: Palette.darkBlueCraiola, // template title (send page)
164 - decorationColor: Palette.niagara // receive amount text (exchange page)
165 - ),
166 - subtitle: TextStyle(
167 - color: Palette.blueCraiola, // first gradient color top panel (exchange page)
168 - decorationColor: Palette.blueGreyCraiola // second gradient color top panel (exchange page)
169 - ),
170 - body1: TextStyle(
171 - color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page)
172 - decorationColor: Palette.blueGreyCraiola.withOpacity(0.7), // second gradient color bottom panel (exchange page)
173 - backgroundColor: Palette.protectiveBlue // alert right button text
174 - ),
175 - body2: TextStyle(
176 - color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page)
177 - decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page)
178 - backgroundColor: Palette.brightOrange // alert left button text
179 - )
180 - ),
181 - focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
182 - accentTextTheme: TextTheme(
183 - title: TextStyle(
184 - color: Colors.white, // picker background
185 - backgroundColor: Palette.periwinkleCraiola, // picker divider
186 - decorationColor: Colors.white // dialog background
187 - ),
188 - caption: TextStyle(
189 - color: Palette.blueAlice, // container (confirm exchange)
190 - backgroundColor: Palette.blueAlice, // button background (confirm exchange)
191 - decorationColor: Palette.darkBlueCraiola, // text color (information page)
192 - ),
193 - subtitle: TextStyle(
194 - color: Palette.darkBlueCraiola, // QR code (exchange trade page)
195 - backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page)
196 - decorationColor: Palette.protectiveBlue // crete new wallet button background (wallet list page)
197 - ),
198 - headline: TextStyle(
199 - color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
200 - backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
201 - decorationColor: Colors.white // restore wallet button text color (wallet list page)
202 - ),
203 - subhead: TextStyle(
204 - color: Palette.darkGray, // titles color (filter widget)
205 - backgroundColor: Palette.periwinkle, // divider color (filter widget)
206 - decorationColor: Colors.white // checkbox background (filter widget)
207 - ),
208 - overline: TextStyle(
209 - color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
210 - decorationColor: Colors.white, // menu subname
211 - ),
212 - display1: TextStyle(
213 - color: Palette.blueCraiola, // first gradient color (menu header)
214 - decorationColor: Palette.blueGreyCraiola, // second gradient color(menu header)
215 - backgroundColor: PaletteDark.darkNightBlue // active dot color
216 - ),
217 - display2: TextStyle(
218 - color: Palette.shadowWhite, // action button color (address text field)
219 - decorationColor: Palette.darkGray, // hint text (seed widget)
220 - backgroundColor: Palette.darkBlueCraiola.withOpacity(0.67) // text on balance page
221 - ),
222 - display3: TextStyle(
223 - color: Palette.darkGray, // hint text (new wallet page)
224 - decorationColor: Palette.periwinkleCraiola, // underline (new wallet page)
225 - backgroundColor: Palette.darkBlueCraiola // menu, icons, balance (dashboard page)
226 - ),
227 - display4: TextStyle(
228 - color: Palette.darkGray, // switch background (settings page)
229 - decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page)
230 - ),
231 - body1: TextStyle(
232 - color: Palette.darkGray, // indicators (PIN code)
233 - decorationColor: Palette.darkGray, // switch (PIN code)
234 - backgroundColor: Colors.white // alert right button
235 - ),
236 - body2: TextStyle(
237 - color: Palette.protectiveBlue, // primary buttons
238 - decorationColor: Colors.white, // alert left button,
239 - backgroundColor: Palette.dullGray // keyboard bar color
240 - ),
241 - ),
242 - cardColor: Palette.protectiveBlue // bottom button (action list)
243 - );
244 -
245 - static final ThemeData brightTheme = ThemeData(
246 - fontFamily: 'Lato',
247 - brightness: Brightness.light,
248 - backgroundColor: Colors.white,
249 - accentColor: Palette.blueCraiola, // first gradient color
250 - scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color
251 - primaryColor: Palette.redHat, // third gradient color
252 - buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page
253 - indicatorColor: Colors.white.withOpacity(0.5), // page indicator
254 - hoverColor: Colors.white, // amount hint text (receive page)
255 - dividerColor: Palette.paleBlue,
256 - hintColor: Palette.gray,
257 - textTheme: TextTheme(
258 - title: TextStyle(
259 - color: Colors.white, // sync_indicator text
260 - backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator
261 - decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator
262 - ),
263 - caption: TextStyle(
264 - color: Palette.shineOrange, // not synced light
265 - decorationColor: Colors.white, // filter icon
266 - ),
267 - overline: TextStyle(
268 - color: Colors.white.withOpacity(0.2), // filter button
269 - backgroundColor: Colors.white.withOpacity(0.5), // date section row
270 - decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows)
271 - ),
272 - subhead: TextStyle(
273 - color: Colors.white.withOpacity(0.2), // address button border
274 - decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget)
275 - ),
276 - headline: TextStyle(
277 - color: Colors.white, // qr code
278 - decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page)
279 - ),
280 - display1: TextStyle(
281 - color: PaletteDark.lightBlueGrey, // icons color (receive page)
282 - decorationColor: Palette.lavender, // icons background (receive page)
283 - ),
284 - display2: TextStyle(
285 - color: Palette.darkBlueCraiola, // text color of tiles (receive page)
286 - decorationColor: Colors.white // background of tiles (receive page)
287 - ),
288 - display3: TextStyle(
289 - color: Colors.white, // text color of current tile (receive page),
290 - //decorationColor: Palette.blueCraiola // background of current tile (receive page)
291 - decorationColor: Palette.moderateSlateBlue // background of current tile (receive page)
292 - ),
293 - display4: TextStyle(
294 - color: Palette.violetBlue, // text color of tiles (account list)
295 - decorationColor: Colors.white // background of tiles (account list)
296 - ),
297 - subtitle: TextStyle(
298 - color: Palette.moderateSlateBlue, // text color of current tile (account list)
299 - decorationColor: Colors.white // background of current tile (account list)
300 - ),
301 - body1: TextStyle(
302 - color: Palette.moderatePurpleBlue, // scrollbar thumb
303 - decorationColor: Palette.periwinkleCraiola // scrollbar background
304 - ),
305 - body2: TextStyle(
306 - color: Palette.moderateLavender, // menu header
307 - decorationColor: Colors.white, // menu background
308 - )
309 - ),
310 - primaryTextTheme: TextTheme(
311 - title: TextStyle(
312 - color: Palette.darkBlueCraiola, // title color
313 - backgroundColor: Palette.wildPeriwinkle // textfield underline
314 - ),
315 - caption: TextStyle(
316 - color: PaletteDark.pigeonBlue, // secondary text
317 - decorationColor: Palette.wildLavender // menu divider
318 - ),
319 - overline: TextStyle(
320 - color: Palette.darkGray, // transaction/trade details titles
321 - decorationColor: Colors.white.withOpacity(0.5), // placeholder
322 - ),
323 - subhead: TextStyle(
324 - color: Palette.blueCraiola, // first gradient color (send page)
325 - decorationColor: Palette.pinkFlamingo // second gradient color (send page)
326 - ),
327 - headline: TextStyle(
328 - color: Colors.white.withOpacity(0.5), // text field border color (send page)
329 - decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page)
330 - ),
331 - display1: TextStyle(
332 - color: Colors.white.withOpacity(0.2), // text field button color (send page)
333 - decorationColor: Colors.white // text field button icon color (send page)
334 - ),
335 - display2: TextStyle(
336 - color: Colors.white.withOpacity(0.5), // estimated fee (send page)
337 - decorationColor: Palette.shadowWhite // template dotted border (send page)
338 - ),
339 - display3: TextStyle(
340 - color: Palette.darkBlueCraiola, // template new text (send page)
341 - decorationColor: Palette.shadowWhite // template background color (send page)
342 - ),
343 - display4: TextStyle(
344 - color: Palette.darkBlueCraiola, // template title (send page)
345 - decorationColor: Palette.niagara // receive amount text (exchange page)
346 - ),
347 - subtitle: TextStyle(
348 - color: Palette.blueCraiola, // first gradient color top panel (exchange page)
349 - decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page)
350 - ),
351 - body1: TextStyle(
352 - color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page)
353 - decorationColor: Palette.pinkFlamingo.withOpacity(0.7), // second gradient color bottom panel (exchange page)
354 - backgroundColor: Colors.white // alert right button text
355 - ),
356 - body2: TextStyle(
357 - color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page)
358 - decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page)
359 - backgroundColor: Colors.white // alert left button text
360 - )
361 - ),
362 - focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page)
363 - accentTextTheme: TextTheme(
364 - title: TextStyle(
365 - color: Colors.white, // picker background
366 - backgroundColor: Palette.periwinkleCraiola, // picker divider
367 - decorationColor: Colors.white // dialog background
368 - ),
369 - caption: TextStyle(
370 - color: Palette.moderateLavender, // container (confirm exchange)
371 - backgroundColor: Palette.moderateLavender, // button background (confirm exchange)
372 - decorationColor: Palette.darkBlueCraiola, // text color (information page)
373 - ),
374 - subtitle: TextStyle(
375 - color: Palette.darkBlueCraiola, // QR code (exchange trade page)
376 - backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page)
377 - //decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page)
378 - decorationColor: Palette.moderateSlateBlue // crete new wallet button background (wallet list page)
379 - ),
380 - headline: TextStyle(
381 - color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page)
382 - backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page)
383 - decorationColor: Colors.white // restore wallet button text color (wallet list page)
384 - ),
385 - subhead: TextStyle(
386 - color: Palette.darkGray, // titles color (filter widget)
387 - backgroundColor: Palette.periwinkle, // divider color (filter widget)
388 - decorationColor: Colors.white // checkbox background (filter widget)
389 - ),
390 - overline: TextStyle(
391 - color: Palette.wildPeriwinkle, // checkbox bounds (filter widget)
392 - decorationColor: Colors.white, // menu subname
393 - ),
394 - display1: TextStyle(
395 - color: Palette.blueCraiola, // first gradient color (menu header)
396 - decorationColor: Palette.pinkFlamingo, // second gradient color(menu header)
397 - backgroundColor: Colors.white // active dot color
398 - ),
399 - display2: TextStyle(
400 - color: Palette.shadowWhite, // action button color (address text field)
401 - decorationColor: Palette.darkGray, // hint text (seed widget)
402 - backgroundColor: Colors.white.withOpacity(0.5) // text on balance page
403 - ),
404 - display3: TextStyle(
405 - color: Palette.darkGray, // hint text (new wallet page)
406 - decorationColor: Palette.periwinkleCraiola, // underline (new wallet page)
407 - backgroundColor: Colors.white // menu, icons, balance (dashboard page)
408 - ),
409 - display4: TextStyle(
410 - color: Palette.darkGray, // switch background (settings page)
411 - decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page)
412 - ),
413 - body1: TextStyle(
414 - color: Palette.darkGray, // indicators (PIN code)
415 - decorationColor: Palette.darkGray, // switch (PIN code)
416 - backgroundColor: Palette.moderateSlateBlue // alert right button
417 - ),
418 - body2: TextStyle(
419 - color: Palette.moderateSlateBlue, // primary buttons
420 - decorationColor: Palette.brightOrange, // alert left button,
421 - backgroundColor: Palette.dullGray // keyboard bar color
422 - ),
423 - ),
424 - cardColor: Palette.moderateSlateBlue // bottom button (action list)
425 - );
426 -
427 - static final ThemeData darkTheme = ThemeData(
428 - fontFamily: 'Lato',
429 - brightness: Brightness.dark,
430 - backgroundColor: PaletteDark.backgroundColor,
431 - accentColor: PaletteDark.backgroundColor, // first gradient color
432 - scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color
433 - primaryColor: PaletteDark.backgroundColor, // third gradient color
434 - buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page
435 - indicatorColor: PaletteDark.cyanBlue, // page indicator
436 - hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page)
437 - dividerColor: PaletteDark.dividerColor,
438 - hintColor: PaletteDark.pigeonBlue, // menu
439 - textTheme: TextTheme(
440 - title: TextStyle(
441 - color: PaletteDark.wildBlue, // sync_indicator text
442 - backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator
443 - decorationColor: PaletteDark.oceanBlue // not synced sync_indicator
444 - ),
445 - caption: TextStyle(
446 - color: PaletteDark.orangeYellow, // not synced light
447 - decorationColor: PaletteDark.wildBlue, // filter icon
448 - ),
449 - overline: TextStyle(
450 - color: PaletteDark.oceanBlue, // filter button
451 - backgroundColor: PaletteDark.darkCyanBlue, // date section row
452 - decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows)
453 - ),
454 - subhead: TextStyle(
455 - color: PaletteDark.nightBlue, // address button border
456 - decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget)
457 - ),
458 - headline: TextStyle(
459 - color: PaletteDark.lightBlueGrey, // qr code
460 - decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page)
461 - ),
462 - display1: TextStyle(
463 - color: Colors.white, // icons color (receive page)
464 - decorationColor: PaletteDark.distantNightBlue, // icons background (receive page)
465 - ),
466 - display2: TextStyle(
467 - color: Colors.white, // text color of tiles (receive page)
468 - decorationColor: PaletteDark.nightBlue // background of tiles (receive page)
469 - ),
470 - display3: TextStyle(
471 - color: Palette.blueCraiola, // text color of current tile (receive page)
472 - decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page)
473 - ),
474 - display4: TextStyle(
475 - color: Colors.white, // text color of tiles (account list)
476 - decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list)
477 - ),
478 - subtitle: TextStyle(
479 - color: Palette.blueCraiola, // text color of current tile (account list)
480 - decorationColor: PaletteDark.darkNightBlue // background of current tile (account list)
481 - ),
482 - body1: TextStyle(
483 - color: PaletteDark.wildBlueGrey, // scrollbar thumb
484 - decorationColor: PaletteDark.violetBlue // scrollbar background
485 - ),
486 - body2: TextStyle(
487 - color: PaletteDark.deepPurpleBlue, // menu header
488 - decorationColor: PaletteDark.deepPurpleBlue, // menu background
489 - )
490 - ),
491 - primaryTextTheme: TextTheme(
492 - title: TextStyle(
493 - color: Colors.white, // title color
494 - backgroundColor: PaletteDark.darkOceanBlue // textfield underline
495 - ),
496 - caption: TextStyle(
497 - color: PaletteDark.darkCyanBlue, // secondary text
498 - decorationColor: PaletteDark.darkOceanBlue // menu divider
499 - ),
500 - overline: TextStyle(
501 - color: PaletteDark.lightBlueGrey, // transaction/trade details titles
502 - decorationColor: Colors.grey, // placeholder
503 - ),
504 - subhead: TextStyle(
505 - color: PaletteDark.darkNightBlue, // first gradient color (send page)
506 - decorationColor: PaletteDark.darkNightBlue // second gradient color (send page)
507 - ),
508 - headline: TextStyle(
509 - color: PaletteDark.lightVioletBlue, // text field border color (send page)
510 - decorationColor: PaletteDark.darkCyanBlue, // text field hint color (send page)
511 - ),
512 - display1: TextStyle(
513 - color: PaletteDark.buttonNightBlue, // text field button color (send page)
514 - decorationColor: PaletteDark.gray // text field button icon color (send page)
515 - ),
516 - display2: TextStyle(
517 - color: Colors.white, // estimated fee (send page)
518 - decorationColor: PaletteDark.darkCyanBlue // template dotted border (send page)
519 - ),
520 - display3: TextStyle(
521 - color: PaletteDark.darkCyanBlue, // template new text (send page)
522 - decorationColor: PaletteDark.darkVioletBlue // template background color (send page)
523 - ),
524 - display4: TextStyle(
525 - color: PaletteDark.cyanBlue, // template title (send page)
526 - decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page)
527 - ),
528 - subtitle: TextStyle(
529 - color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page)
530 - decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page)
531 - ),
532 - body1: TextStyle(
533 - color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page)
534 - decorationColor: PaletteDark.darkNightBlue, // second gradient color bottom panel (exchange page)
535 - backgroundColor: Colors.white // alert right button text
536 - ),
537 - body2: TextStyle(
538 - color: PaletteDark.blueGrey, // text field border on top panel (exchange page)
539 - decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page)
540 - backgroundColor: Colors.white // alert left button text
541 - )
542 - ),
543 - focusColor: PaletteDark.moderateBlue, // text field button (exchange page)
544 - accentTextTheme: TextTheme(
545 - title: TextStyle(
546 - color: PaletteDark.nightBlue, // picker background
547 - backgroundColor: PaletteDark.dividerColor, // picker divider
548 - decorationColor: PaletteDark.darkNightBlue // dialog background
549 - ),
550 - caption: TextStyle(
551 - color: PaletteDark.nightBlue, // container (confirm exchange)
552 - backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange)
553 - decorationColor: Palette.darkLavender, // text color (information page)
554 - ),
555 - subtitle: TextStyle(
556 - //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page)
557 - color: Colors.white, // QR code (exchange trade page)
558 - backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page)
559 - decorationColor: Colors.white // crete new wallet button background (wallet list page)
560 - ),
561 - headline: TextStyle(
562 - color: PaletteDark.distantBlue, // first gradient color of wallet action buttons (wallet list page)
563 - backgroundColor: PaletteDark.distantNightBlue, // second gradient color of wallet action buttons (wallet list page)
564 - decorationColor: Palette.darkBlueCraiola // restore wallet button text color (wallet list page)
565 - ),
566 - subhead: TextStyle(
567 - color: Colors.white, // titles color (filter widget)
568 - backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget)
569 - decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget)
570 - ),
571 - overline: TextStyle(
572 - color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget)
573 - decorationColor: PaletteDark.darkCyanBlue, // menu subname
574 - ),
575 - display1: TextStyle(
576 - color: PaletteDark.deepPurpleBlue, // first gradient color (menu header)
577 - decorationColor: PaletteDark.deepPurpleBlue, // second gradient color(menu header)
578 - backgroundColor: Colors.white // active dot color
579 - ),
580 - display2: TextStyle(
581 - color: PaletteDark.nightBlue, // action button color (address text field)
582 - decorationColor: PaletteDark.darkCyanBlue, // hint text (seed widget)
583 - backgroundColor: PaletteDark.cyanBlue // text on balance page
584 - ),
585 - display3: TextStyle(
586 - color: PaletteDark.cyanBlue, // hint text (new wallet page)
587 - decorationColor: PaletteDark.darkGrey, // underline (new wallet page)
588 - backgroundColor: Colors.white // menu, icons, balance (dashboard page)
589 - ),
590 - display4: TextStyle(
591 - color: PaletteDark.deepVioletBlue, // switch background (settings page)
592 - decorationColor: PaletteDark.lightBlueGrey // hint text (exchange page)
593 - ),
594 - body1: TextStyle(
595 - color: PaletteDark.indicatorVioletBlue, // indicators (PIN code)
596 - decorationColor: PaletteDark.lightPurpleBlue, // switch (PIN code)
597 - backgroundColor: Palette.blueCraiola // alert right button
598 - ),
599 - body2: TextStyle(
600 - color: Palette.blueCraiola, // primary buttons
601 - decorationColor: Palette.alizarinRed, // alert left button
602 - backgroundColor: PaletteDark.granite // keyboard bar color
603 - ),
604 - ),
605 - cardColor: PaletteDark.darkNightBlue // bottom button (action list)
606 - );
607 -}
\ No newline at end of file
lib/view_model/settings/settings_view_model.dart
+5 -4
@@ -1,5 +1,6 @@
1 +import 'package:cake_wallet/src/themes/theme_base.dart';
2 +import 'package:cake_wallet/src/themes/theme_list.dart';
3 import 'package:cake_wallet/src/screens/pin_code/pin_code_widget.dart';
2 -import 'package:cake_wallet/themes.dart';
4 import 'package:flutter/cupertino.dart';
5 import 'package:mobx/mobx.dart';
6 import 'package:package_info/package_info.dart';
@@ -109,9 +110,9 @@ abstract class SettingsViewModelBase with Store {
110 }),
111 PickerListItem(
112 title: S.current.color_theme,
112 - items: Themes.all,
113 + items: ThemeList.all,
114 selectedItem: () => theme,
114 - onItemSelected: (Themes theme) =>
115 + onItemSelected: (ThemeBase theme) =>
116 _settingsStore.currentTheme = theme)
117 ],
118 [
@@ -189,7 +190,7 @@ abstract class SettingsViewModelBase with Store {
190 _settingsStore.allowBiometricalAuthentication;
191
192 @computed
192 - Themes get theme => _settingsStore.currentTheme;
193 + ThemeBase get theme => _settingsStore.currentTheme;
194
195 final Map<String, String> itemHeaders;
196 List<List<SettingsListItem>> sections;