diff --git a/lib/main.dart b/lib/main.dart index b72d10e61..fae053798 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/src/themes/theme_base.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:hive/hive.dart'; @@ -131,10 +132,10 @@ class App extends StatelessWidget { return Observer(builder: (BuildContext context) { final currentTheme = settingsStore.currentTheme; - final statusBarBrightness = currentTheme.isDarkTheme + final statusBarBrightness = currentTheme.type == ThemeType.dark ? Brightness.dark : Brightness.light; - final statusBarIconBrightness = currentTheme.isDarkTheme + final statusBarIconBrightness = currentTheme.type == ThemeType.dark ? Brightness.light : Brightness.dark; SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( diff --git a/lib/src/screens/base_page.dart b/lib/src/screens/base_page.dart index 99d125ec8..7af4b1a50 100644 --- a/lib/src/screens/base_page.dart +++ b/lib/src/screens/base_page.dart @@ -1,4 +1,4 @@ -import 'package:cake_wallet/themes.dart'; +import 'package:cake_wallet/src/themes/theme_base.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/palette.dart'; @@ -38,7 +38,7 @@ abstract class BasePage extends StatelessWidget { Widget Function(BuildContext, Widget) get rootWrapper => null; - Themes get currentTheme => getIt.get().currentTheme; + ThemeBase get currentTheme => getIt.get().currentTheme; void onOpenEndDrawer() => _scaffoldKey.currentState.openEndDrawer(); @@ -52,8 +52,8 @@ abstract class BasePage extends StatelessWidget { final _backButton = Icon(Icons.arrow_back_ios, color: titleColor ?? Theme.of(context).primaryTextTheme.title.color, size: 16,); - final _closeButton = - currentTheme.isDarkTheme ? closeButtonImageDarkTheme : closeButtonImage; + final _closeButton = currentTheme.type == ThemeType.dark + ? closeButtonImageDarkTheme : closeButtonImage; return SizedBox( height: 37, @@ -89,8 +89,8 @@ abstract class BasePage extends StatelessWidget { Widget floatingActionButton(BuildContext context) => null; ObstructingPreferredSizeWidget appBar(BuildContext context) { - final appBarColor = - currentTheme.isDarkTheme ? backgroundDarkColor : backgroundLightColor; + final appBarColor = currentTheme.type == ThemeType.dark + ? backgroundDarkColor : backgroundLightColor; switch (appBarStyle) { case AppBarStyle.regular: @@ -132,8 +132,8 @@ abstract class BasePage extends StatelessWidget { @override Widget build(BuildContext context) { - final _backgroundColor = - currentTheme.isDarkTheme ? backgroundDarkColor : backgroundLightColor; + final _backgroundColor = currentTheme.type == ThemeType.dark + ? backgroundDarkColor : backgroundLightColor; final root = Scaffold( key: _scaffoldKey, diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 86ad09d86..638fdf028 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/routes.dart'; +import 'package:cake_wallet/src/themes/theme_base.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:mobx/mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -29,7 +30,8 @@ class NewWalletPage extends BasePage { @override Widget body(BuildContext context) => WalletNameForm(_walletNewVM, - currentTheme.isDarkTheme ? walletNameImage : walletNameLightImage); + currentTheme.type == ThemeType.dark + ? walletNameImage : walletNameLightImage); } class WalletNameForm extends StatefulWidget { diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index 76ea98b56..49ed74a9a 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/entities/wallet_type.dart'; +import 'package:cake_wallet/src/themes/theme_base.dart'; import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'package:cake_wallet/generated/i18n.dart'; @@ -26,7 +27,7 @@ class NewWalletTypePage extends BasePage { Widget body(BuildContext context) => WalletTypeForm( onTypeSelected: onTypeSelected, - walletImage: currentTheme.isDarkTheme + walletImage: currentTheme.type == ThemeType.dark ? walletTypeImage : walletTypeLightImage); } diff --git a/lib/src/screens/seed/pre_seed_page.dart b/lib/src/screens/seed/pre_seed_page.dart index 58aed36d9..b04206e8b 100644 --- a/lib/src/screens/seed/pre_seed_page.dart +++ b/lib/src/screens/seed/pre_seed_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/routes.dart'; +import 'package:cake_wallet/src/themes/theme_base.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/generated/i18n.dart'; @@ -17,7 +18,7 @@ class PreSeedPage extends BasePage { @override Widget body(BuildContext context) { - final image = currentTheme.isDarkTheme ? imageDark : imageLight; + final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight; return WillPopScope( onWillPop: () async => false, diff --git a/lib/src/screens/seed/wallet_seed_page.dart b/lib/src/screens/seed/wallet_seed_page.dart index fff8cca35..f783442ae 100644 --- a/lib/src/screens/seed/wallet_seed_page.dart +++ b/lib/src/screens/seed/wallet_seed_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/src/themes/theme_base.dart'; import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart'; import 'package:cake_wallet/utils/show_bar.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; @@ -81,7 +82,7 @@ class WalletSeedPage extends BasePage { @override Widget body(BuildContext context) { - final image = currentTheme.isDarkTheme ? imageDark : imageLight; + final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight; return WillPopScope(onWillPop: () async => false, child: Container( padding: EdgeInsets.all(24), diff --git a/lib/src/screens/seed_language/seed_language_page.dart b/lib/src/screens/seed_language/seed_language_page.dart index 4c9ef6b43..5cc614e00 100644 --- a/lib/src/screens/seed_language/seed_language_page.dart +++ b/lib/src/screens/seed_language/seed_language_page.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/src/themes/theme_base.dart'; import 'package:cake_wallet/src/widgets/seed_language_selector.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter/material.dart'; @@ -24,8 +25,8 @@ class SeedLanguage extends BasePage { Widget body(BuildContext context) => SeedLanguageForm( onConfirm: onConfirm, - walletImage: - currentTheme.isDarkTheme ? walletNameImage : walletNameLightImage); + walletImage: currentTheme.type == ThemeType.dark + ? walletNameImage : walletNameLightImage); } class SeedLanguageForm extends StatefulWidget { diff --git a/lib/src/screens/welcome/welcome_page.dart b/lib/src/screens/welcome/welcome_page.dart index d6bcf1c2f..9a12d5b69 100644 --- a/lib/src/screens/welcome/welcome_page.dart +++ b/lib/src/screens/welcome/welcome_page.dart @@ -1,9 +1,9 @@ +import 'package:cake_wallet/src/themes/theme_base.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/generated/i18n.dart'; -import 'package:cake_wallet/themes.dart'; class WelcomePage extends BasePage { static const aspectRatioImage = 1.25; @@ -22,8 +22,8 @@ class WelcomePage extends BasePage { @override Widget body(BuildContext context) { - final welcomeImage = - currentTheme.isDarkTheme ? welcomeImageDark : welcomeImageLight; + final welcomeImage = currentTheme.type == ThemeType.dark + ? welcomeImageDark : welcomeImageLight; final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, diff --git a/lib/src/themes/bright_theme.dart b/lib/src/themes/bright_theme.dart new file mode 100644 index 000000000..97ffb0b72 --- /dev/null +++ b/lib/src/themes/bright_theme.dart @@ -0,0 +1,197 @@ +import 'package:cake_wallet/src/themes/theme_base.dart'; +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:flutter/material.dart'; + +class BrightTheme extends ThemeBase { + BrightTheme({@required int raw}) : super(raw: raw); + + @override + String get title => S.current.bright_theme; + + @override + ThemeType get type => ThemeType.bright; + + @override + ThemeData get themeData => ThemeData( + fontFamily: 'Lato', + brightness: Brightness.light, + backgroundColor: Colors.white, + accentColor: Palette.blueCraiola, // first gradient color + scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color + primaryColor: Palette.redHat, // third gradient color + buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page + indicatorColor: Colors.white.withOpacity(0.5), // page indicator + hoverColor: Colors.white, // amount hint text (receive page) + dividerColor: Palette.paleBlue, + hintColor: Palette.gray, + textTheme: TextTheme( + title: TextStyle( + color: Colors.white, // sync_indicator text + backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator + decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator + ), + caption: TextStyle( + color: Palette.shineOrange, // not synced light + decorationColor: Colors.white, // filter icon + ), + overline: TextStyle( + color: Colors.white.withOpacity(0.2), // filter button + backgroundColor: Colors.white.withOpacity(0.5), // date section row + decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows) + ), + subhead: TextStyle( + color: Colors.white.withOpacity(0.2), // address button border + decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget) + ), + headline: TextStyle( + color: Colors.white, // qr code + decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page) + ), + display1: TextStyle( + color: PaletteDark.lightBlueGrey, // icons color (receive page) + decorationColor: Palette.lavender, // icons background (receive page) + ), + display2: TextStyle( + color: Palette.darkBlueCraiola, // text color of tiles (receive page) + decorationColor: Colors.white // background of tiles (receive page) + ), + display3: TextStyle( + color: Colors.white, // text color of current tile (receive page), + //decorationColor: Palette.blueCraiola // background of current tile (receive page) + decorationColor: Palette.moderateSlateBlue // background of current tile (receive page) + ), + display4: TextStyle( + color: Palette.violetBlue, // text color of tiles (account list) + decorationColor: Colors.white // background of tiles (account list) + ), + subtitle: TextStyle( + color: Palette.moderateSlateBlue, // text color of current tile (account list) + decorationColor: Colors.white // background of current tile (account list) + ), + body1: TextStyle( + color: Palette.moderatePurpleBlue, // scrollbar thumb + decorationColor: Palette.periwinkleCraiola // scrollbar background + ), + body2: TextStyle( + color: Palette.moderateLavender, // menu header + decorationColor: Colors.white, // menu background + ) + ), + primaryTextTheme: TextTheme( + title: TextStyle( + color: Palette.darkBlueCraiola, // title color + backgroundColor: Palette.wildPeriwinkle // textfield underline + ), + caption: TextStyle( + color: PaletteDark.pigeonBlue, // secondary text + decorationColor: Palette.wildLavender // menu divider + ), + overline: TextStyle( + color: Palette.darkGray, // transaction/trade details titles + decorationColor: Colors.white.withOpacity(0.5), // placeholder + ), + subhead: TextStyle( + color: Palette.blueCraiola, // first gradient color (send page) + decorationColor: Palette.pinkFlamingo // second gradient color (send page) + ), + headline: TextStyle( + color: Colors.white.withOpacity(0.5), // text field border color (send page) + decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page) + ), + display1: TextStyle( + color: Colors.white.withOpacity(0.2), // text field button color (send page) + decorationColor: Colors.white // text field button icon color (send page) + ), + display2: TextStyle( + color: Colors.white.withOpacity(0.5), // estimated fee (send page) + decorationColor: Palette.shadowWhite // template dotted border (send page) + ), + display3: TextStyle( + color: Palette.darkBlueCraiola, // template new text (send page) + decorationColor: Palette.shadowWhite // template background color (send page) + ), + display4: TextStyle( + color: Palette.darkBlueCraiola, // template title (send page) + decorationColor: Palette.niagara // receive amount text (exchange page) + ), + subtitle: TextStyle( + color: Palette.blueCraiola, // first gradient color top panel (exchange page) + decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page) + ), + body1: TextStyle( + color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page) + decorationColor: Palette.pinkFlamingo.withOpacity(0.7), // second gradient color bottom panel (exchange page) + backgroundColor: Palette.moderateSlateBlue // alert right button text + ), + body2: TextStyle( + color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page) + decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page) + backgroundColor: Palette.brightOrange // alert left button text + ) + ), + focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page) + accentTextTheme: TextTheme( + title: TextStyle( + color: Colors.white, // picker background + backgroundColor: Palette.periwinkleCraiola, // picker divider + decorationColor: Colors.white // dialog background + ), + caption: TextStyle( + color: Palette.moderateLavender, // container (confirm exchange) + backgroundColor: Palette.moderateLavender, // button background (confirm exchange) + decorationColor: Palette.darkBlueCraiola, // text color (information page) + ), + subtitle: TextStyle( + color: Palette.darkBlueCraiola, // QR code (exchange trade page) + backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) + //decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page) + decorationColor: Palette.moderateSlateBlue // crete new wallet button background (wallet list page) + ), + headline: TextStyle( + color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page) + backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page) + decorationColor: Colors.white // restore wallet button text color (wallet list page) + ), + subhead: TextStyle( + color: Palette.darkGray, // titles color (filter widget) + backgroundColor: Palette.periwinkle, // divider color (filter widget) + decorationColor: Colors.white // checkbox background (filter widget) + ), + overline: TextStyle( + color: Palette.wildPeriwinkle, // checkbox bounds (filter widget) + decorationColor: Colors.white, // menu subname + ), + display1: TextStyle( + color: Palette.blueCraiola, // first gradient color (menu header) + decorationColor: Palette.pinkFlamingo, // second gradient color(menu header) + backgroundColor: Colors.white // active dot color + ), + display2: TextStyle( + color: Palette.shadowWhite, // action button color (address text field) + decorationColor: Palette.darkGray, // hint text (seed widget) + backgroundColor: Colors.white.withOpacity(0.5) // text on balance page + ), + display3: TextStyle( + color: Palette.darkGray, // hint text (new wallet page) + decorationColor: Palette.periwinkleCraiola, // underline (new wallet page) + backgroundColor: Colors.white // menu, icons, balance (dashboard page) + ), + display4: TextStyle( + color: Palette.darkGray, // switch background (settings page) + decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page) + ), + body1: TextStyle( + color: Palette.darkGray, // indicators (PIN code) + decorationColor: Palette.darkGray, // switch (PIN code) + backgroundColor: Colors.white // alert right button + ), + body2: TextStyle( + color: Palette.moderateSlateBlue, // primary buttons + decorationColor: Colors.white, // alert left button, + backgroundColor: Palette.dullGray // keyboard bar color + ), + ), + cardColor: Palette.moderateSlateBlue // bottom button (action list) + ); +} \ No newline at end of file diff --git a/lib/src/themes/dark_theme.dart b/lib/src/themes/dark_theme.dart new file mode 100644 index 000000000..409dd699b --- /dev/null +++ b/lib/src/themes/dark_theme.dart @@ -0,0 +1,196 @@ +import 'package:cake_wallet/src/themes/theme_base.dart'; +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:flutter/material.dart'; + +class DarkTheme extends ThemeBase { + DarkTheme({@required int raw}) : super(raw: raw); + + @override + String get title => S.current.dark_theme; + + @override + ThemeType get type => ThemeType.dark; + + @override + ThemeData get themeData => ThemeData( + fontFamily: 'Lato', + brightness: Brightness.dark, + backgroundColor: PaletteDark.backgroundColor, + accentColor: PaletteDark.backgroundColor, // first gradient color + scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color + primaryColor: PaletteDark.backgroundColor, // third gradient color + buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page + indicatorColor: PaletteDark.cyanBlue, // page indicator + hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page) + dividerColor: PaletteDark.dividerColor, + hintColor: PaletteDark.pigeonBlue, // menu + textTheme: TextTheme( + title: TextStyle( + color: PaletteDark.wildBlue, // sync_indicator text + backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator + decorationColor: PaletteDark.oceanBlue // not synced sync_indicator + ), + caption: TextStyle( + color: PaletteDark.orangeYellow, // not synced light + decorationColor: PaletteDark.wildBlue, // filter icon + ), + overline: TextStyle( + color: PaletteDark.oceanBlue, // filter button + backgroundColor: PaletteDark.darkCyanBlue, // date section row + decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows) + ), + subhead: TextStyle( + color: PaletteDark.nightBlue, // address button border + decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget) + ), + headline: TextStyle( + color: PaletteDark.lightBlueGrey, // qr code + decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page) + ), + display1: TextStyle( + color: Colors.white, // icons color (receive page) + decorationColor: PaletteDark.distantNightBlue, // icons background (receive page) + ), + display2: TextStyle( + color: Colors.white, // text color of tiles (receive page) + decorationColor: PaletteDark.nightBlue // background of tiles (receive page) + ), + display3: TextStyle( + color: Palette.blueCraiola, // text color of current tile (receive page) + decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page) + ), + display4: TextStyle( + color: Colors.white, // text color of tiles (account list) + decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list) + ), + subtitle: TextStyle( + color: Palette.blueCraiola, // text color of current tile (account list) + decorationColor: PaletteDark.darkNightBlue // background of current tile (account list) + ), + body1: TextStyle( + color: PaletteDark.wildBlueGrey, // scrollbar thumb + decorationColor: PaletteDark.violetBlue // scrollbar background + ), + body2: TextStyle( + color: PaletteDark.deepPurpleBlue, // menu header + decorationColor: PaletteDark.deepPurpleBlue, // menu background + ) + ), + primaryTextTheme: TextTheme( + title: TextStyle( + color: Colors.white, // title color + backgroundColor: PaletteDark.darkOceanBlue // textfield underline + ), + caption: TextStyle( + color: PaletteDark.darkCyanBlue, // secondary text + decorationColor: PaletteDark.darkOceanBlue // menu divider + ), + overline: TextStyle( + color: PaletteDark.lightBlueGrey, // transaction/trade details titles + decorationColor: Colors.grey, // placeholder + ), + subhead: TextStyle( + color: PaletteDark.darkNightBlue, // first gradient color (send page) + decorationColor: PaletteDark.darkNightBlue // second gradient color (send page) + ), + headline: TextStyle( + color: PaletteDark.lightVioletBlue, // text field border color (send page) + decorationColor: PaletteDark.darkCyanBlue, // text field hint color (send page) + ), + display1: TextStyle( + color: PaletteDark.buttonNightBlue, // text field button color (send page) + decorationColor: PaletteDark.gray // text field button icon color (send page) + ), + display2: TextStyle( + color: Colors.white, // estimated fee (send page) + decorationColor: PaletteDark.darkCyanBlue // template dotted border (send page) + ), + display3: TextStyle( + color: PaletteDark.darkCyanBlue, // template new text (send page) + decorationColor: PaletteDark.darkVioletBlue // template background color (send page) + ), + display4: TextStyle( + color: PaletteDark.cyanBlue, // template title (send page) + decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page) + ), + subtitle: TextStyle( + color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page) + decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page) + ), + body1: TextStyle( + color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page) + decorationColor: PaletteDark.darkNightBlue, // second gradient color bottom panel (exchange page) + backgroundColor: Palette.blueCraiola // alert right button text + ), + body2: TextStyle( + color: PaletteDark.blueGrey, // text field border on top panel (exchange page) + decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page) + backgroundColor: Palette.alizarinRed // alert left button text + ) + ), + focusColor: PaletteDark.moderateBlue, // text field button (exchange page) + accentTextTheme: TextTheme( + title: TextStyle( + color: PaletteDark.nightBlue, // picker background + backgroundColor: PaletteDark.dividerColor, // picker divider + decorationColor: PaletteDark.darkNightBlue // dialog background + ), + caption: TextStyle( + color: PaletteDark.nightBlue, // container (confirm exchange) + backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange) + decorationColor: Palette.darkLavender, // text color (information page) + ), + subtitle: TextStyle( + //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page) + color: Colors.white, // QR code (exchange trade page) + backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page) + decorationColor: Colors.white // crete new wallet button background (wallet list page) + ), + headline: TextStyle( + color: PaletteDark.distantBlue, // first gradient color of wallet action buttons (wallet list page) + backgroundColor: PaletteDark.distantNightBlue, // second gradient color of wallet action buttons (wallet list page) + decorationColor: Palette.darkBlueCraiola // restore wallet button text color (wallet list page) + ), + subhead: TextStyle( + color: Colors.white, // titles color (filter widget) + backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget) + decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget) + ), + overline: TextStyle( + color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget) + decorationColor: PaletteDark.darkCyanBlue, // menu subname + ), + display1: TextStyle( + color: PaletteDark.deepPurpleBlue, // first gradient color (menu header) + decorationColor: PaletteDark.deepPurpleBlue, // second gradient color(menu header) + backgroundColor: Colors.white // active dot color + ), + display2: TextStyle( + color: PaletteDark.nightBlue, // action button color (address text field) + decorationColor: PaletteDark.darkCyanBlue, // hint text (seed widget) + backgroundColor: PaletteDark.cyanBlue // text on balance page + ), + display3: TextStyle( + color: PaletteDark.cyanBlue, // hint text (new wallet page) + decorationColor: PaletteDark.darkGrey, // underline (new wallet page) + backgroundColor: Colors.white // menu, icons, balance (dashboard page) + ), + display4: TextStyle( + color: PaletteDark.deepVioletBlue, // switch background (settings page) + decorationColor: PaletteDark.lightBlueGrey // hint text (exchange page) + ), + body1: TextStyle( + color: PaletteDark.indicatorVioletBlue, // indicators (PIN code) + decorationColor: PaletteDark.lightPurpleBlue, // switch (PIN code) + backgroundColor: PaletteDark.darkNightBlue // alert right button + ), + body2: TextStyle( + color: Palette.blueCraiola, // primary buttons + decorationColor: PaletteDark.darkNightBlue, // alert left button + backgroundColor: PaletteDark.granite // keyboard bar color + ), + ), + cardColor: PaletteDark.darkNightBlue // bottom button (action list) + ); +} \ No newline at end of file diff --git a/lib/src/themes/light_theme.dart b/lib/src/themes/light_theme.dart new file mode 100644 index 000000000..ae64d74d8 --- /dev/null +++ b/lib/src/themes/light_theme.dart @@ -0,0 +1,196 @@ +import 'package:cake_wallet/src/themes/theme_base.dart'; +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:flutter/material.dart'; + +class LightTheme extends ThemeBase { + LightTheme({@required int raw}) : super(raw: raw); + + @override + String get title => S.current.light_theme; + + @override + ThemeType get type => ThemeType.light; + + @override + ThemeData get themeData => ThemeData( + fontFamily: 'Lato', + brightness: Brightness.light, + backgroundColor: Colors.white, + accentColor: Colors.white, // first gradient color + scaffoldBackgroundColor: Colors.white, // second gradient color + primaryColor: Colors.white, // third gradient color + buttonColor: Palette.blueAlice, // action buttons on dashboard page + indicatorColor: PaletteDark.darkCyanBlue.withOpacity(0.67), // page indicator + hoverColor: Palette.darkBlueCraiola, // amount hint text (receive page) + dividerColor: Palette.paleBlue, + hintColor: Palette.gray, + textTheme: TextTheme( + title: TextStyle( + color: Palette.darkBlueCraiola, // sync_indicator text + backgroundColor: Palette.blueAlice, // synced sync_indicator + decorationColor: Palette.blueAlice.withOpacity(0.75), // not synced sync_indicator + ), + caption: TextStyle( + color: Palette.shineOrange, // not synced light + decorationColor: PaletteDark.wildBlue, // filter icon + ), + overline: TextStyle( + color: Palette.blueAlice, // filter button + backgroundColor: PaletteDark.darkCyanBlue, // date section row + decorationColor: Palette.blueAlice // icons (transaction and trade rows) + ), + subhead: TextStyle( + color: Palette.blueAlice, // address button border + decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget) + ), + headline: TextStyle( + color: Colors.white, // qr code + decorationColor: Palette.darkBlueCraiola, // bottom border of amount (receive page) + ), + display1: TextStyle( + color: PaletteDark.lightBlueGrey, // icons color (receive page) + decorationColor: Palette.moderateLavender, // icons background (receive page) + ), + display2: TextStyle( + color: Palette.darkBlueCraiola, // text color of tiles (receive page) + decorationColor: Palette.blueAlice // background of tiles (receive page) + ), + display3: TextStyle( + color: Colors.white, // text color of current tile (receive page), + //decorationColor: Palette.blueCraiola // background of current tile (receive page) + decorationColor: Palette.blueCraiola // background of current tile (receive page) + ), + display4: TextStyle( + color: Palette.violetBlue, // text color of tiles (account list) + decorationColor: Colors.white // background of tiles (account list) + ), + subtitle: TextStyle( + color: Palette.protectiveBlue, // text color of current tile (account list) + decorationColor: Colors.white // background of current tile (account list) + ), + body1: TextStyle( + color: Palette.moderatePurpleBlue, // scrollbar thumb + decorationColor: Palette.periwinkleCraiola // scrollbar background + ), + body2: TextStyle( + color: Palette.moderateLavender, // menu header + decorationColor: Colors.white, // menu background + ) + ), + primaryTextTheme: TextTheme( + title: TextStyle( + color: Palette.darkBlueCraiola, // title color + backgroundColor: Palette.wildPeriwinkle // textfield underline + ), + caption: TextStyle( + color: PaletteDark.pigeonBlue, // secondary text + decorationColor: Palette.wildLavender // menu divider + ), + overline: TextStyle( + color: Palette.darkGray, // transaction/trade details titles + decorationColor: PaletteDark.darkCyanBlue, // placeholder + ), + subhead: TextStyle( + color: Palette.blueCraiola, // first gradient color (send page) + decorationColor: Palette.blueGreyCraiola // second gradient color (send page) + ), + headline: TextStyle( + color: Colors.white.withOpacity(0.5), // text field border color (send page) + decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page) + ), + display1: TextStyle( + color: Colors.white.withOpacity(0.2), // text field button color (send page) + decorationColor: Colors.white // text field button icon color (send page) + ), + display2: TextStyle( + color: Colors.white.withOpacity(0.5), // estimated fee (send page) + decorationColor: Palette.moderateLavender // template dotted border (send page) + ), + display3: TextStyle( + color: Palette.darkBlueCraiola, // template new text (send page) + decorationColor: Palette.blueAlice // template background color (send page) + ), + display4: TextStyle( + color: Palette.darkBlueCraiola, // template title (send page) + decorationColor: Palette.niagara // receive amount text (exchange page) + ), + subtitle: TextStyle( + color: Palette.blueCraiola, // first gradient color top panel (exchange page) + decorationColor: Palette.blueGreyCraiola // second gradient color top panel (exchange page) + ), + body1: TextStyle( + color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page) + decorationColor: Palette.blueGreyCraiola.withOpacity(0.7), // second gradient color bottom panel (exchange page) + backgroundColor: Palette.protectiveBlue // alert right button text + ), + body2: TextStyle( + color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page) + decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page) + backgroundColor: Palette.brightOrange // alert left button text + ) + ), + focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page) + accentTextTheme: TextTheme( + title: TextStyle( + color: Colors.white, // picker background + backgroundColor: Palette.periwinkleCraiola, // picker divider + decorationColor: Colors.white // dialog background + ), + caption: TextStyle( + color: Palette.blueAlice, // container (confirm exchange) + backgroundColor: Palette.blueAlice, // button background (confirm exchange) + decorationColor: Palette.darkBlueCraiola, // text color (information page) + ), + subtitle: TextStyle( + color: Palette.darkBlueCraiola, // QR code (exchange trade page) + backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) + decorationColor: Palette.protectiveBlue // crete new wallet button background (wallet list page) + ), + headline: TextStyle( + color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page) + backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page) + decorationColor: Colors.white // restore wallet button text color (wallet list page) + ), + subhead: TextStyle( + color: Palette.darkGray, // titles color (filter widget) + backgroundColor: Palette.periwinkle, // divider color (filter widget) + decorationColor: Colors.white // checkbox background (filter widget) + ), + overline: TextStyle( + color: Palette.wildPeriwinkle, // checkbox bounds (filter widget) + decorationColor: Colors.white, // menu subname + ), + display1: TextStyle( + color: Palette.blueCraiola, // first gradient color (menu header) + decorationColor: Palette.blueGreyCraiola, // second gradient color(menu header) + backgroundColor: PaletteDark.darkNightBlue // active dot color + ), + display2: TextStyle( + color: Palette.shadowWhite, // action button color (address text field) + decorationColor: Palette.darkGray, // hint text (seed widget) + backgroundColor: Palette.darkBlueCraiola.withOpacity(0.67) // text on balance page + ), + display3: TextStyle( + color: Palette.darkGray, // hint text (new wallet page) + decorationColor: Palette.periwinkleCraiola, // underline (new wallet page) + backgroundColor: Palette.darkBlueCraiola // menu, icons, balance (dashboard page) + ), + display4: TextStyle( + color: Palette.darkGray, // switch background (settings page) + decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page) + ), + body1: TextStyle( + color: Palette.darkGray, // indicators (PIN code) + decorationColor: Palette.darkGray, // switch (PIN code) + backgroundColor: Colors.white // alert right button + ), + body2: TextStyle( + color: Palette.protectiveBlue, // primary buttons + decorationColor: Colors.white, // alert left button, + backgroundColor: Palette.dullGray // keyboard bar color + ), + ), + cardColor: Palette.protectiveBlue // bottom button (action list) + ); +} \ No newline at end of file diff --git a/lib/src/themes/theme_base.dart b/lib/src/themes/theme_base.dart new file mode 100644 index 000000000..bc7baf70c --- /dev/null +++ b/lib/src/themes/theme_base.dart @@ -0,0 +1,17 @@ +import 'package:flutter/material.dart'; + +enum ThemeType {light, bright, dark} + +abstract class ThemeBase { + ThemeBase({@required this.raw}); + + final int raw; + String get title; + ThemeData get themeData; + ThemeType get type; + + @override + String toString() { + return title; + } +} \ No newline at end of file diff --git a/lib/src/themes/theme_list.dart b/lib/src/themes/theme_list.dart new file mode 100644 index 000000000..2e1aa1fb8 --- /dev/null +++ b/lib/src/themes/theme_list.dart @@ -0,0 +1,25 @@ +import 'package:cake_wallet/src/themes/bright_theme.dart'; +import 'package:cake_wallet/src/themes/dark_theme.dart'; +import 'package:cake_wallet/src/themes/light_theme.dart'; +import 'package:cake_wallet/src/themes/theme_base.dart'; + +class ThemeList { + static final all = [lightTheme, brightTheme, darkTheme]; + + static final lightTheme = LightTheme(raw: 0); + static final brightTheme = BrightTheme(raw: 1); + static final darkTheme = DarkTheme(raw: 2); + + static ThemeBase deserialize({int raw}) { + switch (raw) { + case 0: + return lightTheme; + case 1: + return brightTheme; + case 2: + return darkTheme; + default: + return null; + } + } +} \ No newline at end of file diff --git a/lib/src/widgets/base_alert_dialog.dart b/lib/src/widgets/base_alert_dialog.dart index 15637c189..19c00ca43 100644 --- a/lib/src/widgets/base_alert_dialog.dart +++ b/lib/src/widgets/base_alert_dialog.dart @@ -1,7 +1,4 @@ import 'dart:ui'; -import 'package:cake_wallet/di.dart'; -import 'package:cake_wallet/store/settings_store.dart'; -import 'package:cake_wallet/themes.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/palette.dart'; @@ -13,7 +10,6 @@ class BaseAlertDialog extends StatelessWidget { VoidCallback get actionLeft => () {}; VoidCallback get actionRight => () {}; bool get barrierDismissible => true; - Themes get currentTheme => getIt.get().currentTheme; Widget title(BuildContext context) { return Text( @@ -73,13 +69,11 @@ class BaseAlertDialog extends StatelessWidget { ), ) ), - currentTheme.isLightTheme - ? Container( + Container( width: 1, height: 52, - color: Colors.grey[300], - ) - : Offstage(), + color: Theme.of(context).dividerColor, + ), Flexible( child: Container( height: 52, @@ -146,12 +140,10 @@ class BaseAlertDialog extends StatelessWidget { ], ), ), - currentTheme.isLightTheme - ? Container( + Container( height: 1, - color: Colors.grey[300], - ) - : Offstage(), + color: Theme.of(context).dividerColor, + ), actionButtons(context) ], ), diff --git a/lib/store/settings_store.dart b/lib/store/settings_store.dart index 785763066..d8f009273 100644 --- a/lib/store/settings_store.dart +++ b/lib/store/settings_store.dart @@ -1,5 +1,6 @@ import 'package:cake_wallet/entities/preferences_key.dart'; -import 'package:cake_wallet/themes.dart'; +import 'package:cake_wallet/src/themes/theme_base.dart'; +import 'package:cake_wallet/src/themes/theme_list.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:hive/hive.dart'; @@ -28,7 +29,7 @@ abstract class SettingsStoreBase with Store { @required BalanceDisplayMode initialBalanceDisplayMode, @required bool initialSaveRecipientAddress, @required bool initialAllowBiometricalAuthentication, - @required Themes initialTheme, + @required ThemeBase initialTheme, @required int initialPinLength, @required String initialLanguageCode, // @required String initialCurrentLocale, @@ -66,8 +67,8 @@ abstract class SettingsStoreBase with Store { reaction( (_) => currentTheme, - (Themes theme) => sharedPreferences.setInt( - PreferencesKey.currentTheme, theme.serialize())); + (ThemeBase theme) => sharedPreferences.setInt( + PreferencesKey.currentTheme, theme.raw)); reaction( (_) => allowBiometricalAuthentication, @@ -111,7 +112,7 @@ abstract class SettingsStoreBase with Store { bool allowBiometricalAuthentication; @observable - Themes currentTheme; + ThemeBase currentTheme; @observable int pinCodeLength; @@ -154,7 +155,7 @@ abstract class SettingsStoreBase with Store { final allowBiometricalAuthentication = sharedPreferences .getBool(PreferencesKey.allowBiometricalAuthenticationKey) ?? false; - final savedTheme = Themes.deserialize( + final savedTheme = ThemeList.deserialize( raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? 0); final actionListDisplayMode = ObservableList(); actionListDisplayMode.addAll(deserializeActionlistDisplayModes( diff --git a/lib/themes.dart b/lib/themes.dart deleted file mode 100644 index 4c29de9de..000000000 --- a/lib/themes.dart +++ /dev/null @@ -1,607 +0,0 @@ -import 'package:flutter/material.dart'; -import 'palette.dart'; -import 'package:cake_wallet/generated/i18n.dart'; -import 'package:cake_wallet/entities/enumerable_item.dart'; - -class Themes extends EnumerableItem with Serializable { - const Themes({String title, int raw}) - : super(title: title, raw: raw); - - static const all = [ - Themes.light, - Themes.bright, - Themes.dark, - ]; - - static const light = Themes(title: 'Light', raw: 0); - static const bright = Themes(title: 'Bright', raw: 1); - static const dark = Themes(title: 'Dark', raw: 2); - - static Themes deserialize({int raw}) { - switch (raw) { - case 0: - return light; - case 1: - return bright; - case 2: - return dark; - default: - return null; - } - } - - ThemeData get themeData { - switch (this) { - case Themes.light: - return lightTheme; - case Themes.bright: - return brightTheme; - case Themes.dark: - return darkTheme; - default: - return null; - } - } - - bool get isLightTheme => this == Themes.light; - bool get isBrightTheme => this == Themes.bright; - bool get isDarkTheme => this == Themes.dark; - - @override - String toString() { - switch (this) { - case Themes.light: - return S.current.light_theme; - case Themes.bright: - return S.current.bright_theme; - case Themes.dark: - return S.current.dark_theme; - default: - return ''; - } - } - - static final ThemeData lightTheme = ThemeData( - fontFamily: 'Lato', - brightness: Brightness.light, - backgroundColor: Colors.white, - accentColor: Colors.white, // first gradient color - scaffoldBackgroundColor: Colors.white, // second gradient color - primaryColor: Colors.white, // third gradient color - buttonColor: Palette.blueAlice, // action buttons on dashboard page - indicatorColor: PaletteDark.darkCyanBlue.withOpacity(0.67), // page indicator - hoverColor: Palette.darkBlueCraiola, // amount hint text (receive page) - dividerColor: Palette.paleBlue, - hintColor: Palette.gray, - textTheme: TextTheme( - title: TextStyle( - color: Palette.darkBlueCraiola, // sync_indicator text - backgroundColor: Palette.blueAlice, // synced sync_indicator - decorationColor: Palette.blueAlice.withOpacity(0.75), // not synced sync_indicator - ), - caption: TextStyle( - color: Palette.shineOrange, // not synced light - decorationColor: PaletteDark.wildBlue, // filter icon - ), - overline: TextStyle( - color: Palette.blueAlice, // filter button - backgroundColor: PaletteDark.darkCyanBlue, // date section row - decorationColor: Palette.blueAlice // icons (transaction and trade rows) - ), - subhead: TextStyle( - color: Palette.blueAlice, // address button border - decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget) - ), - headline: TextStyle( - color: Colors.white, // qr code - decorationColor: Palette.darkBlueCraiola, // bottom border of amount (receive page) - ), - display1: TextStyle( - color: PaletteDark.lightBlueGrey, // icons color (receive page) - decorationColor: Palette.moderateLavender, // icons background (receive page) - ), - display2: TextStyle( - color: Palette.darkBlueCraiola, // text color of tiles (receive page) - decorationColor: Palette.blueAlice // background of tiles (receive page) - ), - display3: TextStyle( - color: Colors.white, // text color of current tile (receive page), - //decorationColor: Palette.blueCraiola // background of current tile (receive page) - decorationColor: Palette.blueCraiola // background of current tile (receive page) - ), - display4: TextStyle( - color: Palette.violetBlue, // text color of tiles (account list) - decorationColor: Colors.white // background of tiles (account list) - ), - subtitle: TextStyle( - color: Palette.protectiveBlue, // text color of current tile (account list) - decorationColor: Colors.white // background of current tile (account list) - ), - body1: TextStyle( - color: Palette.moderatePurpleBlue, // scrollbar thumb - decorationColor: Palette.periwinkleCraiola // scrollbar background - ), - body2: TextStyle( - color: Palette.moderateLavender, // menu header - decorationColor: Colors.white, // menu background - ) - ), - primaryTextTheme: TextTheme( - title: TextStyle( - color: Palette.darkBlueCraiola, // title color - backgroundColor: Palette.wildPeriwinkle // textfield underline - ), - caption: TextStyle( - color: PaletteDark.pigeonBlue, // secondary text - decorationColor: Palette.wildLavender // menu divider - ), - overline: TextStyle( - color: Palette.darkGray, // transaction/trade details titles - decorationColor: PaletteDark.darkCyanBlue, // placeholder - ), - subhead: TextStyle( - color: Palette.blueCraiola, // first gradient color (send page) - decorationColor: Palette.blueGreyCraiola // second gradient color (send page) - ), - headline: TextStyle( - color: Colors.white.withOpacity(0.5), // text field border color (send page) - decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page) - ), - display1: TextStyle( - color: Colors.white.withOpacity(0.2), // text field button color (send page) - decorationColor: Colors.white // text field button icon color (send page) - ), - display2: TextStyle( - color: Colors.white.withOpacity(0.5), // estimated fee (send page) - decorationColor: Palette.moderateLavender // template dotted border (send page) - ), - display3: TextStyle( - color: Palette.darkBlueCraiola, // template new text (send page) - decorationColor: Palette.blueAlice // template background color (send page) - ), - display4: TextStyle( - color: Palette.darkBlueCraiola, // template title (send page) - decorationColor: Palette.niagara // receive amount text (exchange page) - ), - subtitle: TextStyle( - color: Palette.blueCraiola, // first gradient color top panel (exchange page) - decorationColor: Palette.blueGreyCraiola // second gradient color top panel (exchange page) - ), - body1: TextStyle( - color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page) - decorationColor: Palette.blueGreyCraiola.withOpacity(0.7), // second gradient color bottom panel (exchange page) - backgroundColor: Palette.protectiveBlue // alert right button text - ), - body2: TextStyle( - color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page) - decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page) - backgroundColor: Palette.brightOrange // alert left button text - ) - ), - focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page) - accentTextTheme: TextTheme( - title: TextStyle( - color: Colors.white, // picker background - backgroundColor: Palette.periwinkleCraiola, // picker divider - decorationColor: Colors.white // dialog background - ), - caption: TextStyle( - color: Palette.blueAlice, // container (confirm exchange) - backgroundColor: Palette.blueAlice, // button background (confirm exchange) - decorationColor: Palette.darkBlueCraiola, // text color (information page) - ), - subtitle: TextStyle( - color: Palette.darkBlueCraiola, // QR code (exchange trade page) - backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) - decorationColor: Palette.protectiveBlue // crete new wallet button background (wallet list page) - ), - headline: TextStyle( - color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page) - backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page) - decorationColor: Colors.white // restore wallet button text color (wallet list page) - ), - subhead: TextStyle( - color: Palette.darkGray, // titles color (filter widget) - backgroundColor: Palette.periwinkle, // divider color (filter widget) - decorationColor: Colors.white // checkbox background (filter widget) - ), - overline: TextStyle( - color: Palette.wildPeriwinkle, // checkbox bounds (filter widget) - decorationColor: Colors.white, // menu subname - ), - display1: TextStyle( - color: Palette.blueCraiola, // first gradient color (menu header) - decorationColor: Palette.blueGreyCraiola, // second gradient color(menu header) - backgroundColor: PaletteDark.darkNightBlue // active dot color - ), - display2: TextStyle( - color: Palette.shadowWhite, // action button color (address text field) - decorationColor: Palette.darkGray, // hint text (seed widget) - backgroundColor: Palette.darkBlueCraiola.withOpacity(0.67) // text on balance page - ), - display3: TextStyle( - color: Palette.darkGray, // hint text (new wallet page) - decorationColor: Palette.periwinkleCraiola, // underline (new wallet page) - backgroundColor: Palette.darkBlueCraiola // menu, icons, balance (dashboard page) - ), - display4: TextStyle( - color: Palette.darkGray, // switch background (settings page) - decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page) - ), - body1: TextStyle( - color: Palette.darkGray, // indicators (PIN code) - decorationColor: Palette.darkGray, // switch (PIN code) - backgroundColor: Colors.white // alert right button - ), - body2: TextStyle( - color: Palette.protectiveBlue, // primary buttons - decorationColor: Colors.white, // alert left button, - backgroundColor: Palette.dullGray // keyboard bar color - ), - ), - cardColor: Palette.protectiveBlue // bottom button (action list) - ); - - static final ThemeData brightTheme = ThemeData( - fontFamily: 'Lato', - brightness: Brightness.light, - backgroundColor: Colors.white, - accentColor: Palette.blueCraiola, // first gradient color - scaffoldBackgroundColor: Palette.pinkFlamingo, // second gradient color - primaryColor: Palette.redHat, // third gradient color - buttonColor: Colors.white.withOpacity(0.2), // action buttons on dashboard page - indicatorColor: Colors.white.withOpacity(0.5), // page indicator - hoverColor: Colors.white, // amount hint text (receive page) - dividerColor: Palette.paleBlue, - hintColor: Palette.gray, - textTheme: TextTheme( - title: TextStyle( - color: Colors.white, // sync_indicator text - backgroundColor: Colors.white.withOpacity(0.2), // synced sync_indicator - decorationColor: Colors.white.withOpacity(0.15), // not synced sync_indicator - ), - caption: TextStyle( - color: Palette.shineOrange, // not synced light - decorationColor: Colors.white, // filter icon - ), - overline: TextStyle( - color: Colors.white.withOpacity(0.2), // filter button - backgroundColor: Colors.white.withOpacity(0.5), // date section row - decorationColor: Colors.white.withOpacity(0.2) // icons (transaction and trade rows) - ), - subhead: TextStyle( - color: Colors.white.withOpacity(0.2), // address button border - decorationColor: Colors.white.withOpacity(0.4), // copy button (qr widget) - ), - headline: TextStyle( - color: Colors.white, // qr code - decorationColor: Colors.white.withOpacity(0.5), // bottom border of amount (receive page) - ), - display1: TextStyle( - color: PaletteDark.lightBlueGrey, // icons color (receive page) - decorationColor: Palette.lavender, // icons background (receive page) - ), - display2: TextStyle( - color: Palette.darkBlueCraiola, // text color of tiles (receive page) - decorationColor: Colors.white // background of tiles (receive page) - ), - display3: TextStyle( - color: Colors.white, // text color of current tile (receive page), - //decorationColor: Palette.blueCraiola // background of current tile (receive page) - decorationColor: Palette.moderateSlateBlue // background of current tile (receive page) - ), - display4: TextStyle( - color: Palette.violetBlue, // text color of tiles (account list) - decorationColor: Colors.white // background of tiles (account list) - ), - subtitle: TextStyle( - color: Palette.moderateSlateBlue, // text color of current tile (account list) - decorationColor: Colors.white // background of current tile (account list) - ), - body1: TextStyle( - color: Palette.moderatePurpleBlue, // scrollbar thumb - decorationColor: Palette.periwinkleCraiola // scrollbar background - ), - body2: TextStyle( - color: Palette.moderateLavender, // menu header - decorationColor: Colors.white, // menu background - ) - ), - primaryTextTheme: TextTheme( - title: TextStyle( - color: Palette.darkBlueCraiola, // title color - backgroundColor: Palette.wildPeriwinkle // textfield underline - ), - caption: TextStyle( - color: PaletteDark.pigeonBlue, // secondary text - decorationColor: Palette.wildLavender // menu divider - ), - overline: TextStyle( - color: Palette.darkGray, // transaction/trade details titles - decorationColor: Colors.white.withOpacity(0.5), // placeholder - ), - subhead: TextStyle( - color: Palette.blueCraiola, // first gradient color (send page) - decorationColor: Palette.pinkFlamingo // second gradient color (send page) - ), - headline: TextStyle( - color: Colors.white.withOpacity(0.5), // text field border color (send page) - decorationColor: Colors.white.withOpacity(0.5), // text field hint color (send page) - ), - display1: TextStyle( - color: Colors.white.withOpacity(0.2), // text field button color (send page) - decorationColor: Colors.white // text field button icon color (send page) - ), - display2: TextStyle( - color: Colors.white.withOpacity(0.5), // estimated fee (send page) - decorationColor: Palette.shadowWhite // template dotted border (send page) - ), - display3: TextStyle( - color: Palette.darkBlueCraiola, // template new text (send page) - decorationColor: Palette.shadowWhite // template background color (send page) - ), - display4: TextStyle( - color: Palette.darkBlueCraiola, // template title (send page) - decorationColor: Palette.niagara // receive amount text (exchange page) - ), - subtitle: TextStyle( - color: Palette.blueCraiola, // first gradient color top panel (exchange page) - decorationColor: Palette.pinkFlamingo // second gradient color top panel (exchange page) - ), - body1: TextStyle( - color: Palette.blueCraiola.withOpacity(0.7), // first gradient color bottom panel (exchange page) - decorationColor: Palette.pinkFlamingo.withOpacity(0.7), // second gradient color bottom panel (exchange page) - backgroundColor: Colors.white // alert right button text - ), - body2: TextStyle( - color: Colors.white.withOpacity(0.5), // text field border on top panel (exchange page) - decorationColor: Colors.white.withOpacity(0.5), // text field border on bottom panel (exchange page) - backgroundColor: Colors.white // alert left button text - ) - ), - focusColor: Colors.white.withOpacity(0.2), // text field button (exchange page) - accentTextTheme: TextTheme( - title: TextStyle( - color: Colors.white, // picker background - backgroundColor: Palette.periwinkleCraiola, // picker divider - decorationColor: Colors.white // dialog background - ), - caption: TextStyle( - color: Palette.moderateLavender, // container (confirm exchange) - backgroundColor: Palette.moderateLavender, // button background (confirm exchange) - decorationColor: Palette.darkBlueCraiola, // text color (information page) - ), - subtitle: TextStyle( - color: Palette.darkBlueCraiola, // QR code (exchange trade page) - backgroundColor: Palette.wildPeriwinkle, // divider (exchange trade page) - //decorationColor: Palette.blueCraiola // crete new wallet button background (wallet list page) - decorationColor: Palette.moderateSlateBlue // crete new wallet button background (wallet list page) - ), - headline: TextStyle( - color: Palette.moderateLavender, // first gradient color of wallet action buttons (wallet list page) - backgroundColor: Palette.moderateLavender, // second gradient color of wallet action buttons (wallet list page) - decorationColor: Colors.white // restore wallet button text color (wallet list page) - ), - subhead: TextStyle( - color: Palette.darkGray, // titles color (filter widget) - backgroundColor: Palette.periwinkle, // divider color (filter widget) - decorationColor: Colors.white // checkbox background (filter widget) - ), - overline: TextStyle( - color: Palette.wildPeriwinkle, // checkbox bounds (filter widget) - decorationColor: Colors.white, // menu subname - ), - display1: TextStyle( - color: Palette.blueCraiola, // first gradient color (menu header) - decorationColor: Palette.pinkFlamingo, // second gradient color(menu header) - backgroundColor: Colors.white // active dot color - ), - display2: TextStyle( - color: Palette.shadowWhite, // action button color (address text field) - decorationColor: Palette.darkGray, // hint text (seed widget) - backgroundColor: Colors.white.withOpacity(0.5) // text on balance page - ), - display3: TextStyle( - color: Palette.darkGray, // hint text (new wallet page) - decorationColor: Palette.periwinkleCraiola, // underline (new wallet page) - backgroundColor: Colors.white // menu, icons, balance (dashboard page) - ), - display4: TextStyle( - color: Palette.darkGray, // switch background (settings page) - decorationColor: Colors.white.withOpacity(0.4) // hint text (exchange page) - ), - body1: TextStyle( - color: Palette.darkGray, // indicators (PIN code) - decorationColor: Palette.darkGray, // switch (PIN code) - backgroundColor: Palette.moderateSlateBlue // alert right button - ), - body2: TextStyle( - color: Palette.moderateSlateBlue, // primary buttons - decorationColor: Palette.brightOrange, // alert left button, - backgroundColor: Palette.dullGray // keyboard bar color - ), - ), - cardColor: Palette.moderateSlateBlue // bottom button (action list) - ); - - static final ThemeData darkTheme = ThemeData( - fontFamily: 'Lato', - brightness: Brightness.dark, - backgroundColor: PaletteDark.backgroundColor, - accentColor: PaletteDark.backgroundColor, // first gradient color - scaffoldBackgroundColor: PaletteDark.backgroundColor, // second gradient color - primaryColor: PaletteDark.backgroundColor, // third gradient color - buttonColor: PaletteDark.nightBlue, // action buttons on dashboard page - indicatorColor: PaletteDark.cyanBlue, // page indicator - hoverColor: PaletteDark.cyanBlue, // amount hint text (receive page) - dividerColor: PaletteDark.dividerColor, - hintColor: PaletteDark.pigeonBlue, // menu - textTheme: TextTheme( - title: TextStyle( - color: PaletteDark.wildBlue, // sync_indicator text - backgroundColor: PaletteDark.lightNightBlue, // synced sync_indicator - decorationColor: PaletteDark.oceanBlue // not synced sync_indicator - ), - caption: TextStyle( - color: PaletteDark.orangeYellow, // not synced light - decorationColor: PaletteDark.wildBlue, // filter icon - ), - overline: TextStyle( - color: PaletteDark.oceanBlue, // filter button - backgroundColor: PaletteDark.darkCyanBlue, // date section row - decorationColor: PaletteDark.wildNightBlue // icons (transaction and trade rows) - ), - subhead: TextStyle( - color: PaletteDark.nightBlue, // address button border - decorationColor: PaletteDark.lightBlueGrey, // copy button (qr widget) - ), - headline: TextStyle( - color: PaletteDark.lightBlueGrey, // qr code - decorationColor: PaletteDark.darkGrey, // bottom border of amount (receive page) - ), - display1: TextStyle( - color: Colors.white, // icons color (receive page) - decorationColor: PaletteDark.distantNightBlue, // icons background (receive page) - ), - display2: TextStyle( - color: Colors.white, // text color of tiles (receive page) - decorationColor: PaletteDark.nightBlue // background of tiles (receive page) - ), - display3: TextStyle( - color: Palette.blueCraiola, // text color of current tile (receive page) - decorationColor: PaletteDark.lightOceanBlue // background of current tile (receive page) - ), - display4: TextStyle( - color: Colors.white, // text color of tiles (account list) - decorationColor: PaletteDark.darkOceanBlue // background of tiles (account list) - ), - subtitle: TextStyle( - color: Palette.blueCraiola, // text color of current tile (account list) - decorationColor: PaletteDark.darkNightBlue // background of current tile (account list) - ), - body1: TextStyle( - color: PaletteDark.wildBlueGrey, // scrollbar thumb - decorationColor: PaletteDark.violetBlue // scrollbar background - ), - body2: TextStyle( - color: PaletteDark.deepPurpleBlue, // menu header - decorationColor: PaletteDark.deepPurpleBlue, // menu background - ) - ), - primaryTextTheme: TextTheme( - title: TextStyle( - color: Colors.white, // title color - backgroundColor: PaletteDark.darkOceanBlue // textfield underline - ), - caption: TextStyle( - color: PaletteDark.darkCyanBlue, // secondary text - decorationColor: PaletteDark.darkOceanBlue // menu divider - ), - overline: TextStyle( - color: PaletteDark.lightBlueGrey, // transaction/trade details titles - decorationColor: Colors.grey, // placeholder - ), - subhead: TextStyle( - color: PaletteDark.darkNightBlue, // first gradient color (send page) - decorationColor: PaletteDark.darkNightBlue // second gradient color (send page) - ), - headline: TextStyle( - color: PaletteDark.lightVioletBlue, // text field border color (send page) - decorationColor: PaletteDark.darkCyanBlue, // text field hint color (send page) - ), - display1: TextStyle( - color: PaletteDark.buttonNightBlue, // text field button color (send page) - decorationColor: PaletteDark.gray // text field button icon color (send page) - ), - display2: TextStyle( - color: Colors.white, // estimated fee (send page) - decorationColor: PaletteDark.darkCyanBlue // template dotted border (send page) - ), - display3: TextStyle( - color: PaletteDark.darkCyanBlue, // template new text (send page) - decorationColor: PaletteDark.darkVioletBlue // template background color (send page) - ), - display4: TextStyle( - color: PaletteDark.cyanBlue, // template title (send page) - decorationColor: PaletteDark.darkCyanBlue // receive amount text (exchange page) - ), - subtitle: TextStyle( - color: PaletteDark.wildVioletBlue, // first gradient color top panel (exchange page) - decorationColor: PaletteDark.wildVioletBlue // second gradient color top panel (exchange page) - ), - body1: TextStyle( - color: PaletteDark.darkNightBlue, // first gradient color bottom panel (exchange page) - decorationColor: PaletteDark.darkNightBlue, // second gradient color bottom panel (exchange page) - backgroundColor: Colors.white // alert right button text - ), - body2: TextStyle( - color: PaletteDark.blueGrey, // text field border on top panel (exchange page) - decorationColor: PaletteDark.moderateVioletBlue, // text field border on bottom panel (exchange page) - backgroundColor: Colors.white // alert left button text - ) - ), - focusColor: PaletteDark.moderateBlue, // text field button (exchange page) - accentTextTheme: TextTheme( - title: TextStyle( - color: PaletteDark.nightBlue, // picker background - backgroundColor: PaletteDark.dividerColor, // picker divider - decorationColor: PaletteDark.darkNightBlue // dialog background - ), - caption: TextStyle( - color: PaletteDark.nightBlue, // container (confirm exchange) - backgroundColor: PaletteDark.deepVioletBlue, // button background (confirm exchange) - decorationColor: Palette.darkLavender, // text color (information page) - ), - subtitle: TextStyle( - //color: PaletteDark.lightBlueGrey, // QR code (exchange trade page) - color: Colors.white, // QR code (exchange trade page) - backgroundColor: PaletteDark.deepVioletBlue, // divider (exchange trade page) - decorationColor: Colors.white // crete new wallet button background (wallet list page) - ), - headline: TextStyle( - color: PaletteDark.distantBlue, // first gradient color of wallet action buttons (wallet list page) - backgroundColor: PaletteDark.distantNightBlue, // second gradient color of wallet action buttons (wallet list page) - decorationColor: Palette.darkBlueCraiola // restore wallet button text color (wallet list page) - ), - subhead: TextStyle( - color: Colors.white, // titles color (filter widget) - backgroundColor: PaletteDark.darkOceanBlue, // divider color (filter widget) - decorationColor: PaletteDark.wildVioletBlue.withOpacity(0.3) // checkbox background (filter widget) - ), - overline: TextStyle( - color: PaletteDark.wildVioletBlue, // checkbox bounds (filter widget) - decorationColor: PaletteDark.darkCyanBlue, // menu subname - ), - display1: TextStyle( - color: PaletteDark.deepPurpleBlue, // first gradient color (menu header) - decorationColor: PaletteDark.deepPurpleBlue, // second gradient color(menu header) - backgroundColor: Colors.white // active dot color - ), - display2: TextStyle( - color: PaletteDark.nightBlue, // action button color (address text field) - decorationColor: PaletteDark.darkCyanBlue, // hint text (seed widget) - backgroundColor: PaletteDark.cyanBlue // text on balance page - ), - display3: TextStyle( - color: PaletteDark.cyanBlue, // hint text (new wallet page) - decorationColor: PaletteDark.darkGrey, // underline (new wallet page) - backgroundColor: Colors.white // menu, icons, balance (dashboard page) - ), - display4: TextStyle( - color: PaletteDark.deepVioletBlue, // switch background (settings page) - decorationColor: PaletteDark.lightBlueGrey // hint text (exchange page) - ), - body1: TextStyle( - color: PaletteDark.indicatorVioletBlue, // indicators (PIN code) - decorationColor: PaletteDark.lightPurpleBlue, // switch (PIN code) - backgroundColor: Palette.blueCraiola // alert right button - ), - body2: TextStyle( - color: Palette.blueCraiola, // primary buttons - decorationColor: Palette.alizarinRed, // alert left button - backgroundColor: PaletteDark.granite // keyboard bar color - ), - ), - cardColor: PaletteDark.darkNightBlue // bottom button (action list) - ); -} \ No newline at end of file diff --git a/lib/view_model/settings/settings_view_model.dart b/lib/view_model/settings/settings_view_model.dart index 08ccb40b4..472e99767 100644 --- a/lib/view_model/settings/settings_view_model.dart +++ b/lib/view_model/settings/settings_view_model.dart @@ -1,5 +1,6 @@ +import 'package:cake_wallet/src/themes/theme_base.dart'; +import 'package:cake_wallet/src/themes/theme_list.dart'; import 'package:cake_wallet/src/screens/pin_code/pin_code_widget.dart'; -import 'package:cake_wallet/themes.dart'; import 'package:flutter/cupertino.dart'; import 'package:mobx/mobx.dart'; import 'package:package_info/package_info.dart'; @@ -109,9 +110,9 @@ abstract class SettingsViewModelBase with Store { }), PickerListItem( title: S.current.color_theme, - items: Themes.all, + items: ThemeList.all, selectedItem: () => theme, - onItemSelected: (Themes theme) => + onItemSelected: (ThemeBase theme) => _settingsStore.currentTheme = theme) ], [ @@ -189,7 +190,7 @@ abstract class SettingsViewModelBase with Store { _settingsStore.allowBiometricalAuthentication; @computed - Themes get theme => _settingsStore.currentTheme; + ThemeBase get theme => _settingsStore.currentTheme; final Map itemHeaders; List> sections;