dark mode toggle and color theme persistence

lib/main.dart

@@ -51,13 +51,16 @@ import 'package:stackwallet/services/notifications_api.dart';
 import 'package:stackwallet/services/notifications_service.dart';
 import 'package:stackwallet/services/trade_service.dart';
 import 'package:stackwallet/services/wallets.dart';
+import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/db_version_migration.dart';
 import 'package:stackwallet/utilities/enums/backup_frequency_type.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/prefs.dart';
 import 'package:stackwallet/utilities/theme/color_theme.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/dark_colors.dart';
+import 'package:stackwallet/utilities/theme/light_colors.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:window_size/window_size.dart';
 
@@ -147,11 +150,11 @@ void main() async {
 
   switch (colorScheme) {
     case "dark":
-      StackTheme.instance.setTheme(ThemeType.dark);
+      Assets.theme = ThemeType.dark;
       break;
     case "light":
     default:
-      StackTheme.instance.setTheme(ThemeType.light);
+      Assets.theme = ThemeType.light;
   }
 
   // SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
@@ -367,8 +370,12 @@ class _MaterialAppWithThemeState extends ConsumerState<MaterialAppWithTheme>
     _prefs = ref.read(prefsChangeNotifierProvider);
     _wallets = ref.read(walletsChangeNotifierProvider);
 
-    if (Platform.isAndroid) {
-      WidgetsBinding.instance.addPostFrameCallback((_) async {
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      ref.read(colorThemeProvider.state).state =
+          StackColors.fromStackColorTheme(
+              Assets.theme! == ThemeType.dark ? DarkColors() : LightColors());
+
+      if (Platform.isAndroid) {
         // fetch open file if it exists
         await getOpenFile();
 
@@ -382,8 +389,8 @@ class _MaterialAppWithThemeState extends ConsumerState<MaterialAppWithTheme>
           ref.read(openedFromSWBFileStringStateProvider.state).state = null;
         }
         // ref.read(shouldShowLockscreenOnResumeStateProvider.state).state = false;
-      });
-    }
+      }
+    });
 
     super.initState();
   }

lib/notifications/notification_card.dart

@@ -3,7 +3,7 @@ import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/models/notification_model.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -42,7 +42,9 @@ class NotificationCard extends StatelessWidget {
                       ),
                       child: SvgPicture.asset(
                         notification.iconAssetName,
-                        color: StackTheme.instance.color.accentColorDark,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .accentColorDark,
                         width: 24,
                         height: 24,
                       ),
@@ -83,7 +85,10 @@ class NotificationCard extends StatelessWidget {
         if (notification.read)
           Positioned.fill(
             child: RoundedContainer(
-              color: StackTheme.instance.color.background.withOpacity(0.5),
+              color: Theme.of(context)
+                  .extension<StackColors>()!
+                  .background
+                  .withOpacity(0.5),
             ),
           ),
       ],

lib/notifications/show_flush_bar.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 Future<dynamic> showFloatingFlushBar({
   required FlushBarType type,
@@ -19,16 +19,16 @@ Future<dynamic> showFloatingFlushBar({
   Color fg;
   switch (type) {
     case FlushBarType.success:
-      fg = StackTheme.instance.color.snackBarTextSuccess;
-      bg = StackTheme.instance.color.snackBarBackSuccess;
+      fg = Theme.of(context).extension<StackColors>()!.snackBarTextSuccess;
+      bg = Theme.of(context).extension<StackColors>()!.snackBarBackSuccess;
       break;
     case FlushBarType.info:
-      fg = StackTheme.instance.color.snackBarTextInfo;
-      bg = StackTheme.instance.color.snackBarBackInfo;
+      fg = Theme.of(context).extension<StackColors>()!.snackBarTextInfo;
+      bg = Theme.of(context).extension<StackColors>()!.snackBarBackInfo;
       break;
     case FlushBarType.warning:
-      fg = StackTheme.instance.color.snackBarTextError;
-      bg = StackTheme.instance.color.snackBarBackError;
+      fg = Theme.of(context).extension<StackColors>()!.snackBarTextError;
+      bg = Theme.of(context).extension<StackColors>()!.snackBarBackError;
       break;
   }
   final bar = Flushbar<dynamic>(

lib/pages/add_wallet_views/add_wallet_view/add_wallet_view.dart

@@ -9,7 +9,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
@@ -118,7 +118,8 @@ class _AddWalletViewState extends State<AddWalletView> {
                                   Assets.svg.search,
                                   width: 24,
                                   height: 24,
-                                  color: StackTheme.instance.color
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
                                       .textFieldDefaultSearchIconLeft,
                                 ),
                               ),
@@ -188,7 +189,7 @@ class _AddWalletViewState extends State<AddWalletView> {
           ),
         ),
         body: Container(
-          color: StackTheme.instance.color.background,
+          color: Theme.of(context).extension<StackColors>()!.background,
           child: Padding(
             padding: const EdgeInsets.all(16),
             child: Column(

lib/pages/add_wallet_views/add_wallet_view/sub_widgets/coin_select_item.dart

@@ -6,7 +6,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 
 class CoinSelectItem extends ConsumerWidget {
@@ -28,13 +28,13 @@ class CoinSelectItem extends ConsumerWidget {
       decoration: BoxDecoration(
         // color: selectedCoin == coin ? CFColors.selection : CFColors.white,
         color: selectedCoin == coin
-            ? StackTheme.instance.color.textFieldActiveBG
-            : StackTheme.instance.color.popupBG,
+            ? Theme.of(context).extension<StackColors>()!.textFieldActiveBG
+            : Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius:
             BorderRadius.circular(Constants.size.circularBorderRadius),
       ),
       child: MaterialButton(
-        // splashColor: StackTheme.instance.color.highlight,
+        // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         key: Key("coinSelectItemButtonKey_${coin.name}"),
         padding: isDesktop
             ? const EdgeInsets.only(left: 24)
@@ -78,7 +78,9 @@ class CoinSelectItem extends ConsumerWidget {
                     height: 24,
                     child: SvgPicture.asset(
                       Assets.svg.check,
-                      color: StackTheme.instance.color.accentColorDark,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .accentColorDark,
                     ),
                   ),
                 ),

lib/pages/add_wallet_views/add_wallet_view/sub_widgets/next_button.dart

@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class AddWalletNextButton extends ConsumerWidget {
   const AddWalletNextButton({
@@ -34,8 +34,12 @@ class AddWalletNextButton extends ConsumerWidget {
               );
             },
       style: enabled
-          ? StackTheme.instance.getPrimaryEnabledButtonColor(context)
-          : StackTheme.instance.getPrimaryDisabledButtonColor(context),
+          ? Theme.of(context)
+              .extension<StackColors>()!
+              .getPrimaryEnabledButtonColor(context)
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .getPrimaryDisabledButtonColor(context),
       child: Text(
         "Next",
         style: isDesktop

lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart

@@ -5,7 +5,7 @@ import 'package:stackwallet/pages/add_wallet_views/create_or_restore_wallet_view
 import 'package:stackwallet/pages/add_wallet_views/create_or_restore_wallet_view/sub_widgets/create_wallet_button_group.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/exit_to_my_stack_button.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
@@ -81,7 +81,7 @@ class CreateOrRestoreWalletView extends StatelessWidget {
           ),
         ),
         body: Container(
-          color: StackTheme.instance.color.background,
+          color: Theme.of(context).extension<StackColors>()!.background,
           child: Padding(
             padding: const EdgeInsets.all(16),
             child: Column(

lib/pages/add_wallet_views/create_or_restore_wallet_view/sub_widgets/create_wallet_button_group.dart

@@ -3,7 +3,7 @@ import 'package:stackwallet/pages/add_wallet_views/name_your_wallet_view/name_yo
 import 'package:stackwallet/utilities/enums/add_wallet_type_enum.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:tuple/tuple.dart';
 
 class CreateWalletButtonGroup extends StatelessWidget {
@@ -28,7 +28,9 @@ class CreateWalletButtonGroup extends StatelessWidget {
             minWidth: isDesktop ? 480 : 0,
           ),
           child: TextButton(
-            style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getPrimaryEnabledButtonColor(context),
             onPressed: () {
               Navigator.of(context).pushNamed(
                 NameYourWalletView.routeName,
@@ -55,7 +57,9 @@ class CreateWalletButtonGroup extends StatelessWidget {
             minWidth: isDesktop ? 480 : 0,
           ),
           child: TextButton(
-            style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getSecondaryEnabledButtonColor(context),
             onPressed: () {
               Navigator.of(context).pushNamed(
                 NameYourWalletView.routeName,
@@ -70,7 +74,9 @@ class CreateWalletButtonGroup extends StatelessWidget {
               style: isDesktop
                   ? STextStyles.desktopButtonSecondaryEnabled(context)
                   : STextStyles.button(context).copyWith(
-                      color: StackTheme.instance.color.accentColorDark),
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .accentColorDark),
             ),
           ),
         ),

lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart

@@ -15,7 +15,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/name_generator.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
@@ -125,7 +125,7 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
           ),
         ),
         body: Container(
-          color: StackTheme.instance.color.background,
+          color: Theme.of(context).extension<StackColors>()!.background,
           child: Padding(
             padding: const EdgeInsets.all(16),
             child: LayoutBuilder(
@@ -268,7 +268,9 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
                 "Roll the dice to pick a random name.",
                 style: isDesktop
                     ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                        color: StackTheme.instance.color.textSubtitle1,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textSubtitle1,
                       )
                     : STextStyles.itemSubtitle(context),
               ),
@@ -340,8 +342,12 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
                     }
                   : null,
               style: _nextEnabled
-                  ? StackTheme.instance.getPrimaryEnabledButtonColor(context)
-                  : StackTheme.instance.getPrimaryDisabledButtonColor(context),
+                  ? Theme.of(context)
+                      .extension<StackColors>()!
+                      .getPrimaryEnabledButtonColor(context)
+                  : Theme.of(context)
+                      .extension<StackColors>()!
+                      .getPrimaryDisabledButtonColor(context),
               child: Text(
                 "Next",
                 style: isDesktop

lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart

@@ -18,7 +18,7 @@ import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
@@ -141,13 +141,17 @@ class _NewWalletRecoveryPhraseViewState
                       child: AspectRatio(
                         aspectRatio: 1,
                         child: AppBarIconButton(
-                          color: StackTheme.instance.color.background,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .background,
                           shadows: const [],
                           icon: SvgPicture.asset(
                             Assets.svg.copy,
                             width: 24,
                             height: 24,
-                            color: StackTheme.instance.color.topNavIconPrimary,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .topNavIconPrimary,
                           ),
                           onPressed: () async {
                             await _copy();
@@ -158,7 +162,7 @@ class _NewWalletRecoveryPhraseViewState
                   ],
                 ),
           body: Container(
-            color: StackTheme.instance.color.background,
+            color: Theme.of(context).extension<StackColors>()!.background,
             width: isDesktop ? 600 : null,
             child: Padding(
               padding: isDesktop
@@ -195,8 +199,10 @@ class _NewWalletRecoveryPhraseViewState
                   Container(
                     decoration: BoxDecoration(
                       color: isDesktop
-                          ? StackTheme.instance.color.background
-                          : StackTheme.instance.color.popupBG,
+                          ? Theme.of(context)
+                              .extension<StackColors>()!
+                              .background
+                          : Theme.of(context).extension<StackColors>()!.popupBG,
                       borderRadius: BorderRadius.circular(
                           Constants.size.circularBorderRadius),
                     ),
@@ -210,8 +216,9 @@ class _NewWalletRecoveryPhraseViewState
                         style: isDesktop
                             ? STextStyles.desktopSubtitleH2(context)
                             : STextStyles.label(context).copyWith(
-                                color:
-                                    StackTheme.instance.color.accentColorDark),
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark),
                       ),
                     ),
                   ),
@@ -286,7 +293,8 @@ class _NewWalletRecoveryPhraseViewState
                           arguments: Tuple2(_manager, _mnemonic),
                         ));
                       },
-                      style: StackTheme.instance
+                      style: Theme.of(context)
+                          .extension<StackColors>()!
                           .getPrimaryEnabledButtonColor(context),
                       child: Text(
                         "I saved my recovery phrase",

lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/sub_widgets/mnemonic_table_item.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
 class MnemonicTableItem extends StatelessWidget {
@@ -29,10 +29,14 @@ class MnemonicTableItem extends StatelessWidget {
             number.toString(),
             style: isDesktop
                 ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                    color: StackTheme.instance.color.textSubtitle2,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textSubtitle2,
                   )
                 : STextStyles.baseXS(context).copyWith(
-                    color: StackTheme.instance.color.textSubtitle2,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textSubtitle2,
                     fontSize: 10,
                   ),
           ),
@@ -43,7 +47,7 @@ class MnemonicTableItem extends StatelessWidget {
             word,
             style: isDesktop
                 ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                    color: StackTheme.instance.color.textDark,
+                    color: Theme.of(context).extension<StackColors>()!.textDark,
                   )
                 : STextStyles.baseXS(context),
           ),

lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart

@@ -13,7 +13,7 @@ import 'package:stackwallet/utilities/default_nodes.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
@@ -270,9 +270,11 @@ class _NewWalletRecoveryPhraseWarningViewState
                                 }
                               : null,
                           style: ref.read(checkBoxStateProvider.state).state
-                              ? StackTheme.instance
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryEnabledButtonColor(context)
-                              : StackTheme.instance
+                              : Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryDisabledButtonColor(context),
                           child: Text(
                             "View recovery phrase",

lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class ConfirmRecoveryDialog extends StatelessWidget {
@@ -20,7 +20,9 @@ class ConfirmRecoveryDialog extends StatelessWidget {
         message:
             "Restoring your wallet may take a while. Please do not exit this screen once the process is started.",
         leftButton: TextButton(
-          style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getSecondaryEnabledButtonColor(context),
           child: Text(
             "Cancel",
             style: STextStyles.itemSubtitle12(context),
@@ -30,7 +32,9 @@ class ConfirmRecoveryDialog extends StatelessWidget {
           },
         ),
         rightButton: TextButton(
-          style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getPrimaryEnabledButtonColor(context),
           child: Text(
             "Restore",
             style: STextStyles.button(context),

lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/restore_options_view.dart

@@ -10,13 +10,14 @@ import 'package:stackwallet/pages/add_wallet_views/restore_wallet_view/restore_o
 import 'package:stackwallet/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_platform_layout.dart';
 import 'package:stackwallet/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart';
 import 'package:stackwallet/pages/add_wallet_views/restore_wallet_view/sub_widgets/mnemonic_word_count_select_sheet.dart';
+import 'package:stackwallet/providers/ui/color_theme_provider.dart';
 import 'package:stackwallet/providers/ui/verify_recovery_phrase/mnemonic_word_count_state_provider.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
@@ -50,9 +51,11 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
 
   final bool _nextEnabled = true;
   DateTime _restoreFromDate = DateTime.fromMillisecondsSinceEpoch(0);
+  late final Color baseColor;
 
   @override
   void initState() {
+    baseColor = ref.read(colorThemeProvider.state).state.textSubtitle2;
     walletName = widget.walletName;
     coin = widget.coin;
     isDesktop = Util.isDesktop;
@@ -70,43 +73,44 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
     super.dispose();
   }
 
-  final _datePickerTextStyleBase = GoogleFonts.inter(
-    color: StackTheme.instance.color.textSubtitle2,
-    fontSize: 12,
-    fontWeight: FontWeight.w400,
-    letterSpacing: 0.5,
-  );
+  TextStyle get _datePickerTextStyleBase => GoogleFonts.inter(
+        color: baseColor,
+        fontSize: 12,
+        fontWeight: FontWeight.w400,
+        letterSpacing: 0.5,
+      );
   MaterialRoundedDatePickerStyle _buildDatePickerStyle() {
     return MaterialRoundedDatePickerStyle(
       paddingMonthHeader: const EdgeInsets.only(top: 11),
-      colorArrowNext: StackTheme.instance.color.textSubtitle1,
-      colorArrowPrevious: StackTheme.instance.color.textSubtitle1,
+      colorArrowNext: Theme.of(context).extension<StackColors>()!.textSubtitle1,
+      colorArrowPrevious:
+          Theme.of(context).extension<StackColors>()!.textSubtitle1,
       textStyleButtonNegative: _datePickerTextStyleBase.copyWith(
           fontSize: 16, fontWeight: FontWeight.w600),
       textStyleButtonPositive: _datePickerTextStyleBase.copyWith(
           fontSize: 16, fontWeight: FontWeight.w600),
       textStyleCurrentDayOnCalendar: _datePickerTextStyleBase.copyWith(
-        color: StackTheme.instance.color.accentColorDark,
+        color: Theme.of(context).extension<StackColors>()!.accentColorDark,
       ),
       textStyleDayHeader: _datePickerTextStyleBase.copyWith(
-        color: StackTheme.instance.color.accentColorDark,
+        color: Theme.of(context).extension<StackColors>()!.accentColorDark,
         fontSize: 16,
         fontWeight: FontWeight.w600,
       ),
       textStyleDayOnCalendar: _datePickerTextStyleBase,
       textStyleDayOnCalendarDisabled: _datePickerTextStyleBase.copyWith(
-        color: StackTheme.instance.color.textSubtitle3,
+        color: Theme.of(context).extension<StackColors>()!.textSubtitle3,
       ),
       textStyleDayOnCalendarSelected: _datePickerTextStyleBase.copyWith(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
       ),
       textStyleMonthYearHeader: _datePickerTextStyleBase.copyWith(
-        color: StackTheme.instance.color.textSubtitle1,
+        color: Theme.of(context).extension<StackColors>()!.textSubtitle1,
         fontSize: 16,
         fontWeight: FontWeight.w600,
       ),
       textStyleYearButton: _datePickerTextStyleBase.copyWith(
-        color: StackTheme.instance.color.textWhite,
+        color: Theme.of(context).extension<StackColors>()!.textWhite,
         fontSize: 16,
         fontWeight: FontWeight.w600,
       ),
@@ -117,12 +121,12 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
   MaterialRoundedYearPickerStyle _buildYearPickerStyle() {
     return MaterialRoundedYearPickerStyle(
       textStyleYear: _datePickerTextStyleBase.copyWith(
-        color: StackTheme.instance.color.textSubtitle2,
+        color: Theme.of(context).extension<StackColors>()!.textSubtitle2,
         fontWeight: FontWeight.w600,
         fontSize: 16,
       ),
       textStyleYearSelected: _datePickerTextStyleBase.copyWith(
-        color: StackTheme.instance.color.accentColorDark,
+        color: Theme.of(context).extension<StackColors>()!.accentColorDark,
         fontWeight: FontWeight.w600,
         fontSize: 18,
       ),
@@ -164,8 +168,8 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
       initialDate: DateTime.now(),
       height: height * 0.5,
       theme: ThemeData(
-        primarySwatch:
-            Util.createMaterialColor(StackTheme.instance.color.accentColorDark),
+        primarySwatch: Util.createMaterialColor(
+            Theme.of(context).extension<StackColors>()!.accentColorDark),
       ),
       //TODO pick a better initial date
       // 2007 chosen as that is just before bitcoin launched
@@ -264,7 +268,9 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
                   "Choose start date",
                   style: isDesktop
                       ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                          color: StackTheme.instance.color.textDark3,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .textDark3,
                         )
                       : STextStyles.smallMed12(context),
                   textAlign: TextAlign.left,
@@ -293,7 +299,9 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
                       "Choose the date you made the wallet (approximate is fine)",
                       style: isDesktop
                           ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                              color: StackTheme.instance.color.textSubtitle1,
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .textSubtitle1,
                             )
                           : STextStyles.smallMed12(context).copyWith(
                               fontSize: 10,
@@ -309,7 +317,9 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
                 "Choose recovery phrase length",
                 style: isDesktop
                     ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                        color: StackTheme.instance.color.textDark3,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textDark3,
                       )
                     : STextStyles.smallMed12(context),
                 textAlign: TextAlign.left,
@@ -344,21 +354,26 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
                       Assets.svg.chevronDown,
                       width: 12,
                       height: 6,
-                      color: StackTheme
-                          .instance.color.textFieldActiveSearchIconRight,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .textFieldActiveSearchIconRight,
                     ),
                     buttonPadding: const EdgeInsets.symmetric(
                       horizontal: 16,
                       vertical: 8,
                     ),
                     buttonDecoration: BoxDecoration(
-                      color: StackTheme.instance.color.textFieldDefaultBG,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .textFieldDefaultBG,
                       borderRadius: BorderRadius.circular(
                         Constants.size.circularBorderRadius,
                       ),
                     ),
                     dropdownDecoration: BoxDecoration(
-                      color: StackTheme.instance.color.textFieldDefaultBG,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .textFieldDefaultBG,
                       borderRadius: BorderRadius.circular(
                         Constants.size.circularBorderRadius,
                       ),

lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/mobile_mnemonic_length_selector.dart

@@ -5,7 +5,7 @@ import 'package:stackwallet/providers/ui/verify_recovery_phrase/mnemonic_word_co
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class MobileMnemonicLengthSelector extends ConsumerWidget {
   const MobileMnemonicLengthSelector({
@@ -29,7 +29,7 @@ class MobileMnemonicLengthSelector extends ConsumerWidget {
             horizontal: 12,
           ),
           child: RawMaterialButton(
-            splashColor: StackTheme.instance.color.highlight,
+            splashColor: Theme.of(context).extension<StackColors>()!.highlight,
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(
                 Constants.size.circularBorderRadius,
@@ -47,7 +47,8 @@ class MobileMnemonicLengthSelector extends ConsumerWidget {
                   Assets.svg.chevronDown,
                   width: 8,
                   height: 4,
-                  color: StackTheme.instance.color.textSubtitle2,
+                  color:
+                      Theme.of(context).extension<StackColors>()!.textSubtitle2,
                 ),
               ],
             ),

lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_from_date_picker.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class RestoreFromDatePicker extends StatefulWidget {
   const RestoreFromDatePicker({Key? key, required this.onTap})
@@ -50,7 +50,7 @@ class _RestoreFromDatePickerState extends State<RestoreFromDatePicker> {
                 ),
                 SvgPicture.asset(
                   Assets.svg.calendar,
-                  color: StackTheme.instance.color.textDark3,
+                  color: Theme.of(context).extension<StackColors>()!.textDark3,
                   width: 16,
                   height: 16,
                 ),

lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_next_button.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class RestoreOptionsNextButton extends StatelessWidget {
   const RestoreOptionsNextButton({
@@ -21,8 +21,12 @@ class RestoreOptionsNextButton extends StatelessWidget {
       child: TextButton(
         onPressed: onPressed,
         style: onPressed != null
-            ? StackTheme.instance.getPrimaryEnabledButtonColor(context)
-            : StackTheme.instance.getPrimaryDisabledButtonColor(context),
+            ? Theme.of(context)
+                .extension<StackColors>()!
+                .getPrimaryEnabledButtonColor(context)
+            : Theme.of(context)
+                .extension<StackColors>()!
+                .getPrimaryDisabledButtonColor(context),
         child: Text(
           "Next",
           style: STextStyles.button(context),

lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_platform_layout.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class RestoreOptionsPlatformLayout extends StatelessWidget {
   const RestoreOptionsPlatformLayout({
@@ -17,7 +17,7 @@ class RestoreOptionsPlatformLayout extends StatelessWidget {
       return child;
     } else {
       return Container(
-        color: StackTheme.instance.color.background,
+        color: Theme.of(context).extension<StackColors>()!.background,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: LayoutBuilder(

lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart

@@ -33,7 +33,7 @@ import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/enums/form_input_status_enum.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/clipboard_icon.dart';
@@ -354,27 +354,35 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
     Widget? suffixIcon;
     switch (status) {
       case FormInputStatus.empty:
-        color = StackTheme.instance.color.textFieldDefaultBG;
-        prefixColor = StackTheme.instance.color.textSubtitle2;
+        color = Theme.of(context).extension<StackColors>()!.textFieldDefaultBG;
+        prefixColor = Theme.of(context).extension<StackColors>()!.textSubtitle2;
         break;
       case FormInputStatus.invalid:
-        color = StackTheme.instance.color.textFieldErrorBG;
-        prefixColor = StackTheme.instance.color.textFieldErrorSearchIconLeft;
+        color = Theme.of(context).extension<StackColors>()!.textFieldErrorBG;
+        prefixColor = Theme.of(context)
+            .extension<StackColors>()!
+            .textFieldErrorSearchIconLeft;
         suffixIcon = SvgPicture.asset(
           Assets.svg.alertCircle,
           width: 16,
           height: 16,
-          color: StackTheme.instance.color.textFieldErrorSearchIconRight,
+          color: Theme.of(context)
+              .extension<StackColors>()!
+              .textFieldErrorSearchIconRight,
         );
         break;
       case FormInputStatus.valid:
-        color = StackTheme.instance.color.textFieldSuccessBG;
-        prefixColor = StackTheme.instance.color.textFieldSuccessSearchIconLeft;
+        color = Theme.of(context).extension<StackColors>()!.textFieldSuccessBG;
+        prefixColor = Theme.of(context)
+            .extension<StackColors>()!
+            .textFieldSuccessSearchIconLeft;
         suffixIcon = SvgPicture.asset(
           Assets.svg.checkCircle,
           width: 16,
           height: 16,
-          color: StackTheme.instance.color.textFieldSuccessSearchIconRight,
+          color: Theme.of(context)
+              .extension<StackColors>()!
+              .textFieldSuccessSearchIconRight,
         );
         break;
     }
@@ -547,11 +555,13 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
                 key: const Key("restoreWalletViewQrCodeButton"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: QrCodeIcon(
                   width: 20,
                   height: 20,
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                 ),
                 onPressed: scanMnemonicQr,
               ),
@@ -569,11 +579,13 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
                 key: const Key("restoreWalletPasteButton"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: ClipboardIcon(
                   width: 20,
                   height: 20,
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                 ),
                 onPressed: pasteMnemonic,
               ),
@@ -582,7 +594,7 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
         ],
       ),
       body: Container(
-        color: StackTheme.instance.color.background,
+        color: Theme.of(context).extension<StackColors>()!.background,
         child: Padding(
           padding: const EdgeInsets.all(12.0),
           child: Column(
@@ -654,7 +666,9 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
                                     },
                                     controller: _controllers[i - 1],
                                     style: STextStyles.field(context).copyWith(
-                                      color: StackTheme.instance.color.overlay,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .overlay,
                                     ),
                                   ),
                                 ),
@@ -672,8 +686,9 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
                                         textAlign: TextAlign.left,
                                         style:
                                             STextStyles.label(context).copyWith(
-                                          color: StackTheme
-                                              .instance.color.textError,
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .textError,
                                         ),
                                       ),
                                     ),
@@ -685,7 +700,8 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
                               top: 8.0,
                             ),
                             child: TextButton(
-                              style: StackTheme.instance
+                              style: Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryEnabledButtonColor(context),
                               onPressed: requestRestore,
                               child: Text(

lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/mnemonic_word_count_select_sheet.dart

@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/providers/ui/verify_recovery_phrase/mnemonic_word_count_state_provider.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class MnemonicWordCountSelectSheet extends ConsumerWidget {
   const MnemonicWordCountSelectSheet({
@@ -23,7 +23,7 @@ class MnemonicWordCountSelectSheet extends ConsumerWidget {
       },
       child: Container(
         decoration: BoxDecoration(
-          color: StackTheme.instance.color.popupBG,
+          color: Theme.of(context).extension<StackColors>()!.popupBG,
           borderRadius: const BorderRadius.vertical(
             top: Radius.circular(20),
           ),
@@ -42,7 +42,9 @@ class MnemonicWordCountSelectSheet extends ConsumerWidget {
               Center(
                 child: Container(
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.color.textFieldDefaultBG,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textFieldDefaultBG,
                     borderRadius: BorderRadius.circular(
                       Constants.size.circularBorderRadius,
                     ),
@@ -96,8 +98,9 @@ class MnemonicWordCountSelectSheet extends ConsumerWidget {
                                   width: 20,
                                   height: 20,
                                   child: Radio(
-                                    activeColor: StackTheme
-                                        .instance.color.radioButtonIconEnabled,
+                                    activeColor: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .radioButtonIconEnabled,
                                     value: lengthOptions[i],
                                     groupValue: ref
                                         .watch(mnemonicWordCountStateProvider

lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restore_failed_dialog.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class RestoreFailedDialog extends ConsumerStatefulWidget {
@@ -45,7 +45,9 @@ class _RestoreFailedDialogState extends ConsumerState<RestoreFailedDialog> {
         title: "Restore failed",
         message: errorMessage,
         rightButton: TextButton(
-          style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getSecondaryEnabledButtonColor(context),
           child: Text(
             "Ok",
             style: STextStyles.itemSubtitle12(context),

lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restore_succeeded_dialog.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class RestoreSucceededDialog extends StatelessWidget {
@@ -17,10 +17,12 @@ class RestoreSucceededDialog extends StatelessWidget {
         Assets.svg.checkCircle,
         width: 24,
         height: 24,
-        color: StackTheme.instance.color.accentColorGreen,
+        color: Theme.of(context).extension<StackColors>()!.accentColorGreen,
       ),
       rightButton: TextButton(
-        style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+        style: Theme.of(context)
+            .extension<StackColors>()!
+            .getSecondaryEnabledButtonColor(context),
         child: Text(
           "Ok",
           style: STextStyles.itemSubtitle12(context),

lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restoring_dialog.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class RestoringDialog extends StatefulWidget {
@@ -62,10 +62,13 @@ class _RestoringDialogState extends State<RestoringDialog>
           child: SvgPicture.asset(Assets.svg.arrowRotate3,
               width: 24,
               height: 24,
-              color: StackTheme.instance.color.accentColorDark),
+              color:
+                  Theme.of(context).extension<StackColors>()!.accentColorDark),
         ),
         rightButton: TextButton(
-          style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getSecondaryEnabledButtonColor(context),
           child: Text(
             "Cancel",
             style: STextStyles.itemSubtitle12(context),

lib/pages/add_wallet_views/verify_recovery_phrase_view/sub_widgets/word_table_item.dart

@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class WordTableItem extends ConsumerWidget {
   const WordTableItem({
@@ -25,14 +25,14 @@ class WordTableItem extends ConsumerWidget {
     return Container(
       decoration: BoxDecoration(
         color: selectedWord == word
-            ? StackTheme.instance.color.snackBarBackInfo
-            : StackTheme.instance.color.popupBG,
+            ? Theme.of(context).extension<StackColors>()!.snackBarBackInfo
+            : Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: BorderRadius.circular(
           Constants.size.circularBorderRadius,
         ),
       ),
       child: MaterialButton(
-        splashColor: StackTheme.instance.color.highlight,
+        splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         key: Key("coinSelectItemButtonKey_$word"),
         padding: isDesktop
             ? const EdgeInsets.symmetric(
@@ -56,7 +56,8 @@ class WordTableItem extends ConsumerWidget {
               textAlign: TextAlign.center,
               style: isDesktop
                   ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                      color: StackTheme.instance.color.textDark,
+                      color:
+                          Theme.of(context).extension<StackColors>()!.textDark,
                     )
                   : STextStyles.baseXS(context),
             ),

lib/pages/add_wallet_views/verify_recovery_phrase_view/verify_recovery_phrase_view.dart

@@ -15,7 +15,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
@@ -263,7 +263,9 @@ class _VerifyRecoveryPhraseViewState
                 ),
                 Container(
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.color.textFieldDefaultBG,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textFieldDefaultBG,
                     borderRadius: BorderRadius.circular(
                         Constants.size.circularBorderRadius),
                   ),
@@ -322,9 +324,11 @@ class _VerifyRecoveryPhraseViewState
                                     }
                                   : null,
                               style: selectedWord.isNotEmpty
-                                  ? StackTheme.instance
+                                  ? Theme.of(context)
+                                      .extension<StackColors>()!
                                       .getPrimaryEnabledButtonColor(context)
-                                  : StackTheme.instance
+                                  : Theme.of(context)
+                                      .extension<StackColors>()!
                                       .getPrimaryDisabledButtonColor(context),
                               child: isDesktop
                                   ? Text(

lib/pages/address_book_views/address_book_view.dart

@@ -12,7 +12,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/address_book_card.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
@@ -102,7 +102,7 @@ class _AddressBookViewState extends ConsumerState<AddressBookView> {
         addressBookServiceProvider.select((value) => value.addressBookEntries));
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -126,10 +126,12 @@ class _AddressBookViewState extends ConsumerState<AddressBookView> {
                 key: const Key("addressBookFilterViewButton"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: SvgPicture.asset(
                   Assets.svg.filter,
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                   width: 20,
                   height: 20,
                 ),
@@ -153,10 +155,12 @@ class _AddressBookViewState extends ConsumerState<AddressBookView> {
                 key: const Key("addressBookAddNewContactViewButton"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: SvgPicture.asset(
                   Assets.svg.plus,
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                   width: 20,
                   height: 20,
                 ),

lib/pages/address_book_views/subviews/add_address_book_entry_view.dart

@@ -14,7 +14,7 @@ import 'package:stackwallet/utilities/barcode_scanner_interface.dart';
 import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/emoji_select_sheet.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
@@ -93,7 +93,7 @@ class _AddAddressBookEntryViewState
     debugPrint("BUILD: $runtimeType");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -123,12 +123,16 @@ class _AddAddressBookEntryViewState
                 key: const Key("addAddressBookEntryFavoriteButtonKey"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: SvgPicture.asset(
                   Assets.svg.star,
                   color: _isFavorite
-                      ? StackTheme.instance.color.favoriteStarActive
-                      : StackTheme.instance.color.favoriteStarInactive,
+                      ? Theme.of(context)
+                          .extension<StackColors>()!
+                          .favoriteStarActive
+                      : Theme.of(context)
+                          .extension<StackColors>()!
+                          .favoriteStarInactive,
                   width: 20,
                   height: 20,
                 ),
@@ -200,8 +204,9 @@ class _AddAddressBookEntryViewState
                                 width: 48,
                                 decoration: BoxDecoration(
                                   borderRadius: BorderRadius.circular(24),
-                                  color: StackTheme
-                                      .instance.color.textFieldActiveBG,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .textFieldActiveBG,
                                 ),
                                 child: Center(
                                   child: _selectedEmoji == null
@@ -224,21 +229,24 @@ class _AddAddressBookEntryViewState
                                   width: 14,
                                   decoration: BoxDecoration(
                                       borderRadius: BorderRadius.circular(14),
-                                      color: StackTheme
-                                          .instance.color.accentColorDark),
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark),
                                   child: Center(
                                     child: _selectedEmoji == null
                                         ? SvgPicture.asset(
                                             Assets.svg.plus,
-                                            color: StackTheme
-                                                .instance.color.textWhite,
+                                            color: Theme.of(context)
+                                                .extension<StackColors>()!
+                                                .textWhite,
                                             width: 12,
                                             height: 12,
                                           )
                                         : SvgPicture.asset(
                                             Assets.svg.thickX,
-                                            color: StackTheme
-                                                .instance.color.textWhite,
+                                            color: Theme.of(context)
+                                                .extension<StackColors>()!
+                                                .textWhite,
                                             width: 8,
                                             height: 8,
                                           ),
@@ -343,13 +351,15 @@ class _AddAddressBookEntryViewState
                         children: [
                           Expanded(
                             child: TextButton(
-                              style: StackTheme.instance
+                              style: Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getSecondaryEnabledButtonColor(context),
                               child: Text(
                                 "Cancel",
                                 style: STextStyles.button(context).copyWith(
-                                    color: StackTheme
-                                        .instance.color.accentColorDark),
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .accentColorDark),
                               ),
                               onPressed: () async {
                                 if (FocusScope.of(context).hasFocus) {
@@ -384,9 +394,11 @@ class _AddAddressBookEntryViewState
 
                                 return TextButton(
                                   style: shouldEnableSave
-                                      ? StackTheme.instance
+                                      ? Theme.of(context)
+                                          .extension<StackColors>()!
                                           .getPrimaryEnabledButtonColor(context)
-                                      : StackTheme.instance
+                                      : Theme.of(context)
+                                          .extension<StackColors>()!
                                           .getPrimaryDisabledButtonColor(
                                               context),
                                   onPressed: shouldEnableSave

lib/pages/address_book_views/subviews/add_new_contact_address_view.dart

@@ -11,7 +11,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/barcode_scanner_interface.dart';
 import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 
 class AddNewContactAddressView extends ConsumerStatefulWidget {
@@ -56,7 +56,7 @@ class _AddNewContactAddressViewState
         .select((value) => value.getContactById(contactId)));
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -99,8 +99,9 @@ class _AddNewContactAddressViewState
                               width: 48,
                               decoration: BoxDecoration(
                                 borderRadius: BorderRadius.circular(24),
-                                color:
-                                    StackTheme.instance.color.textFieldActiveBG,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textFieldActiveBG,
                               ),
                               child: Center(
                                 child: contact.emojiChar == null
@@ -145,13 +146,15 @@ class _AddNewContactAddressViewState
                           children: [
                             Expanded(
                               child: TextButton(
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getSecondaryEnabledButtonColor(context),
                                 child: Text(
                                   "Cancel",
                                   style: STextStyles.button(context).copyWith(
-                                      color: StackTheme
-                                          .instance.color.accentColorDark),
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark),
                                 ),
                                 onPressed: () async {
                                   if (FocusScope.of(context).hasFocus) {
@@ -176,10 +179,12 @@ class _AddNewContactAddressViewState
 
                                   return TextButton(
                                     style: shouldEnableSave
-                                        ? StackTheme.instance
+                                        ? Theme.of(context)
+                                            .extension<StackColors>()!
                                             .getPrimaryEnabledButtonColor(
                                                 context)
-                                        : StackTheme.instance
+                                        : Theme.of(context)
+                                            .extension<StackColors>()!
                                             .getPrimaryDisabledButtonColor(
                                                 context),
                                     onPressed: shouldEnableSave

lib/pages/address_book_views/subviews/address_book_filter_view.dart

@@ -4,7 +4,7 @@ import 'package:stackwallet/providers/global/prefs_provider.dart';
 import 'package:stackwallet/providers/ui/address_book_providers/address_book_filter_provider.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -42,9 +42,9 @@ class _AddressBookFilterViewState extends ConsumerState<AddressBookFilterView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
-        backgroundColor: StackTheme.instance.color.background,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
         leading: AppBarBackButton(
           onPressed: () async {
             Navigator.of(context).pop();

lib/pages/address_book_views/subviews/coin_select_sheet.dart

@@ -6,7 +6,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class CoinSelectSheet extends StatelessWidget {
   const CoinSelectSheet({Key? key}) : super(key: key);
@@ -18,7 +18,7 @@ class CoinSelectSheet extends StatelessWidget {
     coins_.remove(Coin.firoTestNet);
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: const BorderRadius.vertical(
           top: Radius.circular(20),
         ),
@@ -39,7 +39,9 @@ class CoinSelectSheet extends StatelessWidget {
               Center(
                 child: Container(
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.color.textFieldDefaultBG,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textFieldDefaultBG,
                     borderRadius: BorderRadius.circular(
                       Constants.size.circularBorderRadius,
                     ),
@@ -77,7 +79,7 @@ class CoinSelectSheet extends StatelessWidget {
                         return Padding(
                           padding: const EdgeInsets.symmetric(vertical: 4),
                           child: RawMaterialButton(
-                            // splashColor: StackTheme.instance.color.highlight,
+                            // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                             onPressed: () {
                               Navigator.of(context).pop(coin);
                             },

lib/pages/address_book_views/subviews/contact_details_view.dart

@@ -17,7 +17,7 @@ import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
@@ -105,7 +105,7 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
         .select((value) => value.getContactById(_contactId)));
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -129,12 +129,16 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                 key: const Key("contactDetails"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: SvgPicture.asset(
                   Assets.svg.star,
                   color: _contact.isFavorite
-                      ? StackTheme.instance.color.favoriteStarActive
-                      : StackTheme.instance.color.favoriteStarInactive,
+                      ? Theme.of(context)
+                          .extension<StackColors>()!
+                          .favoriteStarActive
+                      : Theme.of(context)
+                          .extension<StackColors>()!
+                          .favoriteStarInactive,
                   width: 20,
                   height: 20,
                 ),
@@ -160,10 +164,12 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                 key: const Key("contactDetailsViewDeleteContactButtonKey"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: SvgPicture.asset(
                   Assets.svg.trash,
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                   width: 20,
                   height: 20,
                 ),
@@ -176,7 +182,8 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                       title: "Delete ${_contact.name}?",
                       message: "Contact will be deleted permanently!",
                       leftButton: TextButton(
-                        style: StackTheme.instance
+                        style: Theme.of(context)
+                            .extension<StackColors>()!
                             .getSecondaryEnabledButtonColor(context),
                         child: Text(
                           "Cancel",
@@ -187,7 +194,8 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                         },
                       ),
                       rightButton: TextButton(
-                        style: StackTheme.instance
+                        style: Theme.of(context)
+                            .extension<StackColors>()!
                             .getPrimaryEnabledButtonColor(context),
                         child: Text(
                           "Delete",
@@ -234,7 +242,9 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                       width: 48,
                       decoration: BoxDecoration(
                         borderRadius: BorderRadius.circular(24),
-                        color: StackTheme.instance.color.textFieldActiveBG,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textFieldActiveBG,
                       ),
                       child: Center(
                         child: _contact.emojiChar == null
@@ -268,7 +278,8 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                           arguments: _contact.id,
                         );
                       },
-                      style: StackTheme.instance
+                      style: Theme.of(context)
+                          .extension<StackColors>()!
                           .getSecondaryEnabledButtonColor(context)!
                           .copyWith(
                             minimumSize: MaterialStateProperty.all<Size>(
@@ -281,8 +292,9 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                             SvgPicture.asset(Assets.svg.pencil,
                                 width: 10,
                                 height: 10,
-                                color:
-                                    StackTheme.instance.color.accentColorDark),
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark),
                             const SizedBox(
                               width: 4,
                             ),
@@ -378,14 +390,16 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                                   );
                                 },
                                 child: RoundedContainer(
-                                  color: StackTheme
-                                      .instance.color.textFieldDefaultBG,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .textFieldDefaultBG,
                                   padding: const EdgeInsets.all(4),
                                   child: SvgPicture.asset(Assets.svg.pencil,
                                       width: 12,
                                       height: 12,
-                                      color: StackTheme
-                                          .instance.color.accentColorDark),
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark),
                                 ),
                               ),
                               const SizedBox(
@@ -404,14 +418,16 @@ class _ContactDetailsViewState extends ConsumerState<ContactDetailsView> {
                                   );
                                 },
                                 child: RoundedContainer(
-                                  color: StackTheme
-                                      .instance.color.textFieldDefaultBG,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .textFieldDefaultBG,
                                   padding: const EdgeInsets.all(4),
                                   child: SvgPicture.asset(Assets.svg.copy,
                                       width: 12,
                                       height: 12,
-                                      color: StackTheme
-                                          .instance.color.accentColorDark),
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark),
                                 ),
                               ),
                             ],

lib/pages/address_book_views/subviews/contact_popup.dart

@@ -14,7 +14,7 @@ import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 import 'package:tuple/tuple.dart';
@@ -71,7 +71,8 @@ class ContactPopUp extends ConsumerWidget {
                   ),
                   child: Container(
                     decoration: BoxDecoration(
-                      color: StackTheme.instance.color.popupBG,
+                      color:
+                          Theme.of(context).extension<StackColors>()!.popupBG,
                       borderRadius: BorderRadius.circular(
                         20,
                       ),
@@ -98,8 +99,9 @@ class ContactPopUp extends ConsumerWidget {
                                       width: 32,
                                       height: 32,
                                       decoration: BoxDecoration(
-                                        color: StackTheme
-                                            .instance.color.textFieldDefaultBG,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textFieldDefaultBG,
                                         borderRadius: BorderRadius.circular(32),
                                       ),
                                       child: contact.id == "default"
@@ -140,7 +142,8 @@ class ContactPopUp extends ConsumerWidget {
                                             arguments: contact.id,
                                           );
                                         },
-                                        style: StackTheme.instance
+                                        style: Theme.of(context)
+                                            .extension<StackColors>()!
                                             .getSecondaryEnabledButtonColor(
                                                 context)!
                                             .copyWith(
@@ -164,7 +167,9 @@ class ContactPopUp extends ConsumerWidget {
                               ),
                               Container(
                                 height: 1,
-                                color: StackTheme.instance.color.background,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .background,
                               ),
                               if (addresses.isEmpty)
                                 Padding(
@@ -260,15 +265,17 @@ class ContactPopUp extends ConsumerWidget {
                                               );
                                             },
                                             child: RoundedContainer(
-                                              color: StackTheme.instance.color
+                                              color: Theme.of(context)
+                                                  .extension<StackColors>()!
                                                   .textFieldDefaultBG,
                                               padding: const EdgeInsets.all(4),
                                               child: SvgPicture.asset(
                                                   Assets.svg.copy,
                                                   width: 12,
                                                   height: 12,
-                                                  color: StackTheme.instance
-                                                      .color.accentColorDark),
+                                                  color: Theme.of(context)
+                                                      .extension<StackColors>()!
+                                                      .accentColorDark),
                                             ),
                                           ),
                                         ],
@@ -311,7 +318,8 @@ class ContactPopUp extends ConsumerWidget {
                                                 }
                                               },
                                               child: RoundedContainer(
-                                                color: StackTheme.instance.color
+                                                color: Theme.of(context)
+                                                    .extension<StackColors>()!
                                                     .textFieldDefaultBG,
                                                 padding:
                                                     const EdgeInsets.all(4),
@@ -320,8 +328,10 @@ class ContactPopUp extends ConsumerWidget {
                                                         .svg.circleArrowUpRight,
                                                     width: 12,
                                                     height: 12,
-                                                    color: StackTheme.instance
-                                                        .color.accentColorDark),
+                                                    color: Theme.of(context)
+                                                        .extension<
+                                                            StackColors>()!
+                                                        .accentColorDark),
                                               ),
                                             ),
                                           ],

lib/pages/address_book_views/subviews/edit_contact_address_view.dart

@@ -11,7 +11,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/barcode_scanner_interface.dart';
 import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 
 class EditContactAddressView extends ConsumerStatefulWidget {
@@ -60,7 +60,7 @@ class _EditContactAddressViewState
         .select((value) => value.getContactById(contactId)));
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -103,8 +103,9 @@ class _EditContactAddressViewState
                               width: 48,
                               decoration: BoxDecoration(
                                 borderRadius: BorderRadius.circular(24),
-                                color:
-                                    StackTheme.instance.color.textFieldActiveBG,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textFieldActiveBG,
                               ),
                               child: Center(
                                 child: contact.emojiChar == null
@@ -180,13 +181,15 @@ class _EditContactAddressViewState
                           children: [
                             Expanded(
                               child: TextButton(
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getSecondaryEnabledButtonColor(context),
                                 child: Text(
                                   "Cancel",
                                   style: STextStyles.button(context).copyWith(
-                                      color: StackTheme
-                                          .instance.color.accentColorDark),
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark),
                                 ),
                                 onPressed: () async {
                                   if (FocusScope.of(context).hasFocus) {
@@ -211,10 +214,12 @@ class _EditContactAddressViewState
 
                                   return TextButton(
                                     style: shouldEnableSave
-                                        ? StackTheme.instance
+                                        ? Theme.of(context)
+                                            .extension<StackColors>()!
                                             .getPrimaryEnabledButtonColor(
                                                 context)
-                                        : StackTheme.instance
+                                        : Theme.of(context)
+                                            .extension<StackColors>()!
                                             .getPrimaryDisabledButtonColor(
                                                 context),
                                     onPressed: shouldEnableSave

lib/pages/address_book_views/subviews/edit_contact_name_emoji_view.dart

@@ -6,7 +6,7 @@ import 'package:stackwallet/providers/global/address_book_service_provider.dart'
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/emoji_select_sheet.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
@@ -68,7 +68,7 @@ class _EditContactNameEmojiViewState
         .select((value) => value.getContactById(contactId)));
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -139,8 +139,9 @@ class _EditContactNameEmojiViewState
                                   width: 48,
                                   decoration: BoxDecoration(
                                     borderRadius: BorderRadius.circular(24),
-                                    color: StackTheme
-                                        .instance.color.textFieldActiveBG,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textFieldActiveBG,
                                   ),
                                   child: Center(
                                     child: _selectedEmoji == null
@@ -163,21 +164,24 @@ class _EditContactNameEmojiViewState
                                     width: 14,
                                     decoration: BoxDecoration(
                                         borderRadius: BorderRadius.circular(14),
-                                        color: StackTheme
-                                            .instance.color.accentColorDark),
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorDark),
                                     child: Center(
                                       child: _selectedEmoji == null
                                           ? SvgPicture.asset(
                                               Assets.svg.plus,
-                                              color: StackTheme
-                                                  .instance.color.textWhite,
+                                              color: Theme.of(context)
+                                                  .extension<StackColors>()!
+                                                  .textWhite,
                                               width: 12,
                                               height: 12,
                                             )
                                           : SvgPicture.asset(
                                               Assets.svg.thickX,
-                                              color: StackTheme
-                                                  .instance.color.textWhite,
+                                              color: Theme.of(context)
+                                                  .extension<StackColors>()!
+                                                  .textWhite,
                                               width: 8,
                                               height: 8,
                                             ),
@@ -235,13 +239,15 @@ class _EditContactNameEmojiViewState
                           children: [
                             Expanded(
                               child: TextButton(
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getSecondaryEnabledButtonColor(context),
                                 child: Text(
                                   "Cancel",
                                   style: STextStyles.button(context).copyWith(
-                                      color: StackTheme
-                                          .instance.color.accentColorDark),
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark),
                                 ),
                                 onPressed: () async {
                                   if (FocusScope.of(context).hasFocus) {
@@ -266,10 +272,12 @@ class _EditContactNameEmojiViewState
 
                                   return TextButton(
                                     style: shouldEnableSave
-                                        ? StackTheme.instance
+                                        ? Theme.of(context)
+                                            .extension<StackColors>()!
                                             .getPrimaryEnabledButtonColor(
                                                 context)
-                                        : StackTheme.instance
+                                        : Theme.of(context)
+                                            .extension<StackColors>()!
                                             .getPrimaryDisabledButtonColor(
                                                 context),
                                     onPressed: shouldEnableSave

lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart

@@ -13,7 +13,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/icon_widgets/clipboard_icon.dart';
 import 'package:stackwallet/widgets/icon_widgets/qrcode_icon.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
@@ -80,7 +80,8 @@ class _NewContactAddressEntryFormState
               child: Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 12),
                 child: RawMaterialButton(
-                  splashColor: StackTheme.instance.color.highlight,
+                  splashColor:
+                      Theme.of(context).extension<StackColors>()!.highlight,
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(
                       Constants.size.circularBorderRadius,
@@ -134,7 +135,9 @@ class _NewContactAddressEntryFormState
                         Assets.svg.chevronDown,
                         width: 8,
                         height: 4,
-                        color: StackTheme.instance.color.textSubtitle2,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textSubtitle2,
                       ),
                     ],
                   ),
@@ -354,7 +357,8 @@ class _NewContactAddressEntryFormState
                     "Invalid address",
                     textAlign: TextAlign.left,
                     style: STextStyles.label(context).copyWith(
-                      color: StackTheme.instance.color.textError,
+                      color:
+                          Theme.of(context).extension<StackColors>()!.textError,
                     ),
                   ),
                 ],

lib/pages/exchange_view/confirm_change_now_send.dart

@@ -13,7 +13,7 @@ import 'package:stackwallet/route_generator.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -97,12 +97,15 @@ class _ConfirmChangeNowSendViewState
             title: "Broadcast transaction failed",
             message: e.toString(),
             rightButton: TextButton(
-              style:
-                  StackTheme.instance.getSecondaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getSecondaryEnabledButtonColor(context),
               child: Text(
                 "Ok",
                 style: STextStyles.button(context).copyWith(
-                  color: StackTheme.instance.color.buttonTextSecondary,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .buttonTextSecondary,
                 ),
               ),
               onPressed: () {
@@ -130,7 +133,7 @@ class _ConfirmChangeNowSendViewState
         .select((value) => value.getManagerProvider(walletId)));
     return Scaffold(
       appBar: AppBar(
-        backgroundColor: StackTheme.instance.color.background,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
         leading: AppBarBackButton(
           onPressed: () async {
             // if (FocusScope.of(context).hasFocus) {
@@ -316,7 +319,9 @@ class _ConfirmChangeNowSendViewState
                           height: 12,
                         ),
                         RoundedContainer(
-                          color: StackTheme.instance.color.snackBarBackSuccess,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .snackBarBackSuccess,
                           child: Row(
                             mainAxisAlignment: MainAxisAlignment.spaceBetween,
                             children: [
@@ -347,7 +352,8 @@ class _ConfirmChangeNowSendViewState
                         ),
                         const Spacer(),
                         TextButton(
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context),
                           onPressed: () async {
                             final unlocked = await Navigator.push(

lib/pages/exchange_view/edit_trade_note_view.dart

@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/providers/exchange/trade_note_service_provider.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/stack_text_field.dart';
@@ -46,9 +46,9 @@ class _EditNoteViewState extends ConsumerState<EditTradeNoteView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
-        backgroundColor: StackTheme.instance.color.background,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
         leading: AppBarBackButton(
           onPressed: () async {
             if (FocusScope.of(context).hasFocus) {
@@ -127,7 +127,8 @@ class _EditNoteViewState extends ConsumerState<EditTradeNoteView> {
                               Navigator.of(context).pop();
                             }
                           },
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context),
                           child: Text(
                             "Save",

lib/pages/exchange_view/exchange_coin_selection/fixed_rate_pair_coin_selection_view.dart

@@ -7,7 +7,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
@@ -119,7 +119,7 @@ class _FixedRateMarketPairCoinSelectionViewState
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -261,8 +261,9 @@ class _FixedRateMarketPairCoinSelectionViewState
                                       ticker.toUpperCase(),
                                       style: STextStyles.smallMed12(context)
                                           .copyWith(
-                                        color: StackTheme
-                                            .instance.color.textSubtitle1,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textSubtitle1,
                                       ),
                                     ),
                                   ],
@@ -336,8 +337,9 @@ class _FixedRateMarketPairCoinSelectionViewState
                                       ticker.toUpperCase(),
                                       style: STextStyles.smallMed12(context)
                                           .copyWith(
-                                        color: StackTheme
-                                            .instance.color.textSubtitle1,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textSubtitle1,
                                       ),
                                     ),
                                   ],

lib/pages/exchange_view/exchange_coin_selection/floating_rate_currency_selection_view.dart

@@ -5,7 +5,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
@@ -75,7 +75,7 @@ class _FloatingRateCurrencySelectionViewState
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -213,8 +213,9 @@ class _FloatingRateCurrencySelectionViewState
                                       items[index].ticker.toUpperCase(),
                                       style: STextStyles.smallMed12(context)
                                           .copyWith(
-                                        color: StackTheme
-                                            .instance.color.textSubtitle1,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textSubtitle1,
                                       ),
                                     ),
                                   ],
@@ -284,8 +285,9 @@ class _FloatingRateCurrencySelectionViewState
                                       _currencies[index].ticker.toUpperCase(),
                                       style: STextStyles.smallMed12(context)
                                           .copyWith(
-                                        color: StackTheme
-                                            .instance.color.textSubtitle1,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textSubtitle1,
                                       ),
                                     ),
                                   ],

lib/pages/exchange_view/exchange_loading_overlay.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/providers/exchange/changenow_initial_load_status.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_loading_overlay.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
@@ -65,7 +65,10 @@ class _ExchangeLoadingOverlayViewState
         if (_statusEst == ChangeNowLoadStatus.loading ||
             (_statusFixed == ChangeNowLoadStatus.loading && userReloaded))
           Container(
-            color: StackTheme.instance.color.overlay.withOpacity(0.7),
+            color: Theme.of(context)
+                .extension<StackColors>()!
+                .overlay
+                .withOpacity(0.7),
             child: const CustomLoadingOverlay(
                 message: "Loading ChangeNOW data", eventBus: null),
           ),
@@ -74,7 +77,10 @@ class _ExchangeLoadingOverlayViewState
             _statusEst != ChangeNowLoadStatus.loading &&
             _statusFixed != ChangeNowLoadStatus.loading)
           Container(
-            color: StackTheme.instance.color.overlay.withOpacity(0.7),
+            color: Theme.of(context)
+                .extension<StackColors>()!
+                .overlay
+                .withOpacity(0.7),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.end,
               children: [
@@ -83,12 +89,15 @@ class _ExchangeLoadingOverlayViewState
                   message:
                       "ChangeNOW requires a working internet connection. Tap OK to try fetching again.",
                   rightButton: TextButton(
-                    style: StackTheme.instance
+                    style: Theme.of(context)
+                        .extension<StackColors>()!
                         .getSecondaryEnabledButtonColor(context),
                     child: Text(
                       "OK",
                       style: STextStyles.button(context).copyWith(
-                        color: StackTheme.instance.color.buttonTextSecondary,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .buttonTextSecondary,
                       ),
                     ),
                     onPressed: () {

lib/pages/exchange_view/exchange_step_views/step_1_view.dart

@@ -5,7 +5,7 @@ import 'package:stackwallet/pages/exchange_view/sub_widgets/exchange_rate_sheet.
 import 'package:stackwallet/pages/exchange_view/sub_widgets/step_row.dart';
 import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -40,7 +40,7 @@ class _Step1ViewState extends State<Step1View> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -104,15 +104,17 @@ class _Step1ViewState extends State<Step1View> {
                                 "You send",
                                 style: STextStyles.itemSubtitle(context)
                                     .copyWith(
-                                        color: StackTheme
-                                            .instance.color.infoItemText),
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .infoItemText),
                               ),
                               Text(
                                 "${model.sendAmount.toStringAsFixed(8)} ${model.sendTicker.toUpperCase()}",
                                 style: STextStyles.itemSubtitle12(context)
                                     .copyWith(
-                                        color: StackTheme
-                                            .instance.color.infoItemText),
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .infoItemText),
                               ),
                             ],
                           ),
@@ -128,15 +130,17 @@ class _Step1ViewState extends State<Step1View> {
                                 "You receive",
                                 style: STextStyles.itemSubtitle(context)
                                     .copyWith(
-                                        color: StackTheme
-                                            .instance.color.infoItemText),
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .infoItemText),
                               ),
                               Text(
                                 "~${model.receiveAmount.toStringAsFixed(8)} ${model.receiveTicker.toUpperCase()}",
                                 style: STextStyles.itemSubtitle12(context)
                                     .copyWith(
-                                        color: StackTheme
-                                            .instance.color.infoItemText),
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .infoItemText),
                               ),
                             ],
                           ),
@@ -154,16 +158,18 @@ class _Step1ViewState extends State<Step1View> {
                                     : "Fixed rate",
                                 style:
                                     STextStyles.itemSubtitle(context).copyWith(
-                                  color:
-                                      StackTheme.instance.color.infoItemLabel,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .infoItemLabel,
                                 ),
                               ),
                               Text(
                                 model.rateInfo,
                                 style: STextStyles.itemSubtitle12(context)
                                     .copyWith(
-                                        color: StackTheme
-                                            .instance.color.infoItemText),
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .infoItemText),
                               ),
                             ],
                           ),
@@ -177,7 +183,8 @@ class _Step1ViewState extends State<Step1View> {
                             Navigator.of(context).pushNamed(Step2View.routeName,
                                 arguments: model);
                           },
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context),
                           child: Text(
                             "Next",

lib/pages/exchange_view/exchange_step_views/step_2_view.dart

@@ -15,7 +15,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/addressbook_icon.dart';
 import 'package:stackwallet/widgets/icon_widgets/clipboard_icon.dart';
@@ -95,7 +95,7 @@ class _Step2ViewState extends ConsumerState<Step2View> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -537,13 +537,15 @@ class _Step2ViewState extends ConsumerState<Step2View> {
                                 onPressed: () {
                                   Navigator.of(context).pop();
                                 },
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getSecondaryEnabledButtonColor(context),
                                 child: Text(
                                   "Back",
                                   style: STextStyles.button(context).copyWith(
-                                    color: StackTheme
-                                        .instance.color.buttonTextSecondary,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .buttonTextSecondary,
                                   ),
                                 ),
                               ),
@@ -561,7 +563,8 @@ class _Step2ViewState extends ConsumerState<Step2View> {
                                       Step3View.routeName,
                                       arguments: model);
                                 },
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getPrimaryEnabledButtonColor(context),
                                 child: Text(
                                   "Next",

lib/pages/exchange_view/exchange_step_views/step_3_view.dart

@@ -14,7 +14,7 @@ import 'package:stackwallet/services/notifications_api.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
@@ -50,7 +50,7 @@ class _Step3ViewState extends ConsumerState<Step3View> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -203,13 +203,15 @@ class _Step3ViewState extends ConsumerState<Step3View> {
                                 onPressed: () {
                                   Navigator.of(context).pop();
                                 },
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getSecondaryEnabledButtonColor(context),
                                 child: Text(
                                   "Back",
                                   style: STextStyles.button(context).copyWith(
-                                    color: StackTheme
-                                        .instance.color.buttonTextSecondary,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .buttonTextSecondary,
                                   ),
                                 ),
                               ),
@@ -306,7 +308,8 @@ class _Step3ViewState extends ConsumerState<Step3View> {
                                     ));
                                   }
                                 },
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getPrimaryEnabledButtonColor(context),
                                 child: Text(
                                   "Next",

lib/pages/exchange_view/exchange_step_views/step_4_view.dart

@@ -24,7 +24,7 @@ import 'package:stackwallet/utilities/enums/fee_rate_type_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -114,7 +114,7 @@ class _Step4ViewState extends ConsumerState<Step4View> {
     final bool isWalletCoin =
         _isWalletCoinAndHasWallet(model.trade!.fromCurrency, ref);
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -171,14 +171,17 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                           height: 12,
                         ),
                         RoundedContainer(
-                          color: StackTheme.instance.color.warningBackground,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .warningBackground,
                           child: RichText(
                             text: TextSpan(
                               text:
                                   "You must send at least ${model.sendAmount.toString()} ${model.sendTicker}. ",
                               style: STextStyles.label(context).copyWith(
-                                color:
-                                    StackTheme.instance.color.warningForeground,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .warningForeground,
                                 fontWeight: FontWeight.w700,
                               ),
                               children: [
@@ -186,8 +189,9 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                   text:
                                       "If you send less than ${model.sendAmount.toString()} ${model.sendTicker}, your transaction may not be converted and it may not be refunded.",
                                   style: STextStyles.label(context).copyWith(
-                                    color: StackTheme
-                                        .instance.color.warningForeground,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .warningForeground,
                                     fontWeight: FontWeight.w500,
                                   ),
                                 ),
@@ -225,8 +229,9 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                       children: [
                                         SvgPicture.asset(
                                           Assets.svg.copy,
-                                          color: StackTheme
-                                              .instance.color.infoItemIcons,
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .infoItemIcons,
                                           width: 10,
                                         ),
                                         const SizedBox(
@@ -281,8 +286,9 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                       children: [
                                         SvgPicture.asset(
                                           Assets.svg.copy,
-                                          color: StackTheme
-                                              .instance.color.infoItemIcons,
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .infoItemIcons,
                                           width: 10,
                                         ),
                                         const SizedBox(
@@ -340,8 +346,9 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                     },
                                     child: SvgPicture.asset(
                                       Assets.svg.copy,
-                                      color: StackTheme
-                                          .instance.color.infoItemIcons,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .infoItemIcons,
                                       width: 12,
                                     ),
                                   )
@@ -365,7 +372,8 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                 _statusString,
                                 style:
                                     STextStyles.itemSubtitle(context).copyWith(
-                                  color: StackTheme.instance
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
                                       .colorForStatus(_status),
                                 ),
                               ),
@@ -407,8 +415,9 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                                   .size
                                                   .width /
                                               2,
-                                          foregroundColor: StackTheme
-                                              .instance.color.accentColorDark,
+                                          foregroundColor: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .accentColorDark,
                                         ),
                                       ),
                                       const SizedBox(
@@ -421,7 +430,8 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                             child: TextButton(
                                               onPressed: () =>
                                                   Navigator.of(context).pop(),
-                                              style: StackTheme.instance
+                                              style: Theme.of(context)
+                                                  .extension<StackColors>()!
                                                   .getSecondaryEnabledButtonColor(
                                                       context),
                                               child: Text(
@@ -429,9 +439,8 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                                 style:
                                                     STextStyles.button(context)
                                                         .copyWith(
-                                                  color: StackTheme
-                                                      .instance
-                                                      .color
+                                                  color: Theme.of(context)
+                                                      .extension<StackColors>()!
                                                       .buttonTextSecondary,
                                                 ),
                                               ),
@@ -445,7 +454,8 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                               },
                             );
                           },
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context),
                           child: Text(
                             "Show QR Code",
@@ -567,7 +577,8 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                                 title: "Transaction failed",
                                                 message: e.toString(),
                                                 rightButton: TextButton(
-                                                  style: StackTheme.instance
+                                                  style: Theme.of(context)
+                                                      .extension<StackColors>()!
                                                       .getSecondaryEnabledButtonColor(
                                                           context),
                                                   child: Text(
@@ -575,9 +586,9 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                                     style: STextStyles.button(
                                                             context)
                                                         .copyWith(
-                                                      color: StackTheme
-                                                          .instance
-                                                          .color
+                                                      color: Theme.of(context)
+                                                          .extension<
+                                                              StackColors>()!
                                                           .buttonTextSecondary,
                                                     ),
                                                   ),
@@ -615,13 +626,15 @@ class _Step4ViewState extends ConsumerState<Step4View> {
                                           ),
                                         );
                                       },
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getSecondaryEnabledButtonColor(context),
                                 child: Text(
                                   buttonTitle,
                                   style: STextStyles.button(context).copyWith(
-                                    color: StackTheme
-                                        .instance.color.buttonTextSecondary,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .buttonTextSecondary,
                                   ),
                                 ),
                               );

lib/pages/exchange_view/exchange_view.dart

@@ -32,7 +32,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_loading_overlay.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
@@ -66,7 +66,10 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
         builder: (_) => WillPopScope(
           onWillPop: () async => false,
           child: Container(
-            color: StackTheme.instance.color.overlay.withOpacity(0.6),
+            color: Theme.of(context)
+                .extension<StackColors>()!
+                .overlay
+                .withOpacity(0.6),
             child: const CustomLoadingOverlay(
               message: "Updating exchange rate",
               eventBus: null,
@@ -367,7 +370,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                       Text(
                         "You will send",
                         style: STextStyles.itemSubtitle(context).copyWith(
-                          color: StackTheme.instance.color.textDark3,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .textDark3,
                         ),
                       ),
                       const SizedBox(
@@ -561,9 +566,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                                     width: 18,
                                                     height: 18,
                                                     decoration: BoxDecoration(
-                                                      color: StackTheme
-                                                          .instance
-                                                          .color
+                                                      color: Theme.of(context)
+                                                          .extension<
+                                                              StackColors>()!
                                                           .textFieldDefaultBG,
                                                       borderRadius:
                                                           BorderRadius.circular(
@@ -586,7 +591,7 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                                 width: 18,
                                                 height: 18,
                                                 decoration: BoxDecoration(
-                                                  // color: StackTheme.instance.color.accentColorDark
+                                                  // color: Theme.of(context).extension<StackColors>()!.accentColorDark
                                                   borderRadius:
                                                       BorderRadius.circular(18),
                                                 ),
@@ -594,8 +599,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                                   Assets.svg.circleQuestion,
                                                   width: 18,
                                                   height: 18,
-                                                  color: StackTheme.instance
-                                                      .color.textFieldDefaultBG,
+                                                  color: Theme.of(context)
+                                                      .extension<StackColors>()!
+                                                      .textFieldDefaultBG,
                                                 ),
                                               );
                                             }
@@ -621,8 +627,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                                 "-",
                                         style: STextStyles.smallMed14(context)
                                             .copyWith(
-                                          color: StackTheme
-                                              .instance.color.textDark,
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .textDark,
                                         ),
                                       ),
                                       const SizedBox(
@@ -632,8 +639,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                         Assets.svg.chevronDown,
                                         width: 5,
                                         height: 2.5,
-                                        color:
-                                            StackTheme.instance.color.textDark,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textDark,
                                       ),
                                     ],
                                   ),
@@ -655,7 +663,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                 "You will receive",
                                 style:
                                     STextStyles.itemSubtitle(context).copyWith(
-                                  color: StackTheme.instance.color.textDark3,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .textDark3,
                                 ),
                               ),
                             ),
@@ -676,8 +686,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                       Assets.svg.swap,
                                       width: 20,
                                       height: 20,
-                                      color: StackTheme
-                                          .instance.color.accentColorDark,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark,
                                     ),
                                   ),
                                 ),
@@ -894,9 +905,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                                     width: 18,
                                                     height: 18,
                                                     decoration: BoxDecoration(
-                                                      color: StackTheme
-                                                          .instance
-                                                          .color
+                                                      color: Theme.of(context)
+                                                          .extension<
+                                                              StackColors>()!
                                                           .textFieldDefaultBG,
                                                       borderRadius:
                                                           BorderRadius.circular(
@@ -918,7 +929,7 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                                 width: 18,
                                                 height: 18,
                                                 decoration: BoxDecoration(
-                                                  // color: StackTheme.instance.color.accentColorDark
+                                                  // color: Theme.of(context).extension<StackColors>()!.accentColorDark
                                                   borderRadius:
                                                       BorderRadius.circular(18),
                                                 ),
@@ -926,8 +937,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                                   Assets.svg.circleQuestion,
                                                   width: 18,
                                                   height: 18,
-                                                  color: StackTheme.instance
-                                                      .color.textFieldDefaultBG,
+                                                  color: Theme.of(context)
+                                                      .extension<StackColors>()!
+                                                      .textFieldDefaultBG,
                                                 ),
                                               );
                                             }
@@ -953,8 +965,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                                 "-",
                                         style: STextStyles.smallMed14(context)
                                             .copyWith(
-                                          color: StackTheme
-                                              .instance.color.textDark,
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .textDark,
                                         ),
                                       ),
                                       const SizedBox(
@@ -964,8 +977,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                         Assets.svg.chevronDown,
                                         width: 5,
                                         height: 2.5,
-                                        color:
-                                            StackTheme.instance.color.textDark,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textDark,
                                       ),
                                     ],
                                   ),
@@ -1152,9 +1166,11 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                     .select((value) => value.canExchange))
                                 : ref.watch(fixedRateExchangeFormProvider
                                     .select((value) => value.canExchange)))
-                            ? StackTheme.instance
+                            ? Theme.of(context)
+                                .extension<StackColors>()!
                                 .getPrimaryEnabledButtonColor(context)
-                            : StackTheme.instance
+                            : Theme.of(context)
+                                .extension<StackColors>()!
                                 .getPrimaryDisabledButtonColor(context),
                         onPressed: ((ref
                                         .read(prefsChangeNotifierProvider)
@@ -1320,7 +1336,8 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                         message:
                                             "${response.value!.warningMessage!}\n\nDo you want to attempt trade anyways?",
                                         leftButton: TextButton(
-                                          style: StackTheme.instance
+                                          style: Theme.of(context)
+                                              .extension<StackColors>()!
                                               .getSecondaryEnabledButtonColor(
                                                   context),
                                           child: Text(
@@ -1334,7 +1351,8 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                                           },
                                         ),
                                         rightButton: TextButton(
-                                          style: StackTheme.instance
+                                          style: Theme.of(context)
+                                              .extension<StackColors>()!
                                               .getPrimaryEnabledButtonColor(
                                                   context),
                                           child: Text(
@@ -1392,7 +1410,7 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                       // Text(
                       //   "Trades",
                       //   style: STextStyles.itemSubtitle(context).copyWith(
-                      //     color: StackTheme.instance.color.textDark3,
+                      //     color: Theme.of(context).extension<StackColors>()!.textDark3,
                       //   ),
                       // ),
                       // SizedBox(
@@ -1432,7 +1450,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                           Text(
                             "Trades",
                             style: STextStyles.itemSubtitle(context).copyWith(
-                              color: StackTheme.instance.color.textDark3,
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .textDark3,
                             ),
                           ),
                           const SizedBox(
@@ -1505,7 +1525,9 @@ class _ExchangeViewState extends ConsumerState<ExchangeView> {
                         padding: const EdgeInsets.symmetric(horizontal: 4),
                         child: Container(
                           decoration: BoxDecoration(
-                            color: StackTheme.instance.color.popupBG,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .popupBG,
                             borderRadius: BorderRadius.circular(
                               Constants.size.circularBorderRadius,
                             ),
@@ -1547,7 +1569,7 @@ class RateInfo extends ConsumerWidget {
 
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: BorderRadius.circular(
           Constants.size.circularBorderRadius,
         ),
@@ -1635,7 +1657,9 @@ class RateInfo extends ConsumerWidget {
                       Assets.svg.chevronDown,
                       width: 5,
                       height: 2.5,
-                      color: StackTheme.instance.color.infoItemLabel,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .infoItemLabel,
                     ),
                 ],
               ),

lib/pages/exchange_view/send_from_view.dart

@@ -16,7 +16,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/fee_rate_type_enum.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/animated_text.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -60,7 +60,7 @@ class _SendFromViewState extends ConsumerState<SendFromView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -161,7 +161,7 @@ class _SendFromCardState extends ConsumerState<SendFromCard> {
     return RoundedWhiteContainer(
       padding: const EdgeInsets.all(0),
       child: MaterialButton(
-        splashColor: StackTheme.instance.color.highlight,
+        splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         key: Key("walletsSheetItemButtonKey_$walletId"),
         padding: const EdgeInsets.all(5),
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
@@ -242,12 +242,15 @@ class _SendFromCardState extends ConsumerState<SendFromCard> {
                   title: "Transaction failed",
                   message: e.toString(),
                   rightButton: TextButton(
-                    style: StackTheme.instance
+                    style: Theme.of(context)
+                        .extension<StackColors>()!
                         .getSecondaryEnabledButtonColor(context),
                     child: Text(
                       "Ok",
                       style: STextStyles.button(context).copyWith(
-                        color: StackTheme.instance.color.buttonTextSecondary,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .buttonTextSecondary,
                       ),
                     ),
                     onPressed: () {
@@ -264,7 +267,8 @@ class _SendFromCardState extends ConsumerState<SendFromCard> {
           children: [
             Container(
               decoration: BoxDecoration(
-                color: StackTheme.instance
+                color: Theme.of(context)
+                    .extension<StackColors>()!
                     .colorForCoin(manager.coin)
                     .withOpacity(0.5),
                 borderRadius: BorderRadius.circular(

lib/pages/exchange_view/sub_widgets/exchange_rate_sheet.dart

@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 enum ExchangeRateType { estimated, fixed }
 
@@ -16,7 +16,7 @@ class ExchangeRateSheet extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: const BorderRadius.vertical(
           top: Radius.circular(20),
         ),
@@ -35,7 +35,8 @@ class ExchangeRateSheet extends ConsumerWidget {
             Center(
               child: Container(
                 decoration: BoxDecoration(
-                  color: StackTheme.instance.color.textSubtitle4,
+                  color:
+                      Theme.of(context).extension<StackColors>()!.textSubtitle4,
                   borderRadius: BorderRadius.circular(
                     Constants.size.circularBorderRadius,
                   ),
@@ -76,8 +77,9 @@ class ExchangeRateSheet extends ConsumerWidget {
                           width: 20,
                           height: 20,
                           child: Radio(
-                            activeColor: StackTheme
-                                .instance.color.radioButtonIconEnabled,
+                            activeColor: Theme.of(context)
+                                .extension<StackColors>()!
+                                .radioButtonIconEnabled,
                             value: ExchangeRateType.estimated,
                             groupValue: ref.watch(prefsChangeNotifierProvider
                                 .select((value) => value.exchangeRateType)),
@@ -112,7 +114,9 @@ class ExchangeRateSheet extends ConsumerWidget {
                           Text(
                             "ChangeNOW will pick the best rate for you during the moment of the exchange.",
                             style: STextStyles.itemSubtitle(context).copyWith(
-                              color: StackTheme.instance.color.textSubtitle1,
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .textSubtitle1,
                             ),
                             textAlign: TextAlign.left,
                           ),
@@ -147,8 +151,9 @@ class ExchangeRateSheet extends ConsumerWidget {
                           width: 20,
                           height: 20,
                           child: Radio(
-                            activeColor: StackTheme
-                                .instance.color.radioButtonIconEnabled,
+                            activeColor: Theme.of(context)
+                                .extension<StackColors>()!
+                                .radioButtonIconEnabled,
                             value: ExchangeRateType.fixed,
                             groupValue: ref.watch(prefsChangeNotifierProvider
                                 .select((value) => value.exchangeRateType)),
@@ -180,7 +185,9 @@ class ExchangeRateSheet extends ConsumerWidget {
                           Text(
                             "You will get the exact exchange amount displayed - ChangeNOW takes all the rate risks.",
                             style: STextStyles.itemSubtitle(context).copyWith(
-                              color: StackTheme.instance.color.textSubtitle1,
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .textSubtitle1,
                             ),
                             textAlign: TextAlign.left,
                           )

lib/pages/exchange_view/sub_widgets/step_indicator.dart

@@ -1,8 +1,8 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:stackwallet/utilities/assets.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 enum StepIndicatorStatus { current, completed, incomplete }
 
@@ -19,18 +19,22 @@ class StepIndicator extends StatelessWidget {
 
   final double size;
 
-  Color get background {
+  Color background(BuildContext context) {
     switch (status) {
       case StepIndicatorStatus.current:
-        return StackTheme.instance.color.stepIndicatorBGNumber;
+        return Theme.of(context)
+            .extension<StackColors>()!
+            .stepIndicatorBGNumber;
       case StepIndicatorStatus.completed:
-        return StackTheme.instance.color.stepIndicatorBGCheck;
+        return Theme.of(context).extension<StackColors>()!.stepIndicatorBGCheck;
       case StepIndicatorStatus.incomplete:
-        return StackTheme.instance.color.stepIndicatorBGInactive;
+        return Theme.of(context)
+            .extension<StackColors>()!
+            .stepIndicatorBGInactive;
     }
   }
 
-  Widget get centered {
+  Widget centered(BuildContext context) {
     switch (status) {
       case StepIndicatorStatus.current:
         return Text(
@@ -38,13 +42,16 @@ class StepIndicator extends StatelessWidget {
           style: GoogleFonts.roboto(
             fontWeight: FontWeight.w600,
             fontSize: 8,
-            color: StackTheme.instance.color.stepIndicatorIconNumber,
+            color: Theme.of(context)
+                .extension<StackColors>()!
+                .stepIndicatorIconNumber,
           ),
         );
       case StepIndicatorStatus.completed:
         return SvgPicture.asset(
           Assets.svg.check,
-          color: StackTheme.instance.color.stepIndicatorIconText,
+          color:
+              Theme.of(context).extension<StackColors>()!.stepIndicatorIconText,
           width: 10,
         );
       case StepIndicatorStatus.incomplete:
@@ -53,7 +60,9 @@ class StepIndicator extends StatelessWidget {
           style: GoogleFonts.roboto(
             fontWeight: FontWeight.w600,
             fontSize: 8,
-            color: StackTheme.instance.color.stepIndicatorIconInactive,
+            color: Theme.of(context)
+                .extension<StackColors>()!
+                .stepIndicatorIconInactive,
           ),
         );
     }
@@ -66,10 +75,10 @@ class StepIndicator extends StatelessWidget {
       height: size,
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(size / 2),
-        color: background,
+        color: background(context),
       ),
       child: Center(
-        child: centered,
+        child: centered(context),
       ),
     );
   }

lib/pages/exchange_view/sub_widgets/step_row.dart

@@ -1,6 +1,6 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:stackwallet/pages/exchange_view/sub_widgets/step_indicator.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class StepRow extends StatelessWidget {
   const StepRow({
@@ -18,15 +18,17 @@ class StepRow extends StatelessWidget {
   final double indicatorSize;
   final double minSpacing;
 
-  Color getColor(int index) {
+  Color getColor(int index, BuildContext context) {
     if (current >= count - 1) {
-      return StackTheme.instance.color.accentColorDark;
+      return Theme.of(context).extension<StackColors>()!.accentColorDark;
     }
 
     if (current <= index) {
-      return StackTheme.instance.color.stepIndicatorBGLinesInactive;
+      return Theme.of(context)
+          .extension<StackColors>()!
+          .stepIndicatorBGLinesInactive;
     } else {
-      return StackTheme.instance.color.stepIndicatorBGLines;
+      return Theme.of(context).extension<StackColors>()!.stepIndicatorBGLines;
     }
   }
 
@@ -40,7 +42,7 @@ class StepRow extends StatelessWidget {
     }
   }
 
-  List<Widget> _buildList(double spacerWidth) {
+  List<Widget> _buildList(double spacerWidth, BuildContext context) {
     List<Widget> list = [];
     for (int i = 0; i < count - 1; i++) {
       list.add(StepIndicator(
@@ -51,7 +53,7 @@ class StepRow extends StatelessWidget {
         width: spacerWidth,
         dotSize: 1.5,
         spacing: 4,
-        color: getColor(i),
+        color: getColor(i, context),
       ));
     }
     list.add(StepIndicator(
@@ -68,7 +70,7 @@ class StepRow extends StatelessWidget {
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
-        ..._buildList(spacerWidth),
+        ..._buildList(spacerWidth, context),
       ],
     );
   }

lib/pages/exchange_view/trade_details_view.dart

@@ -22,7 +22,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -140,9 +140,9 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
         Decimal.parse("-1");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
-        backgroundColor: StackTheme.instance.color.background,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
         leading: AppBarBackButton(
           onPressed: () async {
             Navigator.of(context).pop();
@@ -221,9 +221,12 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                         trade.statusObject?.status.name ?? trade.statusString,
                         style: STextStyles.itemSubtitle(context).copyWith(
                           color: trade.statusObject != null
-                              ? StackTheme.instance
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
                                   .colorForStatus(trade.statusObject!.status)
-                              : StackTheme.instance.color.accentColorDark,
+                              : Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .accentColorDark,
                         ),
                       ),
                       //   ),
@@ -237,7 +240,9 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                   ),
                 if (!sentFromStack && !hasTx)
                   RoundedContainer(
-                    color: StackTheme.instance.color.warningBackground,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .warningBackground,
                     child: RichText(
                       text: TextSpan(
                           text:
@@ -245,7 +250,9 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                             trade.fromCurrency.toLowerCase() == "xmr" ? 12 : 8,
                           )} ${trade.fromCurrency.toUpperCase()}. ",
                           style: STextStyles.label(context).copyWith(
-                            color: StackTheme.instance.color.warningForeground,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .warningForeground,
                             fontWeight: FontWeight.w700,
                           ),
                           children: [
@@ -257,8 +264,9 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                                     : 8,
                               )} ${trade.fromCurrency.toUpperCase()}, your transaction may not be converted and it may not be refunded.",
                               style: STextStyles.label(context).copyWith(
-                                color:
-                                    StackTheme.instance.color.warningForeground,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .warningForeground,
                                 fontWeight: FontWeight.w500,
                               ),
                             ),
@@ -386,11 +394,13 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                                             child: QrImage(
                                                 data: trade.payinAddress,
                                                 size: width,
-                                                backgroundColor: StackTheme
-                                                    .instance.color.popupBG,
-                                                foregroundColor: StackTheme
-                                                    .instance
-                                                    .color
+                                                backgroundColor: Theme.of(
+                                                        context)
+                                                    .extension<StackColors>()!
+                                                    .popupBG,
+                                                foregroundColor: Theme.of(
+                                                        context)
+                                                    .extension<StackColors>()!
                                                     .accentColorDark),
                                           ),
                                         ),
@@ -406,16 +416,17 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                                               // await _capturePng(true);
                                               Navigator.of(context).pop();
                                             },
-                                            style: StackTheme.instance
+                                            style: Theme.of(context)
+                                                .extension<StackColors>()!
                                                 .getSecondaryEnabledButtonColor(
                                                     context),
                                             child: Text(
                                               "Cancel",
                                               style: STextStyles.button(context)
                                                   .copyWith(
-                                                      color: StackTheme
-                                                          .instance
-                                                          .color
+                                                      color: Theme.of(context)
+                                                          .extension<
+                                                              StackColors>()!
                                                           .accentColorDark),
                                             ),
                                           ),
@@ -433,7 +444,9 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                                 Assets.svg.qrcode,
                                 width: 12,
                                 height: 12,
-                                color: StackTheme.instance.color.infoItemIcons,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .infoItemIcons,
                               ),
                               const SizedBox(
                                 width: 4,
@@ -480,8 +493,9 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                                   Assets.svg.pencil,
                                   width: 10,
                                   height: 10,
-                                  color:
-                                      StackTheme.instance.color.infoItemIcons,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .infoItemIcons,
                                 ),
                                 const SizedBox(
                                   width: 4,
@@ -539,8 +553,9 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                                     Assets.svg.pencil,
                                     width: 10,
                                     height: 10,
-                                    color:
-                                        StackTheme.instance.color.infoItemIcons,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .infoItemIcons,
                                   ),
                                   const SizedBox(
                                     width: 4,
@@ -659,7 +674,9 @@ class _TradeDetailsViewState extends ConsumerState<TradeDetailsView> {
                             },
                             child: SvgPicture.asset(
                               Assets.svg.copy,
-                              color: StackTheme.instance.color.infoItemIcons,
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .infoItemIcons,
                               width: 12,
                             ),
                           )

lib/pages/exchange_view/wallet_initiated_exchange_view.dart

@@ -29,7 +29,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_loading_overlay.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
@@ -81,7 +81,10 @@ class _WalletInitiatedExchangeViewState
         builder: (_) => WillPopScope(
           onWillPop: () async => false,
           child: Container(
-            color: StackTheme.instance.color.accentColorDark.withOpacity(0.8),
+            color: Theme.of(context)
+                .extension<StackColors>()!
+                .accentColorDark
+                .withOpacity(0.8),
             child: const CustomLoadingOverlay(
               message: "Updating exchange rate",
               eventBus: null,
@@ -353,7 +356,7 @@ class _WalletInitiatedExchangeViewState
     });
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -412,7 +415,9 @@ class _WalletInitiatedExchangeViewState
                         Text(
                           "You will send",
                           style: STextStyles.itemSubtitle(context).copyWith(
-                            color: StackTheme.instance.color.textDark3,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .textDark3,
                           ),
                         ),
                         const SizedBox(
@@ -621,9 +626,9 @@ class _WalletInitiatedExchangeViewState
                                                       width: 18,
                                                       height: 18,
                                                       decoration: BoxDecoration(
-                                                        color: StackTheme
-                                                            .instance
-                                                            .color
+                                                        color: Theme.of(context)
+                                                            .extension<
+                                                                StackColors>()!
                                                             .textSubtitle2,
                                                         borderRadius:
                                                             BorderRadius
@@ -648,7 +653,7 @@ class _WalletInitiatedExchangeViewState
                                                   width: 18,
                                                   height: 18,
                                                   decoration: BoxDecoration(
-                                                    // color: StackTheme.instance.color.accentColorDark
+                                                    // color: Theme.of(context).extension<StackColors>()!.accentColorDark
                                                     borderRadius:
                                                         BorderRadius.circular(
                                                             18),
@@ -657,8 +662,10 @@ class _WalletInitiatedExchangeViewState
                                                     Assets.svg.circleQuestion,
                                                     width: 18,
                                                     height: 18,
-                                                    color: StackTheme.instance
-                                                        .color.textSubtitle2,
+                                                    color: Theme.of(context)
+                                                        .extension<
+                                                            StackColors>()!
+                                                        .textSubtitle2,
                                                   ),
                                                 );
                                               }
@@ -684,8 +691,9 @@ class _WalletInitiatedExchangeViewState
                                                   "-",
                                           style: STextStyles.smallMed14(context)
                                               .copyWith(
-                                                  color: StackTheme.instance
-                                                      .color.accentColorDark),
+                                                  color: Theme.of(context)
+                                                      .extension<StackColors>()!
+                                                      .accentColorDark),
                                         ),
                                         const SizedBox(
                                           width: 6,
@@ -712,7 +720,8 @@ class _WalletInitiatedExchangeViewState
                                               Assets.svg.chevronDown,
                                               width: 5,
                                               height: 2.5,
-                                              color: StackTheme.instance.color
+                                              color: Theme.of(context)
+                                                  .extension<StackColors>()!
                                                   .accentColorDark);
                                         }),
                                       ],
@@ -735,7 +744,9 @@ class _WalletInitiatedExchangeViewState
                                   "You will receive",
                                   style: STextStyles.itemSubtitle(context)
                                       .copyWith(
-                                    color: StackTheme.instance.color.textDark3,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textDark3,
                                   ),
                                 ),
                               ),
@@ -985,9 +996,9 @@ class _WalletInitiatedExchangeViewState
                                                       width: 18,
                                                       height: 18,
                                                       decoration: BoxDecoration(
-                                                        color: StackTheme
-                                                            .instance
-                                                            .color
+                                                        color: Theme.of(context)
+                                                            .extension<
+                                                                StackColors>()!
                                                             .textSubtitle2,
                                                         borderRadius:
                                                             BorderRadius
@@ -1010,7 +1021,7 @@ class _WalletInitiatedExchangeViewState
                                                   width: 18,
                                                   height: 18,
                                                   decoration: BoxDecoration(
-                                                    // color: StackTheme.instance.color.accentColorDark
+                                                    // color: Theme.of(context).extension<StackColors>()!.accentColorDark
                                                     borderRadius:
                                                         BorderRadius.circular(
                                                             18),
@@ -1019,8 +1030,10 @@ class _WalletInitiatedExchangeViewState
                                                     Assets.svg.circleQuestion,
                                                     width: 18,
                                                     height: 18,
-                                                    color: StackTheme.instance
-                                                        .color.textSubtitle2,
+                                                    color: Theme.of(context)
+                                                        .extension<
+                                                            StackColors>()!
+                                                        .textSubtitle2,
                                                   ),
                                                 );
                                               }
@@ -1046,8 +1059,9 @@ class _WalletInitiatedExchangeViewState
                                                   "-",
                                           style: STextStyles.smallMed14(context)
                                               .copyWith(
-                                                  color: StackTheme.instance
-                                                      .color.accentColorDark),
+                                                  color: Theme.of(context)
+                                                      .extension<StackColors>()!
+                                                      .accentColorDark),
                                         ),
                                         const SizedBox(
                                           width: 6,
@@ -1074,7 +1088,8 @@ class _WalletInitiatedExchangeViewState
                                               Assets.svg.chevronDown,
                                               width: 5,
                                               height: 2.5,
-                                              color: StackTheme.instance.color
+                                              color: Theme.of(context)
+                                                  .extension<StackColors>()!
                                                   .accentColorDark);
                                         }),
                                       ],
@@ -1232,9 +1247,11 @@ class _WalletInitiatedExchangeViewState
                                       .select((value) => value.canExchange))
                                   : ref.watch(fixedRateExchangeFormProvider
                                       .select((value) => value.canExchange)))
-                              ? StackTheme.instance
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryEnabledButtonColor(context)
-                              : StackTheme.instance
+                              : Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getSecondaryEnabledButtonColor(context),
                           onPressed: ((ref
                                           .read(prefsChangeNotifierProvider)
@@ -1471,7 +1488,8 @@ class _WalletInitiatedExchangeViewState
                                           message:
                                               "${response.value!.warningMessage!}\n\nDo you want to attempt trade anyways?",
                                           leftButton: TextButton(
-                                            style: StackTheme.instance
+                                            style: Theme.of(context)
+                                                .extension<StackColors>()!
                                                 .getSecondaryEnabledButtonColor(
                                                     context),
                                             child: Text(
@@ -1485,7 +1503,8 @@ class _WalletInitiatedExchangeViewState
                                             },
                                           ),
                                           rightButton: TextButton(
-                                            style: StackTheme.instance
+                                            style: Theme.of(context)
+                                                .extension<StackColors>()!
                                                 .getPrimaryEnabledButtonColor(
                                                     context),
                                             child: Text(

lib/pages/home_view/home_view.dart

@@ -17,7 +17,7 @@ import 'package:stackwallet/services/change_now/change_now_loading_service.dart'
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
@@ -170,7 +170,7 @@ class _HomeViewState extends ConsumerState<HomeView> {
                   key: const Key("walletsViewAlertsButton"),
                   size: 36,
                   shadows: const [],
-                  color: StackTheme.instance.color.background,
+                  color: Theme.of(context).extension<StackColors>()!.background,
                   icon: SvgPicture.asset(
                     ref.watch(notificationsProvider
                             .select((value) => value.hasUnreadNotifications))
@@ -181,7 +181,9 @@ class _HomeViewState extends ConsumerState<HomeView> {
                     color: ref.watch(notificationsProvider
                             .select((value) => value.hasUnreadNotifications))
                         ? null
-                        : StackTheme.instance.color.topNavIconPrimary,
+                        : Theme.of(context)
+                            .extension<StackColors>()!
+                            .topNavIconPrimary,
                   ),
                   onPressed: () {
                     // reset unread state
@@ -227,10 +229,12 @@ class _HomeViewState extends ConsumerState<HomeView> {
                   key: const Key("walletsViewSettingsButton"),
                   size: 36,
                   shadows: const [],
-                  color: StackTheme.instance.color.background,
+                  color: Theme.of(context).extension<StackColors>()!.background,
                   icon: SvgPicture.asset(
                     Assets.svg.gear,
-                    color: StackTheme.instance.color.topNavIconPrimary,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .topNavIconPrimary,
                     width: 20,
                     height: 20,
                   ),
@@ -245,15 +249,18 @@ class _HomeViewState extends ConsumerState<HomeView> {
           ],
         ),
         body: Container(
-          color: StackTheme.instance.color.background,
+          color: Theme.of(context).extension<StackColors>()!.background,
           child: Column(
             children: [
               if (Constants.enableExchange)
                 Container(
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.color.background,
+                    color:
+                        Theme.of(context).extension<StackColors>()!.background,
                     boxShadow: [
-                      StackTheme.instance.standardBoxShadow,
+                      Theme.of(context)
+                          .extension<StackColors>()!
+                          .standardBoxShadow,
                     ],
                   ),
                   child: const Padding(

lib/pages/home_view/sub_widgets/home_view_button_bar.dart

@@ -12,7 +12,7 @@ import 'package:stackwallet/providers/exchange/fixed_rate_market_pairs_provider.
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class HomeViewButtonBar extends ConsumerStatefulWidget {
@@ -148,13 +148,15 @@ class _HomeViewButtonBarState extends ConsumerState<HomeViewButtonBar> {
         Expanded(
           child: TextButton(
             style: selectedIndex == 0
-                ? StackTheme.instance
+                ? Theme.of(context)
+                    .extension<StackColors>()!
                     .getPrimaryEnabledButtonColor(context)!
                     .copyWith(
                       minimumSize:
                           MaterialStateProperty.all<Size>(const Size(46, 36)),
                     )
-                : StackTheme.instance
+                : Theme.of(context)
+                    .extension<StackColors>()!
                     .getSecondaryEnabledButtonColor(context)!
                     .copyWith(
                       minimumSize:
@@ -171,8 +173,10 @@ class _HomeViewButtonBarState extends ConsumerState<HomeViewButtonBar> {
               style: STextStyles.button(context).copyWith(
                 fontSize: 14,
                 color: selectedIndex == 0
-                    ? StackTheme.instance.color.buttonTextPrimary
-                    : StackTheme.instance.color.textDark,
+                    ? Theme.of(context)
+                        .extension<StackColors>()!
+                        .buttonTextPrimary
+                    : Theme.of(context).extension<StackColors>()!.textDark,
               ),
             ),
           ),
@@ -183,13 +187,15 @@ class _HomeViewButtonBarState extends ConsumerState<HomeViewButtonBar> {
         Expanded(
           child: TextButton(
             style: selectedIndex == 1
-                ? StackTheme.instance
+                ? Theme.of(context)
+                    .extension<StackColors>()!
                     .getPrimaryEnabledButtonColor(context)!
                     .copyWith(
                       minimumSize:
                           MaterialStateProperty.all<Size>(const Size(46, 36)),
                     )
-                : StackTheme.instance
+                : Theme.of(context)
+                    .extension<StackColors>()!
                     .getSecondaryEnabledButtonColor(context)!
                     .copyWith(
                       minimumSize:
@@ -229,8 +235,10 @@ class _HomeViewButtonBarState extends ConsumerState<HomeViewButtonBar> {
               style: STextStyles.button(context).copyWith(
                 fontSize: 14,
                 color: selectedIndex == 1
-                    ? StackTheme.instance.color.buttonTextPrimary
-                    : StackTheme.instance.color.textDark,
+                    ? Theme.of(context)
+                        .extension<StackColors>()!
+                        .buttonTextPrimary
+                    : Theme.of(context).extension<StackColors>()!.textDark,
               ),
             ),
           ),
@@ -261,7 +269,7 @@ class _HomeViewButtonBarState extends ConsumerState<HomeViewButtonBar> {
         //       style: STextStyles.button(context).copyWith(
         //         fontSize: 14,
         //         color:
-        //             selectedIndex == 2 ? CFColors.light1 : StackTheme.instance.color.accentColorDark
+        //             selectedIndex == 2 ? CFColors.light1 : Theme.of(context).extension<StackColors>()!.accentColorDark
         //       ),
         //     ),
         //   ),

lib/pages/intro_view.dart

@@ -5,7 +5,7 @@ import 'package:stackwallet/pages/pinpad_views/create_pin_view.dart';
 import 'package:stackwallet/pages_desktop_specific/create_password/create_password_view.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:url_launcher/url_launcher.dart';
 
@@ -29,7 +29,7 @@ class _IntroViewState extends State<IntroView> {
   Widget build(BuildContext context) {
     debugPrint("BUILD: $runtimeType ");
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       body: Center(
         child: !isDesktop
             ? Column(
@@ -236,7 +236,9 @@ class GetStartedButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return !isDesktop
         ? TextButton(
-            style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getPrimaryEnabledButtonColor(context),
             onPressed: () {
               Navigator.of(context).pushNamed(CreatePinView.routeName);
             },
@@ -249,7 +251,9 @@ class GetStartedButton extends StatelessWidget {
             width: 328,
             height: 70,
             child: TextButton(
-              style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getPrimaryEnabledButtonColor(context),
               onPressed: () {
                 Navigator.of(context).pushNamed(CreatePasswordView.routeName);
               },

lib/pages/loading_view.dart

@@ -3,8 +3,7 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:lottie/lottie.dart';
 import 'package:stackwallet/utilities/assets.dart';
-
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class LoadingView extends StatelessWidget {
   const LoadingView({Key? key}) : super(key: key);
@@ -13,9 +12,9 @@ class LoadingView extends StatelessWidget {
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       body: Container(
-        color: StackTheme.instance.color.background,
+        color: Theme.of(context).extension<StackColors>()!.background,
         child: Center(
           child: SizedBox(
             width: min(size.width, size.height) * 0.5,

lib/pages/manage_favorites_view/manage_favorites_view.dart

@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/managed_favorite.dart';
 
@@ -28,7 +28,7 @@ class ManageFavoritesView extends StatelessWidget {
         ),
       ),
       body: Container(
-        color: StackTheme.instance.color.background,
+        color: Theme.of(context).extension<StackColors>()!.background,
         child: Padding(
           padding: const EdgeInsets.only(
             left: 12,
@@ -42,7 +42,7 @@ class ManageFavoritesView extends StatelessWidget {
                 padding: const EdgeInsets.symmetric(horizontal: 4),
                 child: Container(
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.color.popupBG,
+                    color: Theme.of(context).extension<StackColors>()!.popupBG,
                     borderRadius: BorderRadius.circular(
                       Constants.size.circularBorderRadius,
                     ),
@@ -117,7 +117,8 @@ class ManageFavoritesView extends StatelessWidget {
                 child: Text(
                   "Add to favorites",
                   style: STextStyles.itemSubtitle12(context).copyWith(
-                    color: StackTheme.instance.color.textDark3,
+                    color:
+                        Theme.of(context).extension<StackColors>()!.textDark3,
                   ),
                 ),
               ),

lib/pages/notification_views/notifications_view.dart

@@ -4,7 +4,7 @@ import 'package:stackwallet/notifications/notification_card.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/providers/ui/unread_notifications_provider.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -44,7 +44,7 @@ class _NotificationsViewState extends ConsumerState<NotificationsView> {
             .toList(growable: false);
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         title: Text(
           "Notifications",

lib/pages/pinpad_views/create_pin_view.dart

@@ -13,7 +13,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/flutter_secure_storage_interface.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_pin_put/custom_pin_put.dart';
 
@@ -40,9 +40,10 @@ class CreatePinView extends ConsumerStatefulWidget {
 class _CreatePinViewState extends ConsumerState<CreatePinView> {
   BoxDecoration get _pinPutDecoration {
     return BoxDecoration(
-      color: StackTheme.instance.color.textSubtitle3,
-      border:
-          Border.all(width: 1, color: StackTheme.instance.color.textSubtitle3),
+      color: Theme.of(context).extension<StackColors>()!.textSubtitle3,
+      border: Border.all(
+          width: 1,
+          color: Theme.of(context).extension<StackColors>()!.textSubtitle3),
       borderRadius: BorderRadius.circular(6),
     );
   }
@@ -81,7 +82,7 @@ class _CreatePinViewState extends ConsumerState<CreatePinView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -136,14 +137,19 @@ class _CreatePinViewState extends ConsumerState<CreatePinView> {
                     disabledBorder: InputBorder.none,
                     errorBorder: InputBorder.none,
                     focusedErrorBorder: InputBorder.none,
-                    fillColor: StackTheme.instance.color.background,
+                    fillColor:
+                        Theme.of(context).extension<StackColors>()!.background,
                     counterText: "",
                   ),
                   submittedFieldDecoration: _pinPutDecoration.copyWith(
-                    color: StackTheme.instance.color.infoItemIcons,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .infoItemIcons,
                     border: Border.all(
                       width: 1,
-                      color: StackTheme.instance.color.infoItemIcons,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .infoItemIcons,
                     ),
                   ),
                   selectedFieldDecoration: _pinPutDecoration,
@@ -196,14 +202,19 @@ class _CreatePinViewState extends ConsumerState<CreatePinView> {
                     disabledBorder: InputBorder.none,
                     errorBorder: InputBorder.none,
                     focusedErrorBorder: InputBorder.none,
-                    fillColor: StackTheme.instance.color.background,
+                    fillColor:
+                        Theme.of(context).extension<StackColors>()!.background,
                     counterText: "",
                   ),
                   submittedFieldDecoration: _pinPutDecoration.copyWith(
-                    color: StackTheme.instance.color.infoItemIcons,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .infoItemIcons,
                     border: Border.all(
                       width: 1,
-                      color: StackTheme.instance.color.infoItemIcons,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .infoItemIcons,
                     ),
                   ),
                   selectedFieldDecoration: _pinPutDecoration,

lib/pages/pinpad_views/lock_screen_view.dart

@@ -16,7 +16,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/flutter_secure_storage_interface.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_pin_put/custom_pin_put.dart';
 import 'package:stackwallet/widgets/shake/shake.dart';
@@ -151,9 +151,10 @@ class _LockscreenViewState extends ConsumerState<LockscreenView> {
 
   BoxDecoration get _pinPutDecoration {
     return BoxDecoration(
-      color: StackTheme.instance.color.textSubtitle2,
-      border:
-          Border.all(width: 1, color: StackTheme.instance.color.textSubtitle2),
+      color: Theme.of(context).extension<StackColors>()!.textSubtitle2,
+      border: Border.all(
+          width: 1,
+          color: Theme.of(context).extension<StackColors>()!.textSubtitle2),
       borderRadius: BorderRadius.circular(6),
     );
   }
@@ -165,7 +166,7 @@ class _LockscreenViewState extends ConsumerState<LockscreenView> {
   late Biometrics biometrics;
 
   Scaffold get _body => Scaffold(
-        backgroundColor: StackTheme.instance.color.background,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
         appBar: AppBar(
           leading: widget.showBackButton
               ? AppBarBackButton(
@@ -221,14 +222,20 @@ class _LockscreenViewState extends ConsumerState<LockscreenView> {
                           disabledBorder: InputBorder.none,
                           errorBorder: InputBorder.none,
                           focusedErrorBorder: InputBorder.none,
-                          fillColor: StackTheme.instance.color.background,
+                          fillColor: Theme.of(context)
+                              .extension<StackColors>()!
+                              .background,
                           counterText: "",
                         ),
                         submittedFieldDecoration: _pinPutDecoration.copyWith(
-                          color: StackTheme.instance.color.infoItemIcons,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .infoItemIcons,
                           border: Border.all(
                             width: 1,
-                            color: StackTheme.instance.color.infoItemIcons,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .infoItemIcons,
                           ),
                         ),
                         selectedFieldDecoration: _pinPutDecoration,

lib/pages/receive_view/generate_receiving_uri_qr_code_view.dart

@@ -18,7 +18,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -101,7 +101,7 @@ class _GenerateUriQrCodeViewState extends State<GenerateUriQrCodeView> {
   Widget build(BuildContext context) {
     debugPrint("BUILD: $runtimeType");
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -246,7 +246,8 @@ class _GenerateUriQrCodeViewState extends State<GenerateUriQrCodeView> {
                           height: 8,
                         ),
                         TextButton(
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context),
                           onPressed: () {
                             final amountString = amountController.text;
@@ -318,11 +319,13 @@ class _GenerateUriQrCodeViewState extends State<GenerateUriQrCodeView> {
                                             child: QrImage(
                                                 data: uriString,
                                                 size: width,
-                                                backgroundColor: StackTheme
-                                                    .instance.color.popupBG,
-                                                foregroundColor: StackTheme
-                                                    .instance
-                                                    .color
+                                                backgroundColor: Theme.of(
+                                                        context)
+                                                    .extension<StackColors>()!
+                                                    .popupBG,
+                                                foregroundColor: Theme.of(
+                                                        context)
+                                                    .extension<StackColors>()!
                                                     .accentColorDark),
                                           ),
                                         ),
@@ -338,7 +341,8 @@ class _GenerateUriQrCodeViewState extends State<GenerateUriQrCodeView> {
                                               // TODO: add save button as well
                                               await _capturePng(true);
                                             },
-                                            style: StackTheme.instance
+                                            style: Theme.of(context)
+                                                .extension<StackColors>()!
                                                 .getSecondaryEnabledButtonColor(
                                                     context),
                                             child: Row(
@@ -366,9 +370,9 @@ class _GenerateUriQrCodeViewState extends State<GenerateUriQrCodeView> {
                                                       style: STextStyles.button(
                                                               context)
                                                           .copyWith(
-                                                        color: StackTheme
-                                                            .instance
-                                                            .color
+                                                        color: Theme.of(context)
+                                                            .extension<
+                                                                StackColors>()!
                                                             .buttonTextSecondary,
                                                       ),
                                                     ),

lib/pages/receive_view/receive_view.dart

@@ -14,7 +14,7 @@ import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
 import 'package:stackwallet/widgets/custom_loading_overlay.dart';
@@ -52,7 +52,10 @@ class _ReceiveViewState extends ConsumerState<ReceiveView> {
           return WillPopScope(
             onWillPop: () async => shouldPop,
             child: Container(
-              color: StackTheme.instance.color.overlay.withOpacity(0.5),
+              color: Theme.of(context)
+                  .extension<StackColors>()!
+                  .overlay
+                  .withOpacity(0.5),
               child: const CustomLoadingOverlay(
                 message: "Generating address",
                 eventBus: null,
@@ -113,7 +116,7 @@ class _ReceiveViewState extends ConsumerState<ReceiveView> {
     });
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -161,8 +164,9 @@ class _ReceiveViewState extends ConsumerState<ReceiveView> {
                                   Assets.svg.copy,
                                   width: 10,
                                   height: 10,
-                                  color:
-                                      StackTheme.instance.color.infoItemIcons,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .infoItemIcons,
                                 ),
                                 const SizedBox(
                                   width: 4,
@@ -199,12 +203,15 @@ class _ReceiveViewState extends ConsumerState<ReceiveView> {
                 if (coin != Coin.epicCash)
                   TextButton(
                     onPressed: generateNewAddress,
-                    style: StackTheme.instance
+                    style: Theme.of(context)
+                        .extension<StackColors>()!
                         .getSecondaryEnabledButtonColor(context),
                     child: Text(
                       "Generate new address",
                       style: STextStyles.button(context).copyWith(
-                          color: StackTheme.instance.color.accentColorDark),
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .accentColorDark),
                     ),
                   ),
                 const SizedBox(
@@ -219,8 +226,9 @@ class _ReceiveViewState extends ConsumerState<ReceiveView> {
                           QrImage(
                               data: "${coin.uriScheme}:$receivingAddress",
                               size: MediaQuery.of(context).size.width / 2,
-                              foregroundColor:
-                                  StackTheme.instance.color.accentColorDark),
+                              foregroundColor: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .accentColorDark),
                           const SizedBox(
                             height: 20,
                           ),

lib/pages/send_view/confirm_transaction_view.dart

@@ -15,7 +15,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -111,12 +111,15 @@ class _ConfirmTransactionViewState
             title: "Broadcast transaction failed",
             message: e.toString(),
             rightButton: TextButton(
-              style:
-                  StackTheme.instance.getSecondaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getSecondaryEnabledButtonColor(context),
               child: Text(
                 "Ok",
-                style: STextStyles.button(context)
-                    .copyWith(color: StackTheme.instance.color.accentColorDark),
+                style: STextStyles.button(context).copyWith(
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorDark),
               ),
               onPressed: () {
                 Navigator.of(context).pop();
@@ -142,7 +145,7 @@ class _ConfirmTransactionViewState
         .select((value) => value.getManagerProvider(walletId)));
     return Scaffold(
       appBar: AppBar(
-        backgroundColor: StackTheme.instance.color.background,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
         leading: AppBarBackButton(
           onPressed: () async {
             // if (FocusScope.of(context).hasFocus) {
@@ -283,7 +286,9 @@ class _ConfirmTransactionViewState
                           height: 12,
                         ),
                         RoundedContainer(
-                          color: StackTheme.instance.color.snackBarBackSuccess,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .snackBarBackSuccess,
                           child: Row(
                             mainAxisAlignment: MainAxisAlignment.spaceBetween,
                             children: [
@@ -313,7 +318,8 @@ class _ConfirmTransactionViewState
                           height: 16,
                         ),
                         TextButton(
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context),
                           onPressed: () async {
                             final unlocked = await Navigator.push(

lib/pages/send_view/send_view.dart

@@ -9,6 +9,7 @@ import 'package:stackwallet/models/send_view_auto_fill_data.dart';
 import 'package:stackwallet/pages/address_book_views/address_book_view.dart';
 import 'package:stackwallet/pages/send_view/confirm_transaction_view.dart';
 import 'package:stackwallet/pages/send_view/sub_widgets/building_transaction_dialog.dart';
+import 'package:stackwallet/pages/send_view/sub_widgets/firo_balance_selection_sheet.dart';
 import 'package:stackwallet/pages/send_view/sub_widgets/transaction_fee_selection_sheet.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/providers/ui/fee_rate_type_state_provider.dart';
@@ -27,7 +28,7 @@ import 'package:stackwallet/utilities/enums/fee_rate_type_enum.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/animated_text.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
@@ -39,8 +40,6 @@ import 'package:stackwallet/widgets/stack_dialog.dart';
 import 'package:stackwallet/widgets/stack_text_field.dart';
 import 'package:stackwallet/widgets/textfield_icon_button.dart';
 
-import 'sub_widgets/firo_balance_selection_sheet.dart';
-
 class SendView extends ConsumerStatefulWidget {
   const SendView({
     Key? key,
@@ -360,7 +359,7 @@ class _SendViewState extends ConsumerState<SendView> {
     }
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -400,7 +399,9 @@ class _SendViewState extends ConsumerState<SendView> {
                       children: [
                         Container(
                           decoration: BoxDecoration(
-                            color: StackTheme.instance.color.popupBG,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .popupBG,
                             borderRadius: BorderRadius.circular(
                               Constants.size.circularBorderRadius,
                             ),
@@ -856,8 +857,9 @@ class _SendViewState extends ConsumerState<SendView> {
                                     error,
                                     textAlign: TextAlign.left,
                                     style: STextStyles.label(context).copyWith(
-                                      color:
-                                          StackTheme.instance.color.textError,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .textError,
                                     ),
                                   ),
                                 ),
@@ -891,8 +893,9 @@ class _SendViewState extends ConsumerState<SendView> {
                                   horizontal: 12,
                                 ),
                                 child: RawMaterialButton(
-                                  splashColor:
-                                      StackTheme.instance.color.highlight,
+                                  splashColor: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .highlight,
                                   shape: RoundedRectangleBorder(
                                     borderRadius: BorderRadius.circular(
                                       Constants.size.circularBorderRadius,
@@ -997,8 +1000,9 @@ class _SendViewState extends ConsumerState<SendView> {
                                         Assets.svg.chevronDown,
                                         width: 8,
                                         height: 4,
-                                        color: StackTheme
-                                            .instance.color.textSubtitle2,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textSubtitle2,
                                       ),
                                     ],
                                   ),
@@ -1090,8 +1094,9 @@ class _SendViewState extends ConsumerState<SendView> {
                                   coin.ticker,
                                   style: STextStyles.smallMed14(context)
                                       .copyWith(
-                                          color: StackTheme
-                                              .instance.color.accentColorDark),
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .accentColorDark),
                                 ),
                               ),
                             ),
@@ -1193,8 +1198,9 @@ class _SendViewState extends ConsumerState<SendView> {
                                       .select((value) => value.currency)),
                                   style: STextStyles.smallMed14(context)
                                       .copyWith(
-                                          color: StackTheme
-                                              .instance.color.accentColorDark),
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .accentColorDark),
                                 ),
                               ),
                             ),
@@ -1270,8 +1276,9 @@ class _SendViewState extends ConsumerState<SendView> {
                                 horizontal: 12,
                               ),
                               child: RawMaterialButton(
-                                splashColor:
-                                    StackTheme.instance.color.highlight,
+                                splashColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .highlight,
                                 shape: RoundedRectangleBorder(
                                   borderRadius: BorderRadius.circular(
                                     Constants.size.circularBorderRadius,
@@ -1398,8 +1405,9 @@ class _SendViewState extends ConsumerState<SendView> {
                                             Assets.svg.chevronDown,
                                             width: 8,
                                             height: 4,
-                                            color: StackTheme
-                                                .instance.color.textSubtitle2,
+                                            color: Theme.of(context)
+                                                .extension<StackColors>()!
+                                                .textSubtitle2,
                                           ),
                                         ],
                                       ),
@@ -1439,16 +1447,17 @@ class _SendViewState extends ConsumerState<SendView> {
                                           message:
                                               "Sending to self is currently disabled",
                                           rightButton: TextButton(
-                                            style: StackTheme.instance
+                                            style: Theme.of(context)
+                                                .extension<StackColors>()!
                                                 .getSecondaryEnabledButtonColor(
                                                     context),
                                             child: Text(
                                               "Ok",
                                               style: STextStyles.button(context)
                                                   .copyWith(
-                                                      color: StackTheme
-                                                          .instance
-                                                          .color
+                                                      color: Theme.of(context)
+                                                          .extension<
+                                                              StackColors>()!
                                                           .accentColorDark),
                                             ),
                                             onPressed: () {
@@ -1503,16 +1512,17 @@ class _SendViewState extends ConsumerState<SendView> {
                                           message:
                                               "You are about to send your entire balance. Would you like to continue?",
                                           leftButton: TextButton(
-                                            style: StackTheme.instance
+                                            style: Theme.of(context)
+                                                .extension<StackColors>()!
                                                 .getSecondaryEnabledButtonColor(
                                                     context),
                                             child: Text(
                                               "Cancel",
                                               style: STextStyles.button(context)
                                                   .copyWith(
-                                                      color: StackTheme
-                                                          .instance
-                                                          .color
+                                                      color: Theme.of(context)
+                                                          .extension<
+                                                              StackColors>()!
                                                           .accentColorDark),
                                             ),
                                             onPressed: () {
@@ -1520,7 +1530,8 @@ class _SendViewState extends ConsumerState<SendView> {
                                             },
                                           ),
                                           rightButton: TextButton(
-                                            style: StackTheme.instance
+                                            style: Theme.of(context)
+                                                .extension<StackColors>()!
                                                 .getPrimaryEnabledButtonColor(
                                                     context),
                                             child: Text(
@@ -1628,7 +1639,8 @@ class _SendViewState extends ConsumerState<SendView> {
                                             title: "Transaction failed",
                                             message: e.toString(),
                                             rightButton: TextButton(
-                                              style: StackTheme.instance
+                                              style: Theme.of(context)
+                                                  .extension<StackColors>()!
                                                   .getSecondaryEnabledButtonColor(
                                                       context),
                                               child: Text(
@@ -1636,9 +1648,9 @@ class _SendViewState extends ConsumerState<SendView> {
                                                 style: STextStyles.button(
                                                         context)
                                                     .copyWith(
-                                                        color: StackTheme
-                                                            .instance
-                                                            .color
+                                                        color: Theme.of(context)
+                                                            .extension<
+                                                                StackColors>()!
                                                             .accentColorDark),
                                               ),
                                               onPressed: () {
@@ -1655,9 +1667,11 @@ class _SendViewState extends ConsumerState<SendView> {
                           style: ref
                                   .watch(previewTxButtonStateProvider.state)
                                   .state
-                              ? StackTheme.instance
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryEnabledButtonColor(context)
-                              : StackTheme.instance
+                              : Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryDisabledButtonColor(context),
                           child: Text(
                             "Preview",

lib/pages/send_view/sub_widgets/building_transaction_dialog.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class BuildingTransactionDialog extends StatefulWidget {
@@ -62,13 +62,15 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
           turns: _spinAnimation,
           child: SvgPicture.asset(
             Assets.svg.arrowRotate,
-            color: StackTheme.instance.color.accentColorDark,
+            color: Theme.of(context).extension<StackColors>()!.accentColorDark,
             width: 24,
             height: 24,
           ),
         ),
         rightButton: TextButton(
-          style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getSecondaryEnabledButtonColor(context),
           child: Text(
             "Cancel",
             style: STextStyles.itemSubtitle12(context),

lib/pages/send_view/sub_widgets/firo_balance_selection_sheet.dart

@@ -7,7 +7,7 @@ import 'package:stackwallet/services/coins/firo/firo_wallet.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/animated_text.dart';
 
 class FiroBalanceSelectionSheet extends ConsumerStatefulWidget {
@@ -50,7 +50,7 @@ class _FiroBalanceSelectionSheetState
 
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: const BorderRadius.vertical(
           top: Radius.circular(20),
         ),
@@ -69,7 +69,9 @@ class _FiroBalanceSelectionSheetState
             Center(
               child: Container(
                 decoration: BoxDecoration(
-                  color: StackTheme.instance.color.textFieldDefaultBG,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .textFieldDefaultBG,
                   borderRadius: BorderRadius.circular(
                     Constants.size.circularBorderRadius,
                   ),
@@ -114,8 +116,9 @@ class _FiroBalanceSelectionSheetState
                               width: 20,
                               height: 20,
                               child: Radio(
-                                activeColor: StackTheme
-                                    .instance.color.radioButtonIconEnabled,
+                                activeColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .radioButtonIconEnabled,
                                 value: "Private",
                                 groupValue: ref
                                     .watch(
@@ -204,8 +207,9 @@ class _FiroBalanceSelectionSheetState
                               width: 20,
                               height: 20,
                               child: Radio(
-                                activeColor: StackTheme
-                                    .instance.color.radioButtonIconEnabled,
+                                activeColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .radioButtonIconEnabled,
                                 value: "Public",
                                 groupValue: ref
                                     .watch(

lib/pages/send_view/sub_widgets/sending_transaction_dialog.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/utilities/assets.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class SendingTransactionDialog extends StatefulWidget {
@@ -55,7 +55,7 @@ class _RestoringDialogState extends State<SendingTransactionDialog>
           turns: _spinAnimation,
           child: SvgPicture.asset(
             Assets.svg.arrowRotate,
-            color: StackTheme.instance.color.accentColorDark,
+            color: Theme.of(context).extension<StackColors>()!.accentColorDark,
             width: 24,
             height: 24,
           ),

lib/pages/send_view/sub_widgets/transaction_fee_selection_sheet.dart

@@ -11,7 +11,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/fee_rate_type_enum.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/animated_text.dart';
 
 final feeSheetSessionCacheProvider =
@@ -163,7 +163,7 @@ class _TransactionFeeSelectionSheetState
 
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: const BorderRadius.vertical(
           top: Radius.circular(20),
         ),
@@ -182,7 +182,9 @@ class _TransactionFeeSelectionSheetState
             Center(
               child: Container(
                 decoration: BoxDecoration(
-                  color: StackTheme.instance.color.textFieldDefaultBG,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .textFieldDefaultBG,
                   borderRadius: BorderRadius.circular(
                     Constants.size.circularBorderRadius,
                   ),
@@ -235,8 +237,9 @@ class _TransactionFeeSelectionSheetState
                                   width: 20,
                                   height: 20,
                                   child: Radio(
-                                    activeColor: StackTheme
-                                        .instance.color.radioButtonIconEnabled,
+                                    activeColor: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .radioButtonIconEnabled,
                                     value: FeeRateType.fast,
                                     groupValue: ref
                                         .watch(feeRateTypeStateProvider.state)
@@ -362,8 +365,9 @@ class _TransactionFeeSelectionSheetState
                                   width: 20,
                                   height: 20,
                                   child: Radio(
-                                    activeColor: StackTheme
-                                        .instance.color.radioButtonIconEnabled,
+                                    activeColor: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .radioButtonIconEnabled,
                                     value: FeeRateType.average,
                                     groupValue: ref
                                         .watch(feeRateTypeStateProvider.state)
@@ -488,8 +492,9 @@ class _TransactionFeeSelectionSheetState
                                   width: 20,
                                   height: 20,
                                   child: Radio(
-                                    activeColor: StackTheme
-                                        .instance.color.radioButtonIconEnabled,
+                                    activeColor: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .radioButtonIconEnabled,
                                     value: FeeRateType.slow,
                                     groupValue: ref
                                         .watch(feeRateTypeStateProvider.state)

lib/pages/settings_views/global_settings_view/about_view.dart

@@ -10,7 +10,7 @@ import 'package:lelantus/git_versions.dart' as FIRO_VERSIONS;
 import 'package:package_info_plus/package_info_plus.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -118,7 +118,7 @@ class AboutView extends ConsumerWidget {
     Future commitMoneroFuture = Future.wait(futureMoneroList);
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -269,20 +269,23 @@ class AboutView extends ConsumerWidget {
                               case CommitStatus.isHead:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorGreen);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorGreen);
                                 break;
                               case CommitStatus.isOldCommit:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorYellow);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorYellow);
                                 break;
                               case CommitStatus.notACommit:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorRed);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorRed);
                                 break;
                               default:
                                 break;
@@ -335,20 +338,23 @@ class AboutView extends ConsumerWidget {
                               case CommitStatus.isHead:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorGreen);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorGreen);
                                 break;
                               case CommitStatus.isOldCommit:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorYellow);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorYellow);
                                 break;
                               case CommitStatus.notACommit:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorRed);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorRed);
                                 break;
                               default:
                                 break;
@@ -401,20 +407,23 @@ class AboutView extends ConsumerWidget {
                               case CommitStatus.isHead:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorGreen);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorGreen);
                                 break;
                               case CommitStatus.isOldCommit:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorYellow);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorYellow);
                                 break;
                               case CommitStatus.notACommit:
                                 indicationStyle =
                                     STextStyles.itemSubtitle(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorRed);
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorRed);
                                 break;
                               default:
                                 break;

lib/pages/settings_views/global_settings_view/advanced_views/advanced_settings_view.dart

@@ -4,7 +4,7 @@ import 'package:stackwallet/pages/settings_views/global_settings_view/advanced_v
 import 'package:stackwallet/providers/global/prefs_provider.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -21,7 +21,7 @@ class AdvancedSettingsView extends StatelessWidget {
     debugPrint("BUILD: $runtimeType");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -41,7 +41,7 @@ class AdvancedSettingsView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -75,7 +75,7 @@ class AdvancedSettingsView extends StatelessWidget {
               child: Consumer(
                 builder: (_, ref, __) {
                   return RawMaterialButton(
-                    // splashColor: StackTheme.instance.color.highlight,
+                    // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                     materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                     shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(

lib/pages/settings_views/global_settings_view/advanced_views/debug_view.dart

@@ -15,7 +15,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
 import 'package:stackwallet/widgets/custom_loading_overlay.dart';
@@ -90,7 +90,7 @@ class _DebugViewState extends ConsumerState<DebugView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -114,10 +114,12 @@ class _DebugViewState extends ConsumerState<DebugView> {
                 key: const Key("deleteLogsAppBarButtonKey"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: SvgPicture.asset(
                   Assets.svg.trash,
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                   width: 20,
                   height: 20,
                 ),
@@ -129,7 +131,8 @@ class _DebugViewState extends ConsumerState<DebugView> {
                       message:
                           "You are about to delete all logs permanently. Are you sure?",
                       leftButton: TextButton(
-                        style: StackTheme.instance
+                        style: Theme.of(context)
+                            .extension<StackColors>()!
                             .getSecondaryEnabledButtonColor(context),
                         child: Text(
                           "Cancel",
@@ -140,7 +143,8 @@ class _DebugViewState extends ConsumerState<DebugView> {
                         },
                       ),
                       rightButton: TextButton(
-                        style: StackTheme.instance
+                        style: Theme.of(context)
+                            .extension<StackColors>()!
                             .getPrimaryEnabledButtonColor(context),
                         child: Text(
                           "Delete logs",
@@ -376,14 +380,18 @@ class _DebugViewState extends ConsumerState<DebugView> {
                         return Container(
                           key: Key("log_${log.id}_${log.timestampInMillisUTC}"),
                           decoration: BoxDecoration(
-                            color: StackTheme.instance.color.popupBG,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .popupBG,
                             borderRadius: _borderRadius(index, logs.length),
                           ),
                           child: Padding(
                             padding: const EdgeInsets.all(4),
                             child: RoundedContainer(
                               padding: const EdgeInsets.all(0),
-                              color: StackTheme.instance.color.popupBG,
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .popupBG,
                               child: Column(
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
@@ -395,18 +403,20 @@ class _DebugViewState extends ConsumerState<DebugView> {
                                             .copyWith(
                                           fontSize: 8,
                                           color: (log.logLevel == LogLevel.Info
-                                              ? StackTheme.instance.color
+                                              ? Theme.of(context)
+                                                  .extension<StackColors>()!
                                                   .topNavIconGreen
                                               : (log.logLevel ==
                                                       LogLevel.Warning
-                                                  ? StackTheme.instance.color
+                                                  ? Theme.of(context)
+                                                      .extension<StackColors>()!
                                                       .topNavIconYellow
                                                   : (log.logLevel ==
                                                           LogLevel.Error
                                                       ? Colors.orange
-                                                      : StackTheme
-                                                          .instance
-                                                          .color
+                                                      : Theme.of(context)
+                                                          .extension<
+                                                              StackColors>()!
                                                           .topNavIconRed))),
                                         ),
                                       ),
@@ -415,8 +425,9 @@ class _DebugViewState extends ConsumerState<DebugView> {
                                         style: STextStyles.baseXS(context)
                                             .copyWith(
                                           fontSize: 8,
-                                          color: StackTheme
-                                              .instance.color.textDark3,
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .textDark3,
                                         ),
                                       ),
                                     ],

lib/pages/settings_views/global_settings_view/appearance_settings_view.dart

@@ -9,7 +9,6 @@ import 'package:stackwallet/utilities/theme/color_theme.dart';
 import 'package:stackwallet/utilities/theme/dark_colors.dart';
 import 'package:stackwallet/utilities/theme/light_colors.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -22,7 +21,7 @@ class AppearanceSettingsView extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -51,7 +50,9 @@ class AppearanceSettingsView extends ConsumerWidget {
                         child: Consumer(
                           builder: (_, ref, __) {
                             return RawMaterialButton(
-                              splashColor: StackTheme.instance.color.highlight,
+                              splashColor: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .highlight,
                               materialTapTargetSize:
                                   MaterialTapTargetSize.shrinkWrap,
                               shape: RoundedRectangleBorder(
@@ -102,7 +103,9 @@ class AppearanceSettingsView extends ConsumerWidget {
                         child: Consumer(
                           builder: (_, ref, __) {
                             return RawMaterialButton(
-                              splashColor: StackTheme.instance.color.highlight,
+                              splashColor: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .highlight,
                               materialTapTargetSize:
                                   MaterialTapTargetSize.shrinkWrap,
                               shape: RoundedRectangleBorder(
@@ -113,28 +116,15 @@ class AppearanceSettingsView extends ConsumerWidget {
                               onPressed: null,
                               child: Padding(
                                 padding:
-                                    const EdgeInsets.symmetric(vertical: 2),
+                                    const EdgeInsets.symmetric(vertical: 8),
                                 child: Row(
                                   mainAxisAlignment:
                                       MainAxisAlignment.spaceBetween,
                                   children: [
-                                    Column(
-                                      crossAxisAlignment:
-                                          CrossAxisAlignment.start,
-                                      children: [
-                                        Text(
-                                          "Enabled dark mode",
-                                          style:
-                                              STextStyles.titleBold12(context),
-                                          textAlign: TextAlign.left,
-                                        ),
-                                        Text(
-                                          "Requires restart",
-                                          style:
-                                              STextStyles.itemSubtitle(context),
-                                          textAlign: TextAlign.left,
-                                        ),
-                                      ],
+                                    Text(
+                                      "Enable dark mode",
+                                      style: STextStyles.titleBold12(context),
+                                      textAlign: TextAlign.left,
                                     ),
                                     SizedBox(
                                       height: 20,

lib/pages/settings_views/global_settings_view/currency_view.dart

@@ -6,7 +6,7 @@ import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
@@ -101,7 +101,7 @@ class _CurrencyViewState extends ConsumerState<BaseCurrencySettingsView> {
     }
     currenciesWithoutSelected = _filtered();
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -204,7 +204,9 @@ class _CurrencyViewState extends ConsumerState<BaseCurrencySettingsView> {
                       (context, index) {
                         return Container(
                           decoration: BoxDecoration(
-                            color: StackTheme.instance.color.popupBG,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .popupBG,
                             borderRadius: _borderRadius(index),
                           ),
                           child: Padding(
@@ -214,8 +216,12 @@ class _CurrencyViewState extends ConsumerState<BaseCurrencySettingsView> {
                             child: RoundedContainer(
                               padding: const EdgeInsets.all(0),
                               color: currenciesWithoutSelected[index] == current
-                                  ? StackTheme.instance.color.currencyListItemBG
-                                  : StackTheme.instance.color.popupBG,
+                                  ? Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .currencyListItemBG
+                                  : Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .popupBG,
                               child: RawMaterialButton(
                                 onPressed: () async {
                                   onTap(index);
@@ -235,7 +241,8 @@ class _CurrencyViewState extends ConsumerState<BaseCurrencySettingsView> {
                                         width: 20,
                                         height: 20,
                                         child: Radio(
-                                          activeColor: StackTheme.instance.color
+                                          activeColor: Theme.of(context)
+                                              .extension<StackColors>()!
                                               .radioButtonIconEnabled,
                                           materialTapTargetSize:
                                               MaterialTapTargetSize.shrinkWrap,

lib/pages/settings_views/global_settings_view/global_settings_view.dart

@@ -16,7 +16,7 @@ import 'package:stackwallet/pages/settings_views/sub_widgets/settings_list_butto
 import 'package:stackwallet/route_generator.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -31,7 +31,7 @@ class GlobalSettingsView extends StatelessWidget {
   Widget build(BuildContext context) {
     debugPrint("BUILD: $runtimeType");
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -231,7 +231,7 @@ class GlobalSettingsView extends StatelessWidget {
                               //       ?.copyWith(
                               //         backgroundColor:
                               //             MaterialStateProperty.all<Color>(
-                              //           StackTheme.instance.color.accentColorDark
+                              //           Theme.of(context).extension<StackColors>()!.accentColorDark
                               //         ),
                               //       ),
                               //   child: Text(

lib/pages/settings_views/global_settings_view/hidden_settings.dart

@@ -7,7 +7,7 @@ import 'package:stackwallet/providers/global/debug_service_provider.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
 class HiddenSettings extends StatelessWidget {
@@ -18,7 +18,7 @@ class HiddenSettings extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: Container(),
         title: Text(
@@ -64,8 +64,9 @@ class HiddenSettings extends StatelessWidget {
                             child: Text(
                               "Delete notifications",
                               style: STextStyles.button(context).copyWith(
-                                  color: StackTheme
-                                      .instance.color.accentColorDark),
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .accentColorDark),
                             ),
                           ),
                         );
@@ -92,7 +93,7 @@ class HiddenSettings extends StatelessWidget {
                       //       child: Text(
                       //         "Delete trade history",
                       //         style: STextStyles.button(context).copyWith(
-                      //           color: StackTheme.instance.color.accentColorDark
+                      //           color: Theme.of(context).extension<StackColors>()!.accentColorDark
                       //         ),
                       //       ),
                       //     ),
@@ -118,8 +119,9 @@ class HiddenSettings extends StatelessWidget {
                             child: Text(
                               "Delete Debug Logs",
                               style: STextStyles.button(context).copyWith(
-                                  color: StackTheme
-                                      .instance.color.accentColorDark),
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .accentColorDark),
                             ),
                           ),
                         );
@@ -147,7 +149,7 @@ class HiddenSettings extends StatelessWidget {
                       //     child: Text(
                       //       "Lottie test",
                       //       style: STextStyles.button(context).copyWith(
-                      //         color: StackTheme.instance.color.accentColorDark
+                      //         color: Theme.of(context).extension<StackColors>()!.accentColorDark
                       //       ),
                       //     ),
                       //   ),

lib/pages/settings_views/global_settings_view/language_view.dart

@@ -6,7 +6,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/languages_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
@@ -99,7 +99,7 @@ class _LanguageViewState extends ConsumerState<LanguageSettingsView> {
     }
     listWithoutSelected = _filtered();
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -202,7 +202,9 @@ class _LanguageViewState extends ConsumerState<LanguageSettingsView> {
                       (context, index) {
                         return Container(
                           decoration: BoxDecoration(
-                            color: StackTheme.instance.color.popupBG,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .popupBG,
                             borderRadius: _borderRadius(index),
                           ),
                           child: Padding(
@@ -212,8 +214,12 @@ class _LanguageViewState extends ConsumerState<LanguageSettingsView> {
                             child: RoundedContainer(
                               padding: const EdgeInsets.all(0),
                               color: index == 0
-                                  ? StackTheme.instance.color.currencyListItemBG
-                                  : StackTheme.instance.color.popupBG,
+                                  ? Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .currencyListItemBG
+                                  : Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .popupBG,
                               child: RawMaterialButton(
                                 onPressed: () async {
                                   onTap(index);
@@ -233,7 +239,8 @@ class _LanguageViewState extends ConsumerState<LanguageSettingsView> {
                                         width: 20,
                                         height: 20,
                                         child: Radio(
-                                          activeColor: StackTheme.instance.color
+                                          activeColor: Theme.of(context)
+                                              .extension<StackColors>()!
                                               .radioButtonIconEnabled,
                                           value: true,
                                           groupValue: index == 0,

lib/pages/settings_views/global_settings_view/manage_nodes_views/add_edit_node_view.dart

@@ -19,7 +19,7 @@ import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/test_epic_box_connection.dart';
 import 'package:stackwallet/utilities/test_monero_node_connection.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
@@ -192,7 +192,7 @@ class _AddEditNodeViewState extends ConsumerState<AddEditNodeView> {
             : null;
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -223,10 +223,12 @@ class _AddEditNodeViewState extends ConsumerState<AddEditNodeView> {
                   key: const Key("deleteNodeAppBarButtonKey"),
                   size: 36,
                   shadows: const [],
-                  color: StackTheme.instance.color.background,
+                  color: Theme.of(context).extension<StackColors>()!.background,
                   icon: SvgPicture.asset(
                     Assets.svg.trash,
-                    color: StackTheme.instance.color.accentColorDark,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorDark,
                     width: 20,
                     height: 20,
                   ),
@@ -293,23 +295,30 @@ class _AddEditNodeViewState extends ConsumerState<AddEditNodeView> {
                                   await _testConnection();
                                 }
                               : null,
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getSecondaryEnabledButtonColor(context),
                           child: Text(
                             "Test connection",
                             style: STextStyles.button(context).copyWith(
                               color: testConnectionEnabled
-                                  ? StackTheme.instance.color.textDark
-                                  : StackTheme.instance.color.textWhite,
+                                  ? Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .textDark
+                                  : Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .textWhite,
                             ),
                           ),
                         ),
                         const SizedBox(height: 16),
                         TextButton(
                           style: saveEnabled
-                              ? StackTheme.instance
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryEnabledButtonColor(context)
-                              : StackTheme.instance
+                              : Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryDisabledButtonColor(context),
                           onPressed: saveEnabled
                               ? () async {
@@ -335,15 +344,18 @@ class _AddEditNodeViewState extends ConsumerState<AddEditNodeView> {
                                             "Cancel",
                                             style: STextStyles.button(context)
                                                 .copyWith(
-                                                    color: StackTheme.instance
-                                                        .color.accentColorDark),
+                                                    color: Theme.of(context)
+                                                        .extension<
+                                                            StackColors>()!
+                                                        .accentColorDark),
                                           ),
                                         ),
                                         rightButton: TextButton(
                                           onPressed: () async {
                                             Navigator.of(context).pop(true);
                                           },
-                                          style: StackTheme.instance
+                                          style: Theme.of(context)
+                                              .extension<StackColors>()!
                                               .getPrimaryEnabledButtonColor(
                                                   context),
                                           child: Text(
@@ -889,8 +901,9 @@ class _NodeFormState extends ConsumerState<NodeForm> {
                         height: 20,
                         child: Checkbox(
                           fillColor: widget.readOnly
-                              ? MaterialStateProperty.all(
-                                  StackTheme.instance.color.checkboxBGDisabled)
+                              ? MaterialStateProperty.all(Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .checkboxBGDisabled)
                               : null,
                           materialTapTargetSize:
                               MaterialTapTargetSize.shrinkWrap,

lib/pages/settings_views/global_settings_view/manage_nodes_views/coin_nodes_view.dart

@@ -6,7 +6,7 @@ import 'package:stackwallet/pages/settings_views/sub_widgets/nodes_list.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:tuple/tuple.dart';
 
@@ -38,7 +38,7 @@ class _CoinNodesViewState extends ConsumerState<CoinNodesView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -62,10 +62,12 @@ class _CoinNodesViewState extends ConsumerState<CoinNodesView> {
                 key: const Key("manageNodesAddNewNodeButtonKey"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: SvgPicture.asset(
                   Assets.svg.plus,
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                   width: 20,
                   height: 20,
                 ),

lib/pages/settings_views/global_settings_view/manage_nodes_views/manage_nodes_view.dart

@@ -7,7 +7,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -48,7 +48,7 @@ class _ManageNodesViewState extends ConsumerState<ManageNodesView> {
         : _coins.sublist(0, _coins.length - kTestNetCoinCount);
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -82,7 +82,7 @@ class _ManageNodesViewState extends ConsumerState<ManageNodesView> {
                     child: RoundedWhiteContainer(
                       padding: const EdgeInsets.all(0),
                       child: RawMaterialButton(
-                        // splashColor: StackTheme.instance.color.highlight,
+                        // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                         shape: RoundedRectangleBorder(
                           borderRadius: BorderRadius.circular(
                             Constants.size.circularBorderRadius,

lib/pages/settings_views/global_settings_view/manage_nodes_views/node_details_view.dart

@@ -16,7 +16,7 @@ import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/test_epic_box_connection.dart';
 import 'package:stackwallet/utilities/test_monero_node_connection.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:tuple/tuple.dart';
 
@@ -140,7 +140,7 @@ class _NodeDetailsViewState extends ConsumerState<NodeDetailsView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -171,10 +171,12 @@ class _NodeDetailsViewState extends ConsumerState<NodeDetailsView> {
                   key: const Key("nodeDetailsEditNodeAppBarButtonKey"),
                   size: 36,
                   shadows: const [],
-                  color: StackTheme.instance.color.background,
+                  color: Theme.of(context).extension<StackColors>()!.background,
                   icon: SvgPicture.asset(
                     Assets.svg.pencil,
-                    color: StackTheme.instance.color.accentColorDark,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorDark,
                     width: 20,
                     height: 20,
                   ),
@@ -223,7 +225,8 @@ class _NodeDetailsViewState extends ConsumerState<NodeDetailsView> {
                         ),
                         const Spacer(),
                         TextButton(
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getSecondaryEnabledButtonColor(context),
                           onPressed: () async {
                             await _testConnection(ref, context);
@@ -231,8 +234,9 @@ class _NodeDetailsViewState extends ConsumerState<NodeDetailsView> {
                           child: Text(
                             "Test connection",
                             style: STextStyles.button(context).copyWith(
-                                color:
-                                    StackTheme.instance.color.accentColorDark),
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark),
                           ),
                         ),
                         const SizedBox(height: 16),

lib/pages/settings_views/global_settings_view/security_views/change_pin_view/change_pin_view.dart

@@ -8,7 +8,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/flutter_secure_storage_interface.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_pin_put/custom_pin_put.dart';
 
@@ -31,9 +31,10 @@ class ChangePinView extends StatefulWidget {
 class _ChangePinViewState extends State<ChangePinView> {
   BoxDecoration get _pinPutDecoration {
     return BoxDecoration(
-      color: StackTheme.instance.color.textSubtitle2,
-      border:
-          Border.all(width: 1, color: StackTheme.instance.color.textSubtitle2),
+      color: Theme.of(context).extension<StackColors>()!.textSubtitle2,
+      border: Border.all(
+          width: 1,
+          color: Theme.of(context).extension<StackColors>()!.textSubtitle2),
       borderRadius: BorderRadius.circular(6),
     );
   }
@@ -70,7 +71,7 @@ class _ChangePinViewState extends State<ChangePinView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -120,14 +121,19 @@ class _ChangePinViewState extends State<ChangePinView> {
                     disabledBorder: InputBorder.none,
                     errorBorder: InputBorder.none,
                     focusedErrorBorder: InputBorder.none,
-                    fillColor: StackTheme.instance.color.background,
+                    fillColor:
+                        Theme.of(context).extension<StackColors>()!.background,
                     counterText: "",
                   ),
                   submittedFieldDecoration: _pinPutDecoration.copyWith(
-                    color: StackTheme.instance.color.infoItemIcons,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .infoItemIcons,
                     border: Border.all(
                       width: 1,
-                      color: StackTheme.instance.color.infoItemIcons,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .infoItemIcons,
                     ),
                   ),
                   selectedFieldDecoration: _pinPutDecoration,
@@ -176,14 +182,19 @@ class _ChangePinViewState extends State<ChangePinView> {
                     disabledBorder: InputBorder.none,
                     errorBorder: InputBorder.none,
                     focusedErrorBorder: InputBorder.none,
-                    fillColor: StackTheme.instance.color.background,
+                    fillColor:
+                        Theme.of(context).extension<StackColors>()!.background,
                     counterText: "",
                   ),
                   submittedFieldDecoration: _pinPutDecoration.copyWith(
-                    color: StackTheme.instance.color.infoItemIcons,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .infoItemIcons,
                     border: Border.all(
                       width: 1,
-                      color: StackTheme.instance.color.infoItemIcons,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .infoItemIcons,
                     ),
                   ),
                   selectedFieldDecoration: _pinPutDecoration,

lib/pages/settings_views/global_settings_view/security_views/security_view.dart

@@ -6,7 +6,7 @@ import 'package:stackwallet/providers/global/prefs_provider.dart';
 import 'package:stackwallet/route_generator.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -23,7 +23,7 @@ class SecurityView extends StatelessWidget {
     debugPrint("BUILD: $runtimeType");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -43,7 +43,7 @@ class SecurityView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -92,7 +92,7 @@ class SecurityView extends StatelessWidget {
               child: Consumer(
                 builder: (_, ref, __) {
                   return RawMaterialButton(
-                    // splashColor: StackTheme.instance.color.highlight,
+                    // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                     materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                     shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(

lib/pages/settings_views/global_settings_view/stack_backup_views/auto_backup_view.dart

@@ -10,7 +10,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/backup_frequency_type.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
@@ -81,11 +81,14 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
           title: "Enable Auto Backup",
           message: "To enable Auto Backup, you need to create a backup file.",
           leftButton: TextButton(
-            style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getSecondaryEnabledButtonColor(context),
             child: Text(
               "Back",
               style: STextStyles.button(context).copyWith(
-                color: StackTheme.instance.color.accentColorDark,
+                color:
+                    Theme.of(context).extension<StackColors>()!.accentColorDark,
               ),
             ),
             onPressed: () {
@@ -93,7 +96,9 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
             },
           ),
           rightButton: TextButton(
-            style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getPrimaryEnabledButtonColor(context),
             child: Text(
               "Continue",
               style: STextStyles.button(context),
@@ -133,11 +138,14 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
           message:
               "You are turning off Auto Backup. You can turn it back on at any time. Your previous Auto Backup file will not be deleted. Remember to backup your wallets manually so you don't lose important information.",
           leftButton: TextButton(
-            style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getSecondaryEnabledButtonColor(context),
             child: Text(
               "Back",
               style: STextStyles.button(context).copyWith(
-                color: StackTheme.instance.color.accentColorDark,
+                color:
+                    Theme.of(context).extension<StackColors>()!.accentColorDark,
               ),
             ),
             onPressed: () {
@@ -145,7 +153,9 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
             },
           ),
           rightButton: TextButton(
-            style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getPrimaryEnabledButtonColor(context),
             child: Text(
               "Disable",
               style: STextStyles.button(context),
@@ -214,7 +224,7 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
     });
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -234,7 +244,7 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -347,8 +357,10 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
                       controller: fileLocationController,
                       enabled: false,
                       style: STextStyles.field(context).copyWith(
-                        color:
-                            StackTheme.instance.color.textDark.withOpacity(0.5),
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textDark
+                            .withOpacity(0.5),
                       ),
                       readOnly: true,
                       enableSuggestions: false,
@@ -379,8 +391,10 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
                       controller: passwordController,
                       enabled: false,
                       style: STextStyles.field(context).copyWith(
-                        color:
-                            StackTheme.instance.color.textDark.withOpacity(0.5),
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textDark
+                            .withOpacity(0.5),
                       ),
                       obscureText: true,
                       enableSuggestions: false,
@@ -413,8 +427,10 @@ class _AutoBackupViewState extends ConsumerState<AutoBackupView> {
                     controller: frequencyController,
                     enabled: false,
                     style: STextStyles.field(context).copyWith(
-                      color:
-                          StackTheme.instance.color.textDark.withOpacity(0.5),
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .textDark
+                          .withOpacity(0.5),
                     ),
                     toolbarOptions: const ToolbarOptions(
                       copy: true,

lib/pages/settings_views/global_settings_view/stack_backup_views/create_auto_backup_view.dart

@@ -20,7 +20,7 @@ import 'package:stackwallet/utilities/flutter_secure_storage_interface.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/progress_bar.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
@@ -102,7 +102,7 @@ class _EnableAutoBackupViewState extends ConsumerState<CreateAutoBackupView> {
     debugPrint("BUILD: $runtimeType");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -164,7 +164,9 @@ class _EnableAutoBackupViewState extends ConsumerState<CreateAutoBackupView> {
                               ),
                               SvgPicture.asset(
                                 Assets.svg.folder,
-                                color: StackTheme.instance.color.textDark3,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textDark3,
                                 width: 16,
                                 height: 16,
                               ),
@@ -224,7 +226,9 @@ class _EnableAutoBackupViewState extends ConsumerState<CreateAutoBackupView> {
                                     hidePassword
                                         ? Assets.svg.eye
                                         : Assets.svg.eyeSlash,
-                                    color: StackTheme.instance.color.textDark3,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textDark3,
                                     width: 16,
                                     height: 16,
                                   ),
@@ -303,12 +307,19 @@ class _EnableAutoBackupViewState extends ConsumerState<CreateAutoBackupView> {
                           width: MediaQuery.of(context).size.width - 32 - 24,
                           height: 5,
                           fillColor: passwordStrength < 0.51
-                              ? StackTheme.instance.color.accentColorRed
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .accentColorRed
                               : passwordStrength < 1
-                                  ? StackTheme.instance.color.accentColorYellow
-                                  : StackTheme.instance.color.accentColorGreen,
-                          backgroundColor:
-                              StackTheme.instance.color.buttonBackSecondary,
+                                  ? Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .accentColorYellow
+                                  : Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .accentColorGreen,
+                          backgroundColor: Theme.of(context)
+                              .extension<StackColors>()!
+                              .buttonBackSecondary,
                           percent:
                               passwordStrength < 0.25 ? 0.03 : passwordStrength,
                         ),
@@ -351,7 +362,9 @@ class _EnableAutoBackupViewState extends ConsumerState<CreateAutoBackupView> {
                                     hidePassword
                                         ? Assets.svg.eye
                                         : Assets.svg.eyeSlash,
-                                    color: StackTheme.instance.color.textDark3,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textDark3,
                                     width: 16,
                                     height: 16,
                                   ),
@@ -387,7 +400,9 @@ class _EnableAutoBackupViewState extends ConsumerState<CreateAutoBackupView> {
                         ),
                         Positioned.fill(
                           child: RawMaterialButton(
-                            splashColor: StackTheme.instance.color.highlight,
+                            splashColor: Theme.of(context)
+                                .extension<StackColors>()!
+                                .highlight,
                             shape: RoundedRectangleBorder(
                               borderRadius: BorderRadius.circular(
                                 Constants.size.circularBorderRadius,
@@ -424,8 +439,9 @@ class _EnableAutoBackupViewState extends ConsumerState<CreateAutoBackupView> {
                                     padding: const EdgeInsets.only(right: 4.0),
                                     child: SvgPicture.asset(
                                       Assets.svg.chevronDown,
-                                      color: StackTheme
-                                          .instance.color.textSubtitle2,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .textSubtitle2,
                                       width: 12,
                                       height: 6,
                                     ),
@@ -443,9 +459,11 @@ class _EnableAutoBackupViewState extends ConsumerState<CreateAutoBackupView> {
                     ),
                     TextButton(
                       style: shouldEnableCreate
-                          ? StackTheme.instance
+                          ? Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context)
-                          : StackTheme.instance
+                          : Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryDisabledButtonColor(context),
                       onPressed: !shouldEnableCreate
                           ? null

lib/pages/settings_views/global_settings_view/stack_backup_views/create_backup_information_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:stackwallet/pages/settings_views/global_settings_view/stack_backup_views/create_backup_view.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -13,7 +13,7 @@ class CreateBackupInfoView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -63,7 +63,8 @@ class CreateBackupInfoView extends StatelessWidget {
                       ),
                       const Spacer(),
                       TextButton(
-                        style: StackTheme.instance
+                        style: Theme.of(context)
+                            .extension<StackColors>()!
                             .getPrimaryEnabledButtonColor(context),
                         onPressed: () {
                           Navigator.of(context)

lib/pages/settings_views/global_settings_view/stack_backup_views/create_backup_view.dart

@@ -13,7 +13,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/progress_bar.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
@@ -82,7 +82,7 @@ class _RestoreFromFileViewState extends State<CreateBackupView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -164,8 +164,9 @@ class _RestoreFromFileViewState extends State<CreateBackupView> {
                                     ),
                                     SvgPicture.asset(
                                       Assets.svg.folder,
-                                      color:
-                                          StackTheme.instance.color.textDark3,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .textDark3,
                                       width: 16,
                                       height: 16,
                                     ),
@@ -229,8 +230,9 @@ class _RestoreFromFileViewState extends State<CreateBackupView> {
                                       hidePassword
                                           ? Assets.svg.eye
                                           : Assets.svg.eyeSlash,
-                                      color:
-                                          StackTheme.instance.color.textDark3,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .textDark3,
                                       width: 16,
                                       height: 16,
                                     ),
@@ -309,14 +311,15 @@ class _RestoreFromFileViewState extends State<CreateBackupView> {
                             width: MediaQuery.of(context).size.width - 32 - 24,
                             height: 5,
                             fillColor: passwordStrength < 0.51
-                                ? StackTheme.instance.color.accentColorRed
+                                ? Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorRed
                                 : passwordStrength < 1
-                                    ? StackTheme
-                                        .instance.color.accentColorYellow
-                                    : StackTheme
-                                        .instance.color.accentColorGreen,
-                            backgroundColor:
-                                StackTheme.instance.color.buttonBackSecondary,
+                                    ? Theme.of(context).extension<StackColors>()!.accentColorYellow
+                                    : Theme.of(context).extension<StackColors>()!.accentColorGreen,
+                            backgroundColor: Theme.of(context)
+                                .extension<StackColors>()!
+                                .buttonBackSecondary,
                             percent: passwordStrength < 0.25
                                 ? 0.03
                                 : passwordStrength,
@@ -360,8 +363,9 @@ class _RestoreFromFileViewState extends State<CreateBackupView> {
                                       hidePassword
                                           ? Assets.svg.eye
                                           : Assets.svg.eyeSlash,
-                                      color:
-                                          StackTheme.instance.color.textDark3,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .textDark3,
                                       width: 16,
                                       height: 16,
                                     ),
@@ -385,10 +389,8 @@ class _RestoreFromFileViewState extends State<CreateBackupView> {
                       const Spacer(),
                       TextButton(
                         style: shouldEnableCreate
-                            ? StackTheme.instance
-                                .getPrimaryEnabledButtonColor(context)
-                            : StackTheme.instance
-                                .getPrimaryDisabledButtonColor(context),
+                            ? Theme.of(context) .extension<StackColors>()!.getPrimaryEnabledButtonColor(context)
+                            : Theme.of(context) .extension<StackColors>()!.getPrimaryDisabledButtonColor(context),
                         onPressed: !shouldEnableCreate
                             ? null
                             : () async {

lib/pages/settings_views/global_settings_view/stack_backup_views/dialogs/cancel_stack_restore_dialog.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
 class CancelStackRestoreDialog extends StatelessWidget {
@@ -19,7 +19,9 @@ class CancelStackRestoreDialog extends StatelessWidget {
         message:
             "Cancelling will revert any changes that may have been applied",
         leftButton: TextButton(
-          style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getSecondaryEnabledButtonColor(context),
           child: Text(
             "Back",
             style: STextStyles.itemSubtitle12(context),
@@ -29,11 +31,14 @@ class CancelStackRestoreDialog extends StatelessWidget {
           },
         ),
         rightButton: TextButton(
-          style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getPrimaryEnabledButtonColor(context),
           child: Text(
             "Yes, cancel",
             style: STextStyles.itemSubtitle12(context).copyWith(
-              color: StackTheme.instance.color.buttonTextPrimary,
+              color:
+                  Theme.of(context).extension<StackColors>()!.buttonTextPrimary,
             ),
           ),
           onPressed: () {

lib/pages/settings_views/global_settings_view/stack_backup_views/edit_auto_backup_view.dart

@@ -20,7 +20,7 @@ import 'package:stackwallet/utilities/flutter_secure_storage_interface.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/progress_bar.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
@@ -104,7 +104,7 @@ class _EditAutoBackupViewState extends ConsumerState<EditAutoBackupView> {
     debugPrint("BUILD: $runtimeType");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -166,7 +166,9 @@ class _EditAutoBackupViewState extends ConsumerState<EditAutoBackupView> {
                               ),
                               SvgPicture.asset(
                                 Assets.svg.folder,
-                                color: StackTheme.instance.color.textDark3,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textDark3,
                                 width: 16,
                                 height: 16,
                               ),
@@ -226,7 +228,9 @@ class _EditAutoBackupViewState extends ConsumerState<EditAutoBackupView> {
                                     hidePassword
                                         ? Assets.svg.eye
                                         : Assets.svg.eyeSlash,
-                                    color: StackTheme.instance.color.textDark3,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textDark3,
                                     width: 16,
                                     height: 16,
                                   ),
@@ -305,12 +309,19 @@ class _EditAutoBackupViewState extends ConsumerState<EditAutoBackupView> {
                           width: MediaQuery.of(context).size.width - 32 - 24,
                           height: 5,
                           fillColor: passwordStrength < 0.51
-                              ? StackTheme.instance.color.accentColorRed
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .accentColorRed
                               : passwordStrength < 1
-                                  ? StackTheme.instance.color.accentColorYellow
-                                  : StackTheme.instance.color.accentColorGreen,
-                          backgroundColor:
-                              StackTheme.instance.color.buttonBackSecondary,
+                                  ? Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .accentColorYellow
+                                  : Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .accentColorGreen,
+                          backgroundColor: Theme.of(context)
+                              .extension<StackColors>()!
+                              .buttonBackSecondary,
                           percent:
                               passwordStrength < 0.25 ? 0.03 : passwordStrength,
                         ),
@@ -353,7 +364,9 @@ class _EditAutoBackupViewState extends ConsumerState<EditAutoBackupView> {
                                     hidePassword
                                         ? Assets.svg.eye
                                         : Assets.svg.eyeSlash,
-                                    color: StackTheme.instance.color.textDark3,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textDark3,
                                     width: 16,
                                     height: 16,
                                   ),
@@ -389,7 +402,9 @@ class _EditAutoBackupViewState extends ConsumerState<EditAutoBackupView> {
                         ),
                         Positioned.fill(
                           child: RawMaterialButton(
-                            splashColor: StackTheme.instance.color.highlight,
+                            splashColor: Theme.of(context)
+                                .extension<StackColors>()!
+                                .highlight,
                             shape: RoundedRectangleBorder(
                               borderRadius: BorderRadius.circular(
                                 Constants.size.circularBorderRadius,
@@ -426,8 +441,9 @@ class _EditAutoBackupViewState extends ConsumerState<EditAutoBackupView> {
                                     padding: const EdgeInsets.only(right: 4.0),
                                     child: SvgPicture.asset(
                                       Assets.svg.chevronDown,
-                                      color: StackTheme
-                                          .instance.color.textSubtitle2,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .textSubtitle2,
                                       width: 12,
                                       height: 6,
                                     ),
@@ -445,9 +461,11 @@ class _EditAutoBackupViewState extends ConsumerState<EditAutoBackupView> {
                     ),
                     TextButton(
                       style: shouldEnableCreate
-                          ? StackTheme.instance
+                          ? Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context)
-                          : StackTheme.instance
+                          : Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryDisabledButtonColor(context),
                       onPressed: !shouldEnableCreate
                           ? null

lib/pages/settings_views/global_settings_view/stack_backup_views/restore_from_encrypted_string_view.dart

@@ -11,7 +11,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
 import 'package:stackwallet/widgets/stack_text_field.dart';
@@ -63,7 +63,7 @@ class _RestoreFromEncryptedStringViewState
     return WillPopScope(
       onWillPop: _onWillPop,
       child: Scaffold(
-        backgroundColor: StackTheme.instance.color.background,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
         appBar: AppBar(
           leading: AppBarBackButton(
             onPressed: () async {
@@ -129,8 +129,9 @@ class _RestoreFromEncryptedStringViewState
                                         hidePassword
                                             ? Assets.svg.eye
                                             : Assets.svg.eyeSlash,
-                                        color:
-                                            StackTheme.instance.color.textDark3,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .textDark3,
                                         width: 16,
                                         height: 16,
                                       ),
@@ -153,9 +154,11 @@ class _RestoreFromEncryptedStringViewState
                         const Spacer(),
                         TextButton(
                           style: passwordController.text.isEmpty
-                              ? StackTheme.instance
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryEnabledButtonColor(context)
-                              : StackTheme.instance
+                              : Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getPrimaryDisabledButtonColor(context),
                           onPressed: passwordController.text.isEmpty
                               ? null
@@ -191,8 +194,9 @@ class _RestoreFromEncryptedStringViewState
                                                 style: STextStyles.pageTitleH2(
                                                         context)
                                                     .copyWith(
-                                                  color: StackTheme
-                                                      .instance.color.textWhite,
+                                                  color: Theme.of(context)
+                                                      .extension<StackColors>()!
+                                                      .textWhite,
                                                 ),
                                               ),
                                             ),

lib/pages/settings_views/global_settings_view/stack_backup_views/restore_from_file_view.dart

@@ -14,7 +14,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
 import 'package:stackwallet/widgets/stack_text_field.dart';
@@ -64,7 +64,7 @@ class _RestoreFromFileViewState extends ConsumerState<RestoreFromFileView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -138,7 +138,9 @@ class _RestoreFromFileViewState extends ConsumerState<RestoreFromFileView> {
                                 ),
                                 SvgPicture.asset(
                                   Assets.svg.folder,
-                                  color: StackTheme.instance.color.textDark3,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .textDark3,
                                   width: 16,
                                   height: 16,
                                 ),
@@ -197,8 +199,9 @@ class _RestoreFromFileViewState extends ConsumerState<RestoreFromFileView> {
                                       hidePassword
                                           ? Assets.svg.eye
                                           : Assets.svg.eyeSlash,
-                                      color:
-                                          StackTheme.instance.color.textDark3,
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .textDark3,
                                       width: 16,
                                       height: 16,
                                     ),
@@ -222,9 +225,11 @@ class _RestoreFromFileViewState extends ConsumerState<RestoreFromFileView> {
                       TextButton(
                         style: passwordController.text.isEmpty ||
                                 fileLocationController.text.isEmpty
-                            ? StackTheme.instance
+                            ? Theme.of(context)
+                                .extension<StackColors>()!
                                 .getPrimaryDisabledButtonColor(context)
-                            : StackTheme.instance
+                            : Theme.of(context)
+                                .extension<StackColors>()!
                                 .getPrimaryEnabledButtonColor(context),
                         onPressed: passwordController.text.isEmpty ||
                                 fileLocationController.text.isEmpty
@@ -272,8 +277,9 @@ class _RestoreFromFileViewState extends ConsumerState<RestoreFromFileView> {
                                               style: STextStyles.pageTitleH2(
                                                       context)
                                                   .copyWith(
-                                                color: StackTheme
-                                                    .instance.color.textWhite,
+                                                color: Theme.of(context)
+                                                    .extension<StackColors>()!
+                                                    .textWhite,
                                               ),
                                             ),
                                           ),

lib/pages/settings_views/global_settings_view/stack_backup_views/stack_backup_view.dart

@@ -6,7 +6,7 @@ import 'package:stackwallet/pages/settings_views/global_settings_view/stack_back
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -22,7 +22,7 @@ class StackBackupView extends StatelessWidget {
     debugPrint("BUILD: $runtimeType");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -42,7 +42,7 @@ class StackBackupView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -83,7 +83,7 @@ class StackBackupView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -125,7 +125,7 @@ class StackBackupView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(

lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/backup_frequency_type_select_sheet.dart

@@ -4,7 +4,7 @@ import 'package:stackwallet/providers/global/prefs_provider.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/backup_frequency_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class BackupFrequencyTypeSelectSheet extends ConsumerWidget {
   const BackupFrequencyTypeSelectSheet({
@@ -32,7 +32,7 @@ class BackupFrequencyTypeSelectSheet extends ConsumerWidget {
       },
       child: Container(
         decoration: BoxDecoration(
-          color: StackTheme.instance.color.popupBG,
+          color: Theme.of(context).extension<StackColors>()!.popupBG,
           borderRadius: const BorderRadius.vertical(
             top: Radius.circular(20),
           ),
@@ -51,7 +51,9 @@ class BackupFrequencyTypeSelectSheet extends ConsumerWidget {
               Center(
                 child: Container(
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.color.textFieldDefaultBG,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textFieldDefaultBG,
                     borderRadius: BorderRadius.circular(
                       Constants.size.circularBorderRadius,
                     ),
@@ -100,8 +102,9 @@ class BackupFrequencyTypeSelectSheet extends ConsumerWidget {
                                   width: 20,
                                   height: 20,
                                   child: Radio(
-                                    activeColor: StackTheme
-                                        .instance.color.radioButtonIconEnabled,
+                                    activeColor: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .radioButtonIconEnabled,
                                     value: BackupFrequencyType.values[i],
                                     groupValue: ref.watch(
                                         prefsChangeNotifierProvider.select(

lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/recovery_phrase_view.dart

@@ -7,7 +7,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/clipboard_interface.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 
 class RecoverPhraseView extends StatelessWidget {
@@ -28,7 +28,7 @@ class RecoverPhraseView extends StatelessWidget {
   Widget build(BuildContext context) {
     debugPrint("BUILD: $runtimeType");
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -41,7 +41,7 @@ class RecoverPhraseView extends StatelessWidget {
             child: AspectRatio(
               aspectRatio: 1,
               child: AppBarIconButton(
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 shadows: const [],
                 icon: SvgPicture.asset(
                   Assets.svg.copy,

lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/stack_restore_progress_view.dart

@@ -16,7 +16,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/enums/stack_restoring_status.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/addressbook_icon.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
@@ -58,7 +58,8 @@ class _StackRestoreProgressViewState
                 child: Text(
                   "Cancelling restore. Please wait.",
                   style: STextStyles.pageTitleH2(context).copyWith(
-                    color: StackTheme.instance.color.textWhite,
+                    color:
+                        Theme.of(context).extension<StackColors>()!.textWhite,
                   ),
                 ),
               ),
@@ -140,22 +141,23 @@ class _StackRestoreProgressViewState
       case StackRestoringStatus.waiting:
         return SvgPicture.asset(
           Assets.svg.loader,
-          color: StackTheme.instance.color.buttonBackSecondary,
+          color:
+              Theme.of(context).extension<StackColors>()!.buttonBackSecondary,
         );
       case StackRestoringStatus.restoring:
         return SvgPicture.asset(
           Assets.svg.loader,
-          color: StackTheme.instance.color.accentColorGreen,
+          color: Theme.of(context).extension<StackColors>()!.accentColorGreen,
         );
       case StackRestoringStatus.success:
         return SvgPicture.asset(
           Assets.svg.checkCircle,
-          color: StackTheme.instance.color.accentColorGreen,
+          color: Theme.of(context).extension<StackColors>()!.accentColorGreen,
         );
       case StackRestoringStatus.failed:
         return SvgPicture.asset(
           Assets.svg.circleAlert,
-          color: StackTheme.instance.color.textError,
+          color: Theme.of(context).extension<StackColors>()!.textError,
         );
     }
   }
@@ -180,7 +182,7 @@ class _StackRestoreProgressViewState
     return WillPopScope(
       onWillPop: _onWillPop,
       child: Scaffold(
-        backgroundColor: StackTheme.instance.color.background,
+        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
         appBar: AppBar(
           leading: AppBarBackButton(
             onPressed: () async {
@@ -239,15 +241,17 @@ class _StackRestoreProgressViewState
                           height: 32,
                           child: RoundedContainer(
                             padding: const EdgeInsets.all(0),
-                            color:
-                                StackTheme.instance.color.buttonBackSecondary,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .buttonBackSecondary,
                             child: Center(
                               child: SvgPicture.asset(
                                 Assets.svg.gear,
                                 width: 16,
                                 height: 16,
-                                color:
-                                    StackTheme.instance.color.accentColorDark,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark,
                               ),
                             ),
                           ),
@@ -280,14 +284,16 @@ class _StackRestoreProgressViewState
                           height: 32,
                           child: RoundedContainer(
                             padding: const EdgeInsets.all(0),
-                            color:
-                                StackTheme.instance.color.buttonBackSecondary,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .buttonBackSecondary,
                             child: Center(
                               child: AddressBookIcon(
                                 width: 16,
                                 height: 16,
-                                color:
-                                    StackTheme.instance.color.accentColorDark,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark,
                               ),
                             ),
                           ),
@@ -320,15 +326,17 @@ class _StackRestoreProgressViewState
                           height: 32,
                           child: RoundedContainer(
                             padding: const EdgeInsets.all(0),
-                            color:
-                                StackTheme.instance.color.buttonBackSecondary,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .buttonBackSecondary,
                             child: Center(
                               child: SvgPicture.asset(
                                 Assets.svg.node,
                                 width: 16,
                                 height: 16,
-                                color:
-                                    StackTheme.instance.color.accentColorDark,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark,
                               ),
                             ),
                           ),
@@ -361,15 +369,17 @@ class _StackRestoreProgressViewState
                           height: 32,
                           child: RoundedContainer(
                             padding: const EdgeInsets.all(0),
-                            color:
-                                StackTheme.instance.color.buttonBackSecondary,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .buttonBackSecondary,
                             child: Center(
                               child: SvgPicture.asset(
                                 Assets.svg.arrowRotate2,
                                 width: 16,
                                 height: 16,
-                                color:
-                                    StackTheme.instance.color.accentColorDark,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark,
                               ),
                             ),
                           ),
@@ -433,11 +443,15 @@ class _StackRestoreProgressViewState
                 }
               }
             },
-            style: StackTheme.instance.getSecondaryEnabledButtonColor(context),
+            style: Theme.of(context)
+                .extension<StackColors>()!
+                .getSecondaryEnabledButtonColor(context),
             child: Text(
               _success ? "OK" : "Cancel restore process",
               style: STextStyles.button(context).copyWith(
-                color: StackTheme.instance.color.buttonTextPrimary,
+                color: Theme.of(context)
+                    .extension<StackColors>()!
+                    .buttonTextPrimary,
               ),
             ),
           ),

lib/pages/settings_views/global_settings_view/stack_backup_views/sub_widgets/restoring_wallet_card.dart

@@ -10,7 +10,7 @@ import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/stack_restoring_status.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 
@@ -35,23 +35,23 @@ class _RestoringWalletCardState extends ConsumerState<RestoringWalletCard> {
       case StackRestoringStatus.waiting:
         return SvgPicture.asset(
           Assets.svg.loader,
-          color: StackTheme.instance.color.buttonBackSecondary,
+          color: Theme.of(context).extension<StackColors>()!.buttonBackSecondary,
         );
       case StackRestoringStatus.restoring:
         return const LoadingIndicator();
       // return SvgPicture.asset(
       //   Assets.svg.loader,
-      //   color: StackTheme.instance.color.accentColorGreen,
+      //   color: Theme.of(context).extension<StackColors>()!.accentColorGreen,
       // );
       case StackRestoringStatus.success:
         return SvgPicture.asset(
           Assets.svg.checkCircle,
-          color: StackTheme.instance.color.accentColorGreen,
+          color: Theme.of(context).extension<StackColors>()!.accentColorGreen,
         );
       case StackRestoringStatus.failed:
         return SvgPicture.asset(
           Assets.svg.circleAlert,
-          color: StackTheme.instance.color.textError,
+          color: Theme.of(context).extension<StackColors>()!.textError,
         );
     }
   }
@@ -73,7 +73,7 @@ class _RestoringWalletCardState extends ConsumerState<RestoringWalletCard> {
         height: 32,
         child: RoundedContainer(
           padding: const EdgeInsets.all(0),
-          color: StackTheme.instance.colorForCoin(coin),
+          color: Theme.of(context).extension<StackColors>()!.colorForCoin(coin),
           child: Center(
             child: SvgPicture.asset(
               Assets.svg.iconFor(
@@ -155,14 +155,14 @@ class _RestoringWalletCardState extends ConsumerState<RestoringWalletCard> {
           ? Container(
               height: 20,
               decoration: BoxDecoration(
-                color: StackTheme.instance.color.buttonBackSecondary,
+                color: Theme.of(context).extension<StackColors>()!.buttonBackSecondary,
                 borderRadius: BorderRadius.circular(
                   1000,
                 ),
               ),
               child: RawMaterialButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                splashColor: StackTheme.instance.color.highlight,
+                splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
                     1000,
@@ -187,7 +187,7 @@ class _RestoringWalletCardState extends ConsumerState<RestoringWalletCard> {
                   child: Text(
                     "Show recovery phrase",
                     style: STextStyles.infoSmall(context).copyWith(
-                        color: StackTheme.instance.color.accentColorDark),
+                        color: Theme.of(context).extension<StackColors>()!.accentColorDark),
                   ),
                 ),
               ),

lib/pages/settings_views/global_settings_view/startup_preferences/startup_preferences_view.dart

@@ -4,7 +4,7 @@ import 'package:stackwallet/pages/settings_views/global_settings_view/startup_pr
 import 'package:stackwallet/providers/global/prefs_provider.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -23,7 +23,7 @@ class _StartupPreferencesViewState
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -56,7 +56,7 @@ class _StartupPreferencesViewState
                             Padding(
                               padding: const EdgeInsets.all(4.0),
                               child: RawMaterialButton(
-                                // splashColor: StackTheme.instance.color.highlight,
+                                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                                 materialTapTargetSize:
                                     MaterialTapTargetSize.shrinkWrap,
                                 shape: RoundedRectangleBorder(
@@ -81,8 +81,9 @@ class _StartupPreferencesViewState
                                           width: 20,
                                           height: 20,
                                           child: Radio(
-                                            activeColor: StackTheme.instance
-                                                .color.radioButtonIconEnabled,
+                                            activeColor: Theme.of(context)
+                                                .extension<StackColors>()!
+                                                .radioButtonIconEnabled,
                                             value: false,
                                             groupValue: ref.watch(
                                               prefsChangeNotifierProvider
@@ -131,7 +132,7 @@ class _StartupPreferencesViewState
                             Padding(
                               padding: const EdgeInsets.all(4),
                               child: RawMaterialButton(
-                                // splashColor: StackTheme.instance.color.highlight,
+                                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                                 materialTapTargetSize:
                                     MaterialTapTargetSize.shrinkWrap,
                                 shape: RoundedRectangleBorder(
@@ -156,8 +157,9 @@ class _StartupPreferencesViewState
                                           width: 20,
                                           height: 20,
                                           child: Radio(
-                                            activeColor: StackTheme.instance
-                                                .color.radioButtonIconEnabled,
+                                            activeColor: Theme.of(context)
+                                                .extension<StackColors>()!
+                                                .radioButtonIconEnabled,
                                             value: true,
                                             groupValue: ref.watch(
                                               prefsChangeNotifierProvider
@@ -228,7 +230,7 @@ class _StartupPreferencesViewState
                                       ),
                                       Flexible(
                                         child: RawMaterialButton(
-                                          // splashColor: StackTheme.instance.color.highlight,
+                                          // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                                           materialTapTargetSize:
                                               MaterialTapTargetSize.shrinkWrap,
                                           shape: RoundedRectangleBorder(

lib/pages/settings_views/global_settings_view/startup_preferences/startup_wallet_selection_view.dart

@@ -5,7 +5,7 @@ import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -34,7 +34,7 @@ class _StartupWalletSelectionViewState
     }
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -90,7 +90,8 @@ class _StartupWalletSelectionViewState
                                   children: [
                                     Container(
                                       decoration: BoxDecoration(
-                                        color: StackTheme.instance
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
                                             .colorForCoin(manager.coin)
                                             .withOpacity(0.5),
                                         borderRadius: BorderRadius.circular(
@@ -162,7 +163,8 @@ class _StartupWalletSelectionViewState
                                       height: 20,
                                       width: 20,
                                       child: Radio(
-                                        activeColor: StackTheme.instance.color
+                                        activeColor: Theme.of(context)
+                                            .extension<StackColors>()!
                                             .radioButtonIconEnabled,
                                         value: manager.walletId,
                                         groupValue: ref.watch(

lib/pages/settings_views/global_settings_view/support_view.dart

@@ -3,7 +3,7 @@ import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -21,7 +21,7 @@ class SupportView extends StatelessWidget {
     debugPrint("BUILD: $runtimeType");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -50,7 +50,7 @@ class SupportView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -74,7 +74,9 @@ class SupportView extends StatelessWidget {
                         Assets.socials.telegram,
                         width: iconSize,
                         height: iconSize,
-                        color: StackTheme.instance.color.accentColorDark,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .accentColorDark,
                       ),
                       const SizedBox(
                         width: 12,
@@ -95,7 +97,7 @@ class SupportView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -119,7 +121,9 @@ class SupportView extends StatelessWidget {
                         Assets.socials.discord,
                         width: iconSize,
                         height: iconSize,
-                        color: StackTheme.instance.color.accentColorDark,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .accentColorDark,
                       ),
                       const SizedBox(
                         width: 12,
@@ -140,7 +144,7 @@ class SupportView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -164,7 +168,9 @@ class SupportView extends StatelessWidget {
                         Assets.socials.reddit,
                         width: iconSize,
                         height: iconSize,
-                        color: StackTheme.instance.color.accentColorDark,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .accentColorDark,
                       ),
                       const SizedBox(
                         width: 12,
@@ -185,7 +191,7 @@ class SupportView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -209,7 +215,9 @@ class SupportView extends StatelessWidget {
                         Assets.socials.twitter,
                         width: iconSize,
                         height: iconSize,
-                        color: StackTheme.instance.color.accentColorDark,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .accentColorDark,
                       ),
                       const SizedBox(
                         width: 12,
@@ -230,7 +238,7 @@ class SupportView extends StatelessWidget {
             RoundedWhiteContainer(
               padding: const EdgeInsets.all(0),
               child: RawMaterialButton(
-                // splashColor: StackTheme.instance.color.highlight,
+                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
@@ -254,7 +262,9 @@ class SupportView extends StatelessWidget {
                         Assets.svg.envelope,
                         width: iconSize,
                         height: iconSize,
-                        color: StackTheme.instance.color.accentColorDark,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .accentColorDark,
                       ),
                       const SizedBox(
                         width: 12,

lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_options_view.dart

@@ -5,7 +5,7 @@ import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/sync_type_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -17,7 +17,7 @@ class SyncingOptionsView extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -49,7 +49,7 @@ class SyncingOptionsView extends ConsumerWidget {
                             Padding(
                               padding: const EdgeInsets.all(4),
                               child: RawMaterialButton(
-                                // splashColor: StackTheme.instance.color.highlight,
+                                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                                 materialTapTargetSize:
                                     MaterialTapTargetSize.shrinkWrap,
                                 shape: RoundedRectangleBorder(
@@ -90,8 +90,9 @@ class SyncingOptionsView extends ConsumerWidget {
                                           width: 20,
                                           height: 20,
                                           child: Radio(
-                                            activeColor: StackTheme.instance
-                                                .color.radioButtonIconEnabled,
+                                            activeColor: Theme.of(context)
+                                                .extension<StackColors>()!
+                                                .radioButtonIconEnabled,
                                             value:
                                                 SyncingType.currentWalletOnly,
                                             groupValue: ref.watch(
@@ -141,7 +142,7 @@ class SyncingOptionsView extends ConsumerWidget {
                             Padding(
                               padding: const EdgeInsets.all(4.0),
                               child: RawMaterialButton(
-                                // splashColor: StackTheme.instance.color.highlight,
+                                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                                 materialTapTargetSize:
                                     MaterialTapTargetSize.shrinkWrap,
                                 shape: RoundedRectangleBorder(
@@ -180,8 +181,9 @@ class SyncingOptionsView extends ConsumerWidget {
                                           width: 20,
                                           height: 20,
                                           child: Radio(
-                                            activeColor: StackTheme.instance
-                                                .color.radioButtonIconEnabled,
+                                            activeColor: Theme.of(context)
+                                                .extension<StackColors>()!
+                                                .radioButtonIconEnabled,
                                             value:
                                                 SyncingType.allWalletsOnStartup,
                                             groupValue: ref.watch(
@@ -231,7 +233,7 @@ class SyncingOptionsView extends ConsumerWidget {
                             Padding(
                               padding: const EdgeInsets.all(4),
                               child: RawMaterialButton(
-                                // splashColor: StackTheme.instance.color.highlight,
+                                // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                                 materialTapTargetSize:
                                     MaterialTapTargetSize.shrinkWrap,
                                 shape: RoundedRectangleBorder(
@@ -274,8 +276,9 @@ class SyncingOptionsView extends ConsumerWidget {
                                           width: 20,
                                           height: 20,
                                           child: Radio(
-                                            activeColor: StackTheme.instance
-                                                .color.radioButtonIconEnabled,
+                                            activeColor: Theme.of(context)
+                                                .extension<StackColors>()!
+                                                .radioButtonIconEnabled,
                                             value: SyncingType
                                                 .selectedWalletsAtStartup,
                                             groupValue: ref.watch(
@@ -349,7 +352,7 @@ class SyncingOptionsView extends ConsumerWidget {
                                       ),
                                       Flexible(
                                         child: RawMaterialButton(
-                                          // splashColor: StackTheme.instance.color.highlight,
+                                          // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                                           materialTapTargetSize:
                                               MaterialTapTargetSize.shrinkWrap,
                                           shape: RoundedRectangleBorder(

lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_preferences_view.dart

@@ -5,7 +5,7 @@ import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/sync_type_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -29,7 +29,7 @@ class SyncingPreferencesView extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -57,7 +57,7 @@ class SyncingPreferencesView extends ConsumerWidget {
                       RoundedWhiteContainer(
                         padding: const EdgeInsets.all(0),
                         child: RawMaterialButton(
-                          // splashColor: StackTheme.instance.color.highlight,
+                          // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                           padding: const EdgeInsets.all(0),
                           materialTapTargetSize:
                               MaterialTapTargetSize.shrinkWrap,
@@ -104,7 +104,7 @@ class SyncingPreferencesView extends ConsumerWidget {
                         child: Consumer(
                           builder: (_, ref, __) {
                             return RawMaterialButton(
-                              // splashColor: StackTheme.instance.color.highlight,
+                              // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
                               materialTapTargetSize:
                                   MaterialTapTargetSize.shrinkWrap,
                               shape: RoundedRectangleBorder(

lib/pages/settings_views/global_settings_view/syncing_preferences_views/wallet_syncing_options_view.dart

@@ -9,7 +9,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/sync_type_enum.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/animated_text.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
@@ -26,7 +26,7 @@ class WalletSyncingOptionsView extends ConsumerWidget {
         .watch(walletsChangeNotifierProvider.select((value) => value.managers));
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () async {
@@ -82,7 +82,8 @@ class WalletSyncingOptionsView extends ConsumerWidget {
                                   children: [
                                     Container(
                                       decoration: BoxDecoration(
-                                        color: StackTheme.instance
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
                                             .colorForCoin(manager.coin)
                                             .withOpacity(0.5),
                                         borderRadius: BorderRadius.circular(