New themes (#2239)

* Add theme base v2

* Initial new theme base files

* Typos

* Fixes

* Update theme files

* feat: Migrate to Material 3 Theming

Foundation, Theme Data Refactor, and First Extension Cleanup Batch.

This commit completes the first major phase of migrating to Material 3 theming by setting up the foundations for material 3 integration and begins the initial migration, removing custom theme extensions, updating theme data, and refactoring all relevant widget and page theming to use Material 3’s built-in color and typography tokens.

These changes:
- Lays the groundwork for Material 3 theming by restructuring the app’s theme configuration to use Material 3’s ColorScheme and TextTheme as the primary sources of color and typography throughout the app.
- Refactors the core theme config files by removing legacy custom color roles ensuring all color definitions now map directly to Material 3’s role.
- Begins the first batch migration of custom theme extensions (InfoTheme, PlaceholderTheme, KeyboardTheme, PinCodeTheme) and updates all affected widgets and pages to use Material 3 color and typography tokens instead of the custom properties.
- Cleans up the codebase by deleting the files of the initial set of migrated extensions and eliminating all related imports and usages.

* feat: Migrate to Material 3 Theming.

This change:
- Updates the themes README.md file to reflect the current structure and give more information based on the first major phase that was completed.

* feat: Migrate to Material 3 Theming

Deleting previous theme extensions

* feat: Migrate to Material 3 Theming

Another batch of migrations from existing extensions

* feat: Migration to Material 3 Theming

Third Migration batch for theme extensions

* fwat: Migration to Material 3 Theming

Final Migration batch for previous theme extensions

* Update onboarding hero

* Update button radius

* Add surfaceContainer to light theme

* feat(themes): Migrate to Material 3 Theming

This change:
- Adds new set of hero images
- Modifies the core structure for the themes
- Add missing color tokens to the theme classes
- Adds a CustomThemeColor class for custom color tokens
- Modifies the themelist to have a fall back for previous theme implementation
- Adds localization for some texts
- Modifies the flow for loading the theme on app start
- Add a WidgetsBindingObserver that listens for changes in the device theme and updates the app theme when there is a change
- Registers the themeStore as a Singleton for codebase wide use

* feat(themes): Migrate to Material 3 theming

This change:
- Migrates UI flows across the app to the new themes
- Confirms styling and typography of components across the app uses the new themes
- Remove instances of Palette use
- Switch TextStyles across the app to use theme text styles

* feat(themes): Migrate to Material 3 Theming.

This change:
- Adjusts bottomsheets styling and removes duplicate close button
- Removes more themedata extensions from the previous implementation

* - Remove outlines from cards and dock
- Update menu colors
- Update padding/divider size for cards

* - Update PIN screen
- Fix navigation dock shadow
- Update wallet screen colors

* Update border radius --skip-ci

* feat(themes): Migrate to Material 3 Theming.

This change:
- Adds gradient backgrounds to the dashbaord and balance cards.
- Migrates the input fields across the app to BaseTextFormFields.
- Removes dependence of input fields on individual styling, focusing instead on using theme defined InputDecoration styling with adjustments on individual components where needed.
- Applies new theme styling to BaseTextFormField, AddressTextField and CurrencyAmountTextField.

* - Switch some hero images to PNG
- Fix nagivation_dock shadow
- Minor fixes

* feat: Add fallback to previous underline styling in central widgets

This change:
- Adds a fallback to CurrencyAmountTextField, AddressTextField, and BaseTextFormField, allowing them use the previous theme styling.
- Adds localization for new texts

* feat(themes): Update warning box colors for dark and light themes

* feat(themes): Relaod themes when user restores from backup, ensuring the user previous theme preference is used.

* feat(themes): Handle themes logic during restore from backup

This change:
- Refactors theme loading logic to handle backup restore edgecase
- Refreshes the theme based on the user saved preference during restore from backup flow

* Fix card gradients and spacing

* Fix even more radiuses
Test new icons for navigation_dock.dart

* Update onboarding flow backgrounds
Fix swap icon clipping
Fix some text colors
Add more hero images

* Fix incorrect color for light theme

* Fix more hero images and cleanup

* Update text field icons
Fix info box CTA colors
Fix sync indicator colors

* Update toggle colors
Update dark theme colors (minor)
Update crypto_balance_widget.dart icon

* Update page transitions in router.dart
Fix some colors

* feat(themes): Display label by default for filled textfields

* feat(themes): Refactor theme handling across various components

This change:
- Fixes issue with themeMode resetting to system mode when app is restarted causing a UI glitch
- Updates theme checks from `currentTheme.type == ThemeType.dark` to `currentTheme.isDark` for consistency
- Adjusts UI components to use the theme directly from the themeStore

* feat(themes): Add animating tagline to the create pin welcome screen

* Revert text fields label temporarily, fix a couple colors, and cleanup some images

---------

Co-authored-by: OmarHatem <omarh.ismail1@gmail.com>
Co-authored-by: Blazebrain <davidadegoke16@gmail.com>

lib/view_model/anonpay_details_view_model.dart

@@ -7,7 +7,7 @@ import 'package:cake_wallet/src/screens/trade_details/track_trade_list_item.dart
 import 'package:cake_wallet/src/screens/trade_details/trade_details_list_card.dart';
 import 'package:cake_wallet/src/screens/trade_details/trade_details_status_item.dart';
 import 'package:cake_wallet/src/screens/transaction_details/standart_list_item.dart';
-import 'package:cake_wallet/store/settings_store.dart';
+import 'package:cake_wallet/themes/core/theme_store.dart';
 import 'package:cake_wallet/utils/date_formatter.dart';
 import 'package:cake_wallet/utils/show_bar.dart';
 import 'package:cw_core/crypto_currency.dart';
@@ -25,7 +25,7 @@ abstract class AnonpayDetailsViewModelBase with Store {
   AnonpayDetailsViewModelBase(
       {required this.anonPayApi,
       required AnonpayInvoiceInfo anonpayInvoiceInfo,
-      required this.settingsStore})
+      required this.themeStore})
       : items = ObservableList<StandartListItem>(),
         invoiceDetail = anonpayInvoiceInfo {
     _updateItems();
@@ -34,7 +34,7 @@ abstract class AnonpayDetailsViewModelBase with Store {
   }
 
   final AnonPayApi anonPayApi;
-  final SettingsStore settingsStore;
+  final ThemeStore themeStore;
   final AnonpayInvoiceInfo invoiceDetail;
 
   final ObservableList<StandartListItem> items;

lib/view_model/buy/buy_sell_view_model.dart

@@ -12,8 +12,7 @@ import 'package:cake_wallet/entities/provider_types.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/store/app_store.dart';
-import 'package:cake_wallet/store/settings_store.dart';
-import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/themes/core/material_base_theme.dart';
 import 'package:cw_core/crypto_currency.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:intl/intl.dart';
@@ -41,7 +40,7 @@ abstract class BuySellViewModelBase extends WalletChangeListenerViewModel with S
         sortedRecommendedQuotes = ObservableList<Quote>(),
         sortedQuotes = ObservableList<Quote>(),
         paymentMethods = ObservableList<PaymentMethod>(),
-        settingsStore = appStore.settingsStore,
+        _appStore = appStore,
         super(appStore: appStore) {
     const excludeFiatCurrencies = [];
     const excludeCryptoCurrencies = [];
@@ -80,7 +79,7 @@ abstract class BuySellViewModelBase extends WalletChangeListenerViewModel with S
     cryptoCurrency = wallet.currency;
   }
 
-  bool get isDarkTheme => settingsStore.currentTheme.type == ThemeType.dark;
+  bool get isDarkTheme => _appStore.themeStore.currentTheme.isDark;
 
   double get amount {
     final formattedFiatAmount = double.tryParse(fiatAmount) ?? 200.0;
@@ -90,7 +89,7 @@ abstract class BuySellViewModelBase extends WalletChangeListenerViewModel with S
     return isBuyAction ? formattedFiatAmount : formattedCryptoAmount;
   }
 
-  SettingsStore settingsStore;
+  AppStore _appStore;
 
   Quote? bestRateQuote;
 
@@ -166,7 +165,7 @@ abstract class BuySellViewModelBase extends WalletChangeListenerViewModel with S
   @action
   void reset() {
     cryptoCurrency = wallet.currency;
-    fiatCurrency = settingsStore.fiatCurrency;
+    fiatCurrency = _appStore.settingsStore.fiatCurrency;
     isCryptoCurrencyAddressEnabled = !(cryptoCurrency == wallet.currency);
     _initialize();
   }

lib/view_model/dashboard/dashboard_view_model.dart

@@ -23,6 +23,7 @@ import 'package:cake_wallet/store/dashboard/trades_store.dart';
 import 'package:cake_wallet/store/dashboard/transaction_filter_store.dart';
 import 'package:cake_wallet/store/settings_store.dart';
 import 'package:cake_wallet/store/yat/yat_store.dart';
+import 'package:cake_wallet/themes/core/material_base_theme.dart';
 import 'package:cake_wallet/view_model/dashboard/action_list_item.dart';
 import 'package:cake_wallet/view_model/dashboard/anonpay_transaction_list_item.dart';
 import 'package:cake_wallet/view_model/dashboard/balance_view_model.dart';
@@ -55,8 +56,6 @@ import 'package:mobx/mobx.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
-import '../../themes/theme_base.dart';
-
 part 'dashboard_view_model.g.dart';
 
 class DashboardViewModel = DashboardViewModelBase with _$DashboardViewModel;
@@ -282,7 +281,8 @@ abstract class DashboardViewModelBase with Store {
       int confirmations = 1;
       if (![WalletType.solana, WalletType.tron].contains(wallet.type)) {
         try {
-          confirmations = appStore.wallet!.transactionHistory.transactions.values.first.confirmations + 1;
+          confirmations =
+              appStore.wallet!.transactionHistory.transactions.values.first.confirmations + 1;
         } catch (_) {}
       }
       return length * confirmations;
@@ -370,6 +370,8 @@ abstract class DashboardViewModelBase with Store {
   @observable
   bool isShowThirdYatIntroduction;
 
+  @computed
+  bool get isDarkTheme => appStore.themeStore.currentTheme.isDark;
   @computed
   String get address => wallet.walletAddresses.address;
 
@@ -411,16 +413,14 @@ abstract class DashboardViewModelBase with Store {
       ordersStore.orders.where((item) => item.order.walletId == wallet.id).toList();
 
   @computed
-  List<AnonpayTransactionListItem> get anonpayTransactions =>
-      anonpayTransactionsStore.transactions
-          .where((item) => item.transaction.walletId == wallet.id)
-          .toList();
+  List<AnonpayTransactionListItem> get anonpayTransactions => anonpayTransactionsStore.transactions
+      .where((item) => item.transaction.walletId == wallet.id)
+      .toList();
 
   @computed
-  List<PayjoinTransactionListItem> get payjoinTransactions =>
-      payjoinTransactionsStore.transactions
-          .where((item) => item.session.walletId == wallet.id)
-          .toList();
+  List<PayjoinTransactionListItem> get payjoinTransactions => payjoinTransactionsStore.transactions
+      .where((item) => item.session.walletId == wallet.id)
+      .toList();
 
   @computed
   double get price => balanceViewModel.price;
@@ -433,8 +433,8 @@ abstract class DashboardViewModelBase with Store {
   List<ActionListItem> get items {
     final _items = <ActionListItem>[];
 
-    _items.addAll(transactionFilterStore
-        .filtered(transactions: [...transactions, ...anonpayTransactions]));
+    _items.addAll(
+        transactionFilterStore.filtered(transactions: [...transactions, ...anonpayTransactions]));
     _items.addAll(tradeFilterStore.filtered(trades: trades, wallet: wallet));
     _items.addAll(orders);
 
@@ -442,11 +442,9 @@ abstract class DashboardViewModelBase with Store {
       final _payjoinTransactions = payjoinTransactions;
       _items.forEach((e) {
         if (e is TransactionListItem &&
-            _payjoinTransactions
-                .any((t) => t.session.txId == e.transaction.id)) {
-          _payjoinTransactions
-              .firstWhere((t) => t.session.txId == e.transaction.id)
-              .transaction = e.transaction;
+            _payjoinTransactions.any((t) => t.session.txId == e.transaction.id)) {
+          _payjoinTransactions.firstWhere((t) => t.session.txId == e.transaction.id).transaction =
+              e.transaction;
         }
       });
       _items.addAll(_payjoinTransactions);
@@ -718,26 +716,18 @@ abstract class DashboardViewModelBase with Store {
   @action
   double getShadowSpread() {
     double spread = 0;
-    if (settingsStore.currentTheme.type == ThemeType.bright)
+    if (!appStore.themeStore.currentTheme.isDark)
       spread = 0;
-    else if (settingsStore.currentTheme.type == ThemeType.light)
-      spread = 0;
-    else if (settingsStore.currentTheme.type == ThemeType.dark)
-      spread = 0;
-    else if (settingsStore.currentTheme.type == ThemeType.oled) spread = 0;
+    else if (appStore.themeStore.currentTheme.isDark) spread = 0;
     return spread;
   }
 
   @action
   double getShadowBlur() {
     double blur = 0;
-    if (settingsStore.currentTheme.type == ThemeType.bright)
+    if (!appStore.themeStore.currentTheme.isDark)
       blur = 0;
-    else if (settingsStore.currentTheme.type == ThemeType.light)
-      blur = 0;
-    else if (settingsStore.currentTheme.type == ThemeType.dark)
-      blur = 0;
-    else if (settingsStore.currentTheme.type == ThemeType.oled) blur = 0;
+    else if (appStore.themeStore.currentTheme.isDark) blur = 0;
     return blur;
   }
 
@@ -954,7 +944,8 @@ abstract class DashboardViewModelBase with Store {
       int confirmations = 1;
       if (![WalletType.solana, WalletType.tron].contains(wallet.type)) {
         try {
-          confirmations = appStore.wallet!.transactionHistory.transactions.values.first.confirmations + 1;
+          confirmations =
+              appStore.wallet!.transactionHistory.transactions.values.first.confirmations + 1;
         } catch (_) {}
       }
       return length * confirmations;

lib/view_model/dashboard/dropdown_filter_item_widget.dart

@@ -1,5 +1,4 @@
 import 'package:auto_size_text/auto_size_text.dart';
-import 'package:cake_wallet/themes/extensions/picker_theme.dart';
 import 'package:flutter/material.dart';
 
 class DropdownFilterList extends StatefulWidget {
@@ -43,11 +42,11 @@ class _DropdownFilterListState extends State<DropdownFilterList> {
             child: Column(
               mainAxisAlignment: MainAxisAlignment.end,
               children: [
-                Icon(Icons.arrow_drop_down, color: Theme.of(context).extension<PickerTheme>()!.searchIconColor),
+                Icon(Icons.arrow_drop_down, color: Theme.of(context).colorScheme.onSurfaceVariant),
               ],
             ),
           ),
-          dropdownColor: Theme.of(context).extension<PickerTheme>()!.searchBackgroundFillColor,
+          dropdownColor: Theme.of(context).colorScheme.surfaceContainerHighest,
           borderRadius: BorderRadius.circular(10),
           items: widget.items
               .map((item) => DropdownMenuItem<String>(

lib/view_model/payjoin_details_view_model.dart

@@ -5,11 +5,10 @@ import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/screens/trade_details/trade_details_list_card.dart';
 import 'package:cake_wallet/src/screens/trade_details/trade_details_status_item.dart';
 import 'package:cake_wallet/src/screens/transaction_details/standart_list_item.dart';
-import 'package:cake_wallet/store/settings_store.dart';
+import 'package:cake_wallet/themes/core/theme_store.dart';
 import 'package:cake_wallet/utils/date_formatter.dart';
 import 'package:cw_core/payjoin_session.dart';
 import 'package:cw_core/transaction_info.dart';
-import 'package:cw_core/utils/print_verbose.dart';
 import 'package:flutter/widgets.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:mobx/mobx.dart';
@@ -24,7 +23,7 @@ abstract class PayjoinDetailsViewModelBase with Store {
     this.payjoinSessionId,
     this.transactionInfo, {
     required this.payjoinSessionSource,
-    required this.settingsStore,
+    required this.themeStore,
   })  : items = ObservableList<StandartListItem>(),
         payjoinSession = payjoinSessionSource.get(payjoinSessionId)! {
     listener = payjoinSessionSource.watch().listen((e) {
@@ -34,7 +33,7 @@ abstract class PayjoinDetailsViewModelBase with Store {
   }
 
   final Box<PayjoinSession> payjoinSessionSource;
-  final SettingsStore settingsStore;
+  final ThemeStore themeStore;
   final String payjoinSessionId;
   final TransactionInfo? transactionInfo;
 

lib/view_model/restore_from_backup_view_model.dart

@@ -64,7 +64,7 @@ abstract class RestoreFromBackupViewModelBase with Store {
       final store = getIt.get<AppStore>();
       ReactionDisposer? reaction;
       await store.settingsStore.reload(nodeSource: getIt.get<Box<Node>>());
-
+      await store.themeStore.loadSavedTheme(isFromBackup: true);
       reaction = autorun((_) {
         final wallet = store.wallet;
 

lib/view_model/settings/display_settings_view_model.dart

@@ -1,20 +1,21 @@
 import 'package:cake_wallet/entities/balance_display_mode.dart';
 import 'package:cake_wallet/entities/fiat_currency.dart';
 import 'package:cake_wallet/store/settings_store.dart';
-import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/themes/core/material_base_theme.dart';
 import 'package:mobx/mobx.dart';
 import 'package:cake_wallet/entities/fiat_api_mode.dart';
+import 'package:cake_wallet/themes/core/theme_store.dart';
+import 'package:flutter/material.dart';
 
 part 'display_settings_view_model.g.dart';
 
 class DisplaySettingsViewModel = DisplaySettingsViewModelBase with _$DisplaySettingsViewModel;
 
 abstract class DisplaySettingsViewModelBase with Store {
-  DisplaySettingsViewModelBase(
-    this._settingsStore,
-  );
+  DisplaySettingsViewModelBase(this._settingsStore, this._themeStore);
 
   final SettingsStore _settingsStore;
+  final ThemeStore _themeStore;
 
   @computed
   FiatCurrency get fiatCurrency => _settingsStore.fiatCurrency;
@@ -32,7 +33,10 @@ abstract class DisplaySettingsViewModelBase with Store {
   bool get shouldShowMarketPlaceInDashboard => _settingsStore.shouldShowMarketPlaceInDashboard;
 
   @computed
-  ThemeBase get theme => _settingsStore.currentTheme;
+  ThemeData get theme => _themeStore.currentTheme.themeData;
+
+  @computed
+  ThemeMode get themeMode => _themeStore.themeMode;
 
   @computed
   bool get disabledFiatApiMode => _settingsStore.fiatApiMode == FiatApiMode.disabled;
@@ -58,8 +62,19 @@ abstract class DisplaySettingsViewModelBase with Store {
   }
 
   @action
-  void setTheme(ThemeBase newTheme) {
-    _settingsStore.currentTheme = newTheme;
+  Future<void> onThemeSelected(MaterialThemeBase newTheme) async {
+    await setTheme(newTheme);
+    await setThemeMode(newTheme.themeMode);
+  }
+
+  @action
+  Future<void> setTheme(MaterialThemeBase newTheme) async {
+    await _themeStore.setTheme(newTheme);
+  }
+
+  @action
+  Future<void> setThemeMode(ThemeMode value) async {
+    await _themeStore.setThemeMode(value);
   }
 
   @action
@@ -72,5 +87,4 @@ abstract class DisplaySettingsViewModelBase with Store {
 
   @action
   void setShowAddressBookPopup(bool value) => _settingsStore.showAddressBookPopupEnabled = value;
-
 }

lib/view_model/trade_details_view_model.dart

@@ -20,7 +20,7 @@ import 'package:cake_wallet/src/screens/trade_details/trade_details_list_card.da
 import 'package:cake_wallet/src/screens/trade_details/trade_details_status_item.dart';
 import 'package:cake_wallet/src/screens/trade_details/trade_provider_unsupported_item.dart';
 import 'package:cake_wallet/src/screens/transaction_details/standart_list_item.dart';
-import 'package:cake_wallet/store/settings_store.dart';
+import 'package:cake_wallet/store/app_store.dart';
 import 'package:cake_wallet/utils/date_formatter.dart';
 import 'package:cake_wallet/utils/show_bar.dart';
 import 'package:collection/collection.dart';
@@ -39,13 +39,13 @@ abstract class TradeDetailsViewModelBase with Store {
   TradeDetailsViewModelBase({
     required Trade tradeForDetails,
     required this.trades,
-    required this.settingsStore,
+    required this.appStore,
   })  : items = ObservableList<StandartListItem>(),
         trade = trades.values.firstWhereOrNull((element) => element.id == tradeForDetails.id) ??
             tradeForDetails {
     switch (trade.provider) {
       case ExchangeProviderDescription.changeNow:
-        _provider = ChangeNowExchangeProvider(settingsStore: settingsStore);
+        _provider = ChangeNowExchangeProvider(settingsStore: appStore.settingsStore);
         break;
       case ExchangeProviderDescription.sideShift:
         _provider = SideShiftExchangeProvider();
@@ -126,7 +126,7 @@ abstract class TradeDetailsViewModelBase with Store {
 
   Timer? timer;
 
-  final SettingsStore settingsStore;
+  final AppStore appStore;
 
   @action
   Future<void> _updateTrade() async {