CAKE-207 | changed Themes class; removed isDarkTheme from settings store and screens; added currentTheme to settings store; changed SwitcherListItem to PickerListItem for themes in the settings_view_model.dart; created item_from_theme.dart; changed currentDarkTheme property on currentTheme in the preferences_key.dart; applied themes to keyboard bar color in the exchange_page.dart, receive_page.dart, send_page.dart and send_template_page.dart; applied itemFromTheme() to new_wallet_page.dart, new_wallet_type_page.dart, pre_seed_page.dart, wallet_seed_page.dart, seed_language_page.dart, welcome_page.dart, base_page.dart and main.dart

lib/entities/item_from_theme.dart

@@ -0,0 +1,17 @@
+import 'package:cake_wallet/themes.dart';
+import 'package:flutter/material.dart';
+
+dynamic itemFromTheme({
+  @required Themes currentTheme,
+  @required Map<Themes, dynamic> items}) {
+  switch (currentTheme) {
+    case Themes.light:
+      return items[Themes.light];
+    case Themes.bright:
+      return items[Themes.bright];
+    case Themes.dark:
+      return items[Themes.dark];
+    default:
+      return items[Themes.light];
+  }
+}

lib/entities/preferences_key.dart

@@ -9,7 +9,7 @@ class PreferencesKey {
   static const shouldSaveRecipientAddressKey = 'save_recipient_address';
   static const allowBiometricalAuthenticationKey =
       'allow_biometrical_authentication';
-  static const currentDarkTheme = 'dark_theme';
+  static const currentTheme = 'current_theme';
   static const displayActionListModeKey = 'display_list_mode';
   static const currentPinLength = 'current_pin_length';
   static const currentLanguageCode = 'language_code';

lib/main.dart

@@ -1,3 +1,5 @@
+import 'package:cake_wallet/entities/item_from_theme.dart';
+import 'package:cake_wallet/themes.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hive/hive.dart';
@@ -123,16 +125,20 @@ class App extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final settingsStore = getIt.get<AppStore>().settingsStore;
-
+    final currentTheme = settingsStore.currentTheme ?? Themes.light;
-    if (settingsStore.theme == null) {
+    final Map<Themes, Brightness> items = {
-      settingsStore.isDarkTheme = false;
+      Themes.light: Brightness.dark,
-    }
+      Themes.bright: Brightness.dark,
+      Themes.dark: Brightness.light
+    };
 
     final statusBarColor = Colors.transparent;
     final statusBarBrightness =
-        settingsStore.isDarkTheme ? Brightness.light : Brightness.dark;
+          itemFromTheme(currentTheme: currentTheme, items: items) as Brightness
+          ?? Brightness.dark;
     final statusBarIconBrightness =
-        settingsStore.isDarkTheme ? Brightness.light : Brightness.dark;
+          itemFromTheme(currentTheme: currentTheme, items: items) as Brightness
+          ?? Brightness.dark;
     final authenticationStore = getIt.get<AuthenticationStore>();
     final initialRoute = authenticationStore.state == AuthenticationState.denied
         ? Routes.disclaimer

lib/palette.dart

@@ -43,6 +43,7 @@ class Palette {
   static const Color alizarinRed = Color.fromRGBO(233, 45, 45, 1.0);
   static const Color moderateSlateBlue = Color.fromRGBO(129, 93, 251, 1.0);
   static const Color brightOrange = Color.fromRGBO(255, 102, 0, 1.0);
+  static const Color dullGray = Color.fromRGBO(98, 98, 98, 1.0);
 
   // FIXME: Rename.
   static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);
@@ -94,6 +95,7 @@ class PaletteDark {
   static const Color deepVioletBlue = Color.fromRGBO(52, 66, 104, 1.0);
   static const Color lightPurpleBlue = Color.fromRGBO(120, 133, 170, 1.0);
   static const Color indicatorVioletBlue = Color.fromRGBO(59, 72, 119, 1.0);
+  static const Color granite = Color.fromRGBO(48, 51, 60, 1.0);
 
   // FIXME: Rename.
   static const Color eee = Color.fromRGBO(236, 239, 245, 1.0);

lib/src/screens/base_page.dart

@@ -1,3 +1,5 @@
+import 'package:cake_wallet/entities/item_from_theme.dart';
+import 'package:cake_wallet/themes.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/palette.dart';
@@ -9,13 +11,19 @@ enum AppBarStyle { regular, withShadow, transparent }
 
 abstract class BasePage extends StatelessWidget {
   BasePage()
-      : _scaffoldKey = GlobalKey<ScaffoldState>(),
+      : _scaffoldKey = GlobalKey<ScaffoldState>();
-        _closeButtonImage = Image.asset('assets/images/close_button.png'),
-        _closeButtonImageDarkTheme =
-            Image.asset('assets/images/close_button_dark_theme.png');
   final GlobalKey<ScaffoldState> _scaffoldKey;
-  final Image _closeButtonImage;
+
-  final Image _closeButtonImageDarkTheme;
+  static final Image closeButtonImage =
+    Image.asset('assets/images/close_button.png');
+  static final Image closeButtonImageDarkTheme =
+    Image.asset('assets/images/close_button_dark_theme.png');
+
+  final Map<Themes, Image> buttonItems = {
+    Themes.light: closeButtonImage,
+    Themes.bright: closeButtonImage,
+    Themes.dark: closeButtonImageDarkTheme
+  };
 
   String get title => null;
 
@@ -37,7 +45,7 @@ abstract class BasePage extends StatelessWidget {
 
   Widget Function(BuildContext, Widget) get rootWrapper => null;
 
-  bool get isDarkTheme => getIt.get<SettingsStore>().isDarkTheme;
+  Themes get currentTheme => getIt.get<SettingsStore>().currentTheme;
 
   void onOpenEndDrawer() => _scaffoldKey.currentState.openEndDrawer();
 
@@ -52,7 +60,8 @@ abstract class BasePage extends StatelessWidget {
       color: titleColor ?? Theme.of(context).primaryTextTheme.title.color,
       size: 16,);
     final _closeButton =
-        isDarkTheme ? _closeButtonImageDarkTheme : _closeButtonImage;
+        itemFromTheme(currentTheme: currentTheme, items: buttonItems) as Image
+        ?? closeButtonImage;
 
     return SizedBox(
       height: 37,
@@ -88,8 +97,7 @@ abstract class BasePage extends StatelessWidget {
   Widget floatingActionButton(BuildContext context) => null;
 
   ObstructingPreferredSizeWidget appBar(BuildContext context) {
-    final appBarColor =
+    final appBarColor = _setBackgroundColor();
-        isDarkTheme ? backgroundDarkColor : backgroundLightColor;
 
     switch (appBarStyle) {
       case AppBarStyle.regular:
@@ -131,10 +139,11 @@ abstract class BasePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final _backgroundColor = _setBackgroundColor();
+
     final root = Scaffold(
         key: _scaffoldKey,
-        backgroundColor:
+        backgroundColor: _backgroundColor,
-            isDarkTheme ? backgroundDarkColor : backgroundLightColor,
         resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
         extendBodyBehindAppBar: extendBodyBehindAppBar,
         endDrawer: endDrawer,
@@ -144,4 +153,17 @@ abstract class BasePage extends StatelessWidget {
 
     return rootWrapper?.call(context, root) ?? root;
   }
+
+  Color _setBackgroundColor() {
+    switch (currentTheme) {
+      case Themes.light:
+        return backgroundLightColor;
+      case Themes.bright:
+        return backgroundLightColor;
+      case Themes.dark:
+        return backgroundDarkColor;
+      default:
+        return backgroundLightColor;
+    }
+  }
 }

lib/src/screens/exchange/exchange_page.dart

@@ -95,9 +95,8 @@ class ExchangePage extends BasePage {
     return KeyboardActions(
         config: KeyboardActionsConfig(
             keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
-            keyboardBarColor: isDarkTheme
+            keyboardBarColor: Theme.of(context).accentTextTheme.body2
-                ? Color.fromRGBO(48, 51, 60, 1.0)
+                .backgroundColor,
-                : Color.fromRGBO(98, 98, 98, 1.0),
             nextFocus: false,
             actions: [
               KeyboardActionsItem(

lib/src/screens/new_wallet/new_wallet_page.dart

@@ -1,6 +1,4 @@
-import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/routes.dart';
-import 'package:cake_wallet/store/settings_store.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:mobx/mobx.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
@@ -16,23 +14,37 @@ import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_pick
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
 import 'package:cake_wallet/core/execution_state.dart';
 import 'package:cake_wallet/view_model/wallet_new_vm.dart';
+import 'package:cake_wallet/themes.dart';
+import 'package:cake_wallet/entities/item_from_theme.dart';
 
 class NewWalletPage extends BasePage {
   NewWalletPage(this._walletNewVM);
 
   final WalletNewVM _walletNewVM;
 
+  static final walletNameImage = Image.asset('assets/images/wallet_name.png');
+  static final walletNameLightImage =
+    Image.asset('assets/images/wallet_name_light.png');
+  final Map<Themes, Image> items = {
+    Themes.light: walletNameLightImage,
+    Themes.bright: walletNameLightImage,
+    Themes.dark: walletNameImage
+  };
+
   @override
   String get title => S.current.new_wallet;
 
   @override
-  Widget body(BuildContext context) => WalletNameForm(_walletNewVM);
+  Widget body(BuildContext context) => WalletNameForm(_walletNewVM,
+      itemFromTheme(currentTheme: currentTheme, items: items) as Image
+      ?? walletNameLightImage);
 }
 
 class WalletNameForm extends StatefulWidget {
-  WalletNameForm(this._walletNewVM);
+  WalletNameForm(this._walletNewVM, this.walletImage);
 
   final WalletNewVM _walletNewVM;
+  final Image walletImage;
 
   @override
   _WalletNameFormState createState() => _WalletNameFormState(_walletNewVM);
@@ -43,9 +55,6 @@ class _WalletNameFormState extends State<WalletNameForm> {
 
   static const aspectRatioImage = 1.22;
 
-  final walletNameImage = Image.asset('assets/images/wallet_name.png');
-  final walletNameLightImage =
-      Image.asset('assets/images/wallet_name_light.png');
   final _formKey = GlobalKey<FormState>();
   final _languageSelectorKey = GlobalKey<SeedLanguageSelectorState>();
   ReactionDisposer _stateReaction;
@@ -78,10 +87,6 @@ class _WalletNameFormState extends State<WalletNameForm> {
 
   @override
   Widget build(BuildContext context) {
-    final walletImage = getIt.get<SettingsStore>().isDarkTheme
-        ? walletNameImage
-        : walletNameLightImage;
-
     return Container(
       padding: EdgeInsets.only(top: 24),
       child: ScrollableWithBottomSection(
@@ -92,7 +97,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
               padding: EdgeInsets.only(left: 12, right: 12),
               child: AspectRatio(
                   aspectRatio: aspectRatioImage,
-                  child: FittedBox(child: walletImage, fit: BoxFit.fill)),
+                  child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
             ),
             Padding(
               padding: EdgeInsets.only(top: 24),

lib/src/screens/new_wallet/new_wallet_type_page.dart

@@ -1,6 +1,5 @@
-import 'package:cake_wallet/di.dart';
+import 'package:cake_wallet/entities/item_from_theme.dart';
 import 'package:cake_wallet/entities/wallet_type.dart';
-import 'package:cake_wallet/store/settings_store.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:cake_wallet/generated/i18n.dart';
@@ -8,6 +7,7 @@ import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
 import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
+import 'package:cake_wallet/themes.dart';
 
 class NewWalletTypePage extends BasePage {
   NewWalletTypePage({this.onTypeSelected, this.isNewWallet = true});
@@ -15,6 +15,15 @@ class NewWalletTypePage extends BasePage {
   final void Function(BuildContext, WalletType) onTypeSelected;
   final bool isNewWallet;
 
+  static final walletTypeImage = Image.asset('assets/images/wallet_type.png');
+  static final walletTypeLightImage =
+               Image.asset('assets/images/wallet_type_light.png');
+  final Map<Themes, Image> items = {
+    Themes.light: walletTypeLightImage,
+    Themes.bright: walletTypeLightImage,
+    Themes.dark: walletTypeImage
+  };
+
   @override
   String get title => isNewWallet
                       ? S.current.new_wallet
@@ -22,13 +31,18 @@ class NewWalletTypePage extends BasePage {
 
   @override
   Widget body(BuildContext context) =>
-      WalletTypeForm(onTypeSelected: onTypeSelected);
+      WalletTypeForm(
+          onTypeSelected: onTypeSelected,
+          walletImage:
+            itemFromTheme(currentTheme: currentTheme, items: items) as Image
+            ?? walletTypeLightImage);
 }
 
 class WalletTypeForm extends StatefulWidget {
-  WalletTypeForm({this.onTypeSelected});
+  WalletTypeForm({this.onTypeSelected, this.walletImage});
 
   final void Function(BuildContext, WalletType) onTypeSelected;
+  final Image walletImage;
 
   @override
   WalletTypeFormState createState() => WalletTypeFormState();
@@ -41,8 +55,6 @@ class WalletTypeFormState extends State<WalletTypeForm> {
       Image.asset('assets/images/monero_logo.png', height: 24, width: 24);
   final bitcoinIcon =
       Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
-  final walletTypeImage = Image.asset('assets/images/wallet_type.png');
-  final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
 
   WalletType selected;
   List<WalletType> types;
@@ -55,9 +67,6 @@ class WalletTypeFormState extends State<WalletTypeForm> {
 
   @override
   Widget build(BuildContext context) {
-    final walletImage = getIt.get<SettingsStore>().isDarkTheme
-    ? walletTypeImage : walletTypeLightImage;
-
     return Container(
       padding: EdgeInsets.only(top: 24),
       child: ScrollableWithBottomSection(
@@ -69,7 +78,7 @@ class WalletTypeFormState extends State<WalletTypeForm> {
               padding: EdgeInsets.only(left: 12, right: 12),
               child: AspectRatio(
                   aspectRatio: aspectRatioImage,
-                  child: FittedBox(child: walletImage, fit: BoxFit.fill)),
+                  child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
             ),
             Padding(
               padding: EdgeInsets.only(top: 48),

lib/src/screens/receive/receive_page.dart

@@ -74,9 +74,8 @@ class ReceivePage extends BasePage {
     return KeyboardActions(
         config: KeyboardActionsConfig(
             keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
-            keyboardBarColor: isDarkTheme
+            keyboardBarColor: Theme.of(context).accentTextTheme.body2
-                ? Color.fromRGBO(48, 51, 60, 1.0)
+                .backgroundColor,
-                : Color.fromRGBO(98, 98, 98, 1.0),
             nextFocus: false,
             actions: [
               KeyboardActionsItem(

lib/src/screens/seed/pre_seed_page.dart

@@ -1,16 +1,22 @@
-import 'package:cake_wallet/di.dart';
+import 'package:cake_wallet/entities/item_from_theme.dart';
 import 'package:cake_wallet/routes.dart';
-import 'package:cake_wallet/store/settings_store.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
+import 'package:cake_wallet/themes.dart';
 
 class PreSeedPage extends BasePage {
   static final imageLight = Image.asset('assets/images/pre_seed_light.png');
   static final imageDark = Image.asset('assets/images/pre_seed_dark.png');
 
+  final Map<Themes, Image> items = {
+    Themes.light: imageLight,
+    Themes.bright: imageLight,
+    Themes.dark: imageDark
+  };
+
   @override
   Widget leading(BuildContext context) => null;
 
@@ -20,7 +26,8 @@ class PreSeedPage extends BasePage {
   @override
   Widget body(BuildContext context) {
     final image =
-        getIt.get<SettingsStore>().isDarkTheme ? imageDark : imageLight;
+          itemFromTheme(currentTheme: currentTheme, items: items) as Image
+          ?? imageLight;
 
     return WillPopScope(
         onWillPop: () async => false,

lib/src/screens/seed/wallet_seed_page.dart

@@ -1,7 +1,6 @@
-import 'package:cake_wallet/di.dart';
+import 'package:cake_wallet/entities/item_from_theme.dart';
 import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
-import 'package:cake_wallet/store/settings_store.dart';
 import 'package:cake_wallet/utils/show_bar.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:flutter/cupertino.dart';
@@ -13,12 +12,18 @@ import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/view_model/wallet_seed_view_model.dart';
+import 'package:cake_wallet/themes.dart';
 
 class WalletSeedPage extends BasePage {
   WalletSeedPage(this.walletSeedViewModel, {@required this.isNewWalletCreated});
 
   static final imageLight = Image.asset('assets/images/crypto_lock_light.png');
   static final imageDark = Image.asset('assets/images/crypto_lock.png');
+  final Map<Themes, Image> items = {
+    Themes.light: imageLight,
+    Themes.bright: imageLight,
+    Themes.dark: imageDark
+  };
 
   @override
   String get title => S.current.seed_title;
@@ -84,7 +89,8 @@ class WalletSeedPage extends BasePage {
   @override
   Widget body(BuildContext context) {
     final image =
-        getIt.get<SettingsStore>().isDarkTheme ? imageDark : imageLight;
+          itemFromTheme(currentTheme: currentTheme, items: items) as Image
+          ?? imageLight;
 
     return WillPopScope(onWillPop: () async => false, child:  Container(
         padding: EdgeInsets.all(24),

lib/src/screens/seed_language/seed_language_page.dart

@@ -1,6 +1,5 @@
-import 'package:cake_wallet/di.dart';
+import 'package:cake_wallet/entities/item_from_theme.dart';
 import 'package:cake_wallet/src/widgets/seed_language_selector.dart';
-import 'package:cake_wallet/store/settings_store.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
@@ -9,23 +8,39 @@ import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
 import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_picker.dart';
+import 'package:cake_wallet/themes.dart';
 
 class SeedLanguage extends BasePage {
   SeedLanguage({this.onConfirm});
 
   final Function(BuildContext, String) onConfirm;
 
+  static final walletNameImage = Image.asset('assets/images/wallet_name.png');
+  static final walletNameLightImage =
+  Image.asset('assets/images/wallet_name_light.png');
+  final Map<Themes, Image> items = {
+    Themes.light: walletNameLightImage,
+    Themes.bright: walletNameLightImage,
+    Themes.dark: walletNameImage
+  };
+
   @override
   String get title => S.current.wallet_list_restore_wallet;
 
   @override
-  Widget body(BuildContext context) => SeedLanguageForm(onConfirm: onConfirm);
+  Widget body(BuildContext context) =>
+      SeedLanguageForm(
+          onConfirm: onConfirm,
+          walletImage:
+              itemFromTheme(currentTheme: currentTheme, items: items) as Image
+              ?? walletNameLightImage);
 }
 
 class SeedLanguageForm extends StatefulWidget {
-  SeedLanguageForm({this.onConfirm});
+  SeedLanguageForm({this.onConfirm, this.walletImage});
 
   final Function(BuildContext, String) onConfirm;
+  final Image walletImage;
 
   @override
   SeedLanguageFormState createState() => SeedLanguageFormState();
@@ -33,18 +48,10 @@ class SeedLanguageForm extends StatefulWidget {
 
 class SeedLanguageFormState extends State<SeedLanguageForm> {
   static const aspectRatioImage = 1.22;
-
-  final walletNameImage = Image.asset('assets/images/wallet_name.png');
-  final walletNameLightImage =
-      Image.asset('assets/images/wallet_name_light.png');
   final _languageSelectorKey = GlobalKey<SeedLanguageSelectorState>();
 
   @override
   Widget build(BuildContext context) {
-    final walletImage = getIt.get<SettingsStore>().isDarkTheme
-        ? walletNameImage
-        : walletNameLightImage;
-
     return Container(
       padding: EdgeInsets.only(top: 24),
       child: ScrollableWithBottomSection(
@@ -55,7 +62,8 @@ class SeedLanguageFormState extends State<SeedLanguageForm> {
               padding: EdgeInsets.only(left: 12, right: 12),
               child: AspectRatio(
                   aspectRatio: aspectRatioImage,
-                  child: FittedBox(child: walletImage, fit: BoxFit.fill)),
+                  child: FittedBox(child: widget.walletImage,
+                      fit: BoxFit.fill)),
             ),
             Padding(
               padding: EdgeInsets.only(top: 40),

lib/src/screens/send/send_page.dart

@@ -83,9 +83,8 @@ class SendPage extends BasePage {
     return KeyboardActions(
         config: KeyboardActionsConfig(
             keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
-            keyboardBarColor: isDarkTheme
+            keyboardBarColor: Theme.of(context).accentTextTheme.body2
-                ? Color.fromRGBO(48, 51, 60, 1.0)
+                .backgroundColor,
-                : Color.fromRGBO(98, 98, 98, 1.0),
             nextFocus: false,
             actions: [
               KeyboardActionsItem(

lib/src/screens/send/send_template_page.dart

@@ -49,9 +49,8 @@ class SendTemplatePage extends BasePage {
     return KeyboardActions(
         config: KeyboardActionsConfig(
             keyboardActionsPlatform: KeyboardActionsPlatform.IOS,
-            keyboardBarColor: isDarkTheme
+            keyboardBarColor: Theme.of(context).accentTextTheme.body2
-                ? Color.fromRGBO(48, 51, 60, 1.0)
+                .backgroundColor,
-                : Color.fromRGBO(98, 98, 98, 1.0),
             nextFocus: false,
             actions: [
               KeyboardActionsItem(

lib/src/screens/welcome/welcome_page.dart

@@ -1,15 +1,21 @@
-import 'package:cake_wallet/di.dart';
+import 'package:cake_wallet/entities/item_from_theme.dart';
-import 'package:cake_wallet/store/settings_store.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/themes.dart';
 
 class WelcomePage extends BasePage {
   static const aspectRatioImage = 1.25;
-  final welcomeImageLight = Image.asset('assets/images/welcome_light.png');
+  static final welcomeImageLight = Image.asset('assets/images/welcome_light.png');
-  final welcomeImageDark = Image.asset('assets/images/welcome.png');
+  static final welcomeImageDark = Image.asset('assets/images/welcome.png');
+
+  final Map<Themes, Image> items = {
+    Themes.light: welcomeImageLight,
+    Themes.bright: welcomeImageLight,
+    Themes.dark: welcomeImageDark
+  };
 
   @override
   Widget build(BuildContext context) {
@@ -23,10 +29,9 @@ class WelcomePage extends BasePage {
 
   @override
   Widget body(BuildContext context) {
-    final welcomeImage = getIt
+    final welcomeImage =
-        .get<SettingsStore>()
+        itemFromTheme(currentTheme: currentTheme, items: items) as Image
-        .isDarkTheme
+        ?? welcomeImageLight;
-        ? welcomeImageDark : welcomeImageLight;
 
     final newWalletImage = Image.asset('assets/images/new_wallet.png',
         height: 12,

lib/store/settings_store.dart

@@ -28,7 +28,7 @@ abstract class SettingsStoreBase with Store {
       @required BalanceDisplayMode initialBalanceDisplayMode,
       @required bool initialSaveRecipientAddress,
       @required bool initialAllowBiometricalAuthentication,
-      @required bool initialDarkTheme,
+      @required Themes initialTheme,
       @required int initialPinLength,
       @required String initialLanguageCode,
       // @required String initialCurrentLocale,
@@ -40,7 +40,7 @@ abstract class SettingsStoreBase with Store {
     balanceDisplayMode = initialBalanceDisplayMode;
     shouldSaveRecipientAddress = initialSaveRecipientAddress;
     allowBiometricalAuthentication = initialAllowBiometricalAuthentication;
-    isDarkTheme = initialDarkTheme;
+    currentTheme = initialTheme;
     pinCodeLength = initialPinLength;
     languageCode = initialLanguageCode;
     currentNode = nodes[WalletType.monero];
@@ -65,9 +65,9 @@ abstract class SettingsStoreBase with Store {
             shouldSaveRecipientAddress));
 
     reaction(
-        (_) => isDarkTheme,
+        (_) => currentTheme,
-        (bool isDarkTheme) => sharedPreferences.setBool(
+        (Themes theme) => sharedPreferences.setInt(
-            PreferencesKey.currentDarkTheme, isDarkTheme));
+            PreferencesKey.currentTheme, theme.serialize()));
 
     reaction(
         (_) => allowBiometricalAuthentication,
@@ -111,7 +111,7 @@ abstract class SettingsStoreBase with Store {
   bool allowBiometricalAuthentication;
 
   @observable
-  bool isDarkTheme;
+  Themes currentTheme;
 
   @observable
   int pinCodeLength;
@@ -120,7 +120,7 @@ abstract class SettingsStoreBase with Store {
   Node currentNode;
 
   @computed
-  ThemeData get theme => isDarkTheme ? Themes.darkTheme : Themes.lightTheme;
+  ThemeData get theme => currentTheme.themeData;
 
   @observable
   String languageCode;
@@ -154,8 +154,8 @@ abstract class SettingsStoreBase with Store {
     final allowBiometricalAuthentication = sharedPreferences
             .getBool(PreferencesKey.allowBiometricalAuthenticationKey) ??
         false;
-    final savedDarkTheme =
+    final savedTheme = Themes.deserialize(
-        sharedPreferences.getBool(PreferencesKey.currentDarkTheme) ?? false;
+      raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? 0);
     final actionListDisplayMode = ObservableList<ActionListDisplayMode>();
     actionListDisplayMode.addAll(deserializeActionlistDisplayModes(
         sharedPreferences.getInt(PreferencesKey.displayActionListModeKey) ??
@@ -188,7 +188,7 @@ abstract class SettingsStoreBase with Store {
         initialBalanceDisplayMode: currentBalanceDisplayMode,
         initialSaveRecipientAddress: shouldSaveRecipientAddress,
         initialAllowBiometricalAuthentication: allowBiometricalAuthentication,
-        initialDarkTheme: savedDarkTheme,
+        initialTheme: savedTheme,
         actionlistDisplayMode: actionListDisplayMode,
         initialPinLength: pinLength,
         initialLanguageCode: savedLanguageCode);

lib/themes.dart

@@ -1,7 +1,61 @@
 import 'package:flutter/material.dart';
 import 'palette.dart';
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/entities/enumerable_item.dart';
 
-class Themes {
+class Themes extends EnumerableItem<int> with Serializable<int> {
+  const Themes({String title, int raw})
+      : super(title: title, raw: raw);
+
+  static const all = [
+    Themes.light,
+    Themes.bright,
+    Themes.dark,
+  ];
+
+  static const light = Themes(title: 'Light', raw: 0);
+  static const bright = Themes(title: 'Bright', raw: 1);
+  static const dark = Themes(title: 'Dark', raw: 2);
+
+  static Themes deserialize({int raw}) {
+    switch (raw) {
+      case 0:
+        return light;
+      case 1:
+        return bright;
+      case 2:
+        return dark;
+      default:
+        return null;
+    }
+  }
+
+  ThemeData get themeData {
+    switch (this) {
+      case Themes.light:
+        return lightTheme;
+      case Themes.bright:
+        return lightTheme;
+      case Themes.dark:
+        return darkTheme;
+      default:
+        return null;
+    }
+  }
+
+  @override
+  String toString() {
+    switch (this) {
+      case Themes.light:
+        return 'Light';
+      case Themes.bright:
+        return 'Bright';
+      case Themes.dark:
+        return 'Dark';
+      default:
+        return '';
+    }
+  }
 
   static final ThemeData lightTheme = ThemeData(
       fontFamily: 'Lato',
@@ -171,13 +225,13 @@ class Themes {
         ),
         body2: TextStyle(
             color: Palette.moderateSlateBlue, // primary buttons, alert right buttons
-        decorationColor: Palette.brightOrange // alert left button
+            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,
@@ -345,7 +399,8 @@ class Themes {
         ),
         body2: TextStyle(
             color: Palette.blueCraiola, // primary buttons, alert right buttons
-        decorationColor: Palette.alizarinRed // alert left button
+            decorationColor: Palette.alizarinRed, // alert left button
+            backgroundColor: PaletteDark.granite // keyboard bar color
         ),
       ),
       cardColor: PaletteDark.darkNightBlue // bottom button (action list)

lib/view_model/settings/settings_view_model.dart

@@ -1,4 +1,5 @@
 import 'package:cake_wallet/src/screens/pin_code/pin_code_widget.dart';
+import 'package:cake_wallet/themes.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:mobx/mobx.dart';
 import 'package:package_info/package_info.dart';
@@ -106,11 +107,12 @@ abstract class SettingsViewModelBase with Store {
                 setAllowBiometricalAuthentication(value);
               }
             }),
-        SwitcherListItem(
+        PickerListItem(
-            title: S.current.settings_dark_mode,
+            title: 'Color theme',
-            value: () => _settingsStore.isDarkTheme,
+            items: Themes.all,
-            onValueChange: (_, bool value) =>
+            selectedItem: () => theme,
-                _settingsStore.isDarkTheme = value)
+            onItemSelected: (Themes theme) =>
+            _settingsStore.currentTheme = theme)
       ],
       [
         LinkListItem(
@@ -186,6 +188,9 @@ abstract class SettingsViewModelBase with Store {
   bool get allowBiometricalAuthentication =>
       _settingsStore.allowBiometricalAuthentication;
 
+  @computed
+  Themes get theme => _settingsStore.currentTheme;
+
   final Map<String, String> itemHeaders;
   List<List<SettingsListItem>> sections;
   final SettingsStore _settingsStore;