diff --git a/lib/main.dart b/lib/main.dart
index 0d621886d..9075a5343 100644
--- a/lib/main.dart
+++ b/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();
   }
diff --git a/lib/notifications/notification_card.dart b/lib/notifications/notification_card.dart
index 6e9c85e21..67be236f0 100644
--- a/lib/notifications/notification_card.dart
+++ b/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),
             ),
           ),
       ],
diff --git a/lib/notifications/show_flush_bar.dart b/lib/notifications/show_flush_bar.dart
index 569cf8ea9..5320c8a9d 100644
--- a/lib/notifications/show_flush_bar.dart
+++ b/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>(
diff --git a/lib/pages/add_wallet_views/add_wallet_view/add_wallet_view.dart b/lib/pages/add_wallet_views/add_wallet_view/add_wallet_view.dart
index ca0e86eb2..ae72e1846 100644
--- a/lib/pages/add_wallet_views/add_wallet_view/add_wallet_view.dart
+++ b/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(
diff --git a/lib/pages/add_wallet_views/add_wallet_view/sub_widgets/coin_select_item.dart b/lib/pages/add_wallet_views/add_wallet_view/sub_widgets/coin_select_item.dart
index 1b9ad4ba8..0821b8aae 100644
--- a/lib/pages/add_wallet_views/add_wallet_view/sub_widgets/coin_select_item.dart
+++ b/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,
                     ),
                   ),
                 ),
diff --git a/lib/pages/add_wallet_views/add_wallet_view/sub_widgets/next_button.dart b/lib/pages/add_wallet_views/add_wallet_view/sub_widgets/next_button.dart
index 6d5c38623..9314a8770 100644
--- a/lib/pages/add_wallet_views/add_wallet_view/sub_widgets/next_button.dart
+++ b/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
diff --git a/lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart b/lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart
index 3a3919e44..ffd32479d 100644
--- a/lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart
+++ b/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(
diff --git a/lib/pages/add_wallet_views/create_or_restore_wallet_view/sub_widgets/create_wallet_button_group.dart b/lib/pages/add_wallet_views/create_or_restore_wallet_view/sub_widgets/create_wallet_button_group.dart
index 8a615267c..4a7661892 100644
--- a/lib/pages/add_wallet_views/create_or_restore_wallet_view/sub_widgets/create_wallet_button_group.dart
+++ b/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),
             ),
           ),
         ),
diff --git a/lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart b/lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart
index ed046fa90..cff9fd2cf 100644
--- a/lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart
+++ b/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
diff --git a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart b/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart
index 197187fce..207451569 100644
--- a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart
+++ b/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",
diff --git a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/sub_widgets/mnemonic_table_item.dart b/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/sub_widgets/mnemonic_table_item.dart
index 9c8ed9956..8928ff3a6 100644
--- a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/sub_widgets/mnemonic_table_item.dart
+++ b/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),
           ),
diff --git a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart b/lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart
index 4adbaf00f..603e5cca1 100644
--- a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart
+++ b/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",
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart b/lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart
index a27822209..6ccc44d03 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/confirm_recovery_dialog.dart
+++ b/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),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/restore_options_view.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/restore_options_view.dart
index e85c63c55..5df7fd81d 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/restore_options_view.dart
+++ b/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,
                       ),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/mobile_mnemonic_length_selector.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/mobile_mnemonic_length_selector.dart
index cd9dbf351..49896e107 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/mobile_mnemonic_length_selector.dart
+++ b/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,
                 ),
               ],
             ),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_from_date_picker.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_from_date_picker.dart
index b6f20bea1..0207a4c61 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_from_date_picker.dart
+++ b/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,
                 ),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_next_button.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_next_button.dart
index d13b6ebf6..502502f94 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_next_button.dart
+++ b/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),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_platform_layout.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_platform_layout.dart
index df5223c88..12121cd7d 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/sub_widgets/restore_options_platform_layout.dart
+++ b/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(
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart
index e4785de3b..a0ac25383 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart
+++ b/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(
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/mnemonic_word_count_select_sheet.dart b/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/mnemonic_word_count_select_sheet.dart
index 3bd736fe8..44bdf5f99 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/mnemonic_word_count_select_sheet.dart
+++ b/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
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restore_failed_dialog.dart b/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restore_failed_dialog.dart
index a16077660..daf5cf1fc 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restore_failed_dialog.dart
+++ b/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),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restore_succeeded_dialog.dart b/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restore_succeeded_dialog.dart
index efdb32bb6..2cd539c0c 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restore_succeeded_dialog.dart
+++ b/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),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restoring_dialog.dart b/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restoring_dialog.dart
index fea6f32a5..80a688d03 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/sub_widgets/restoring_dialog.dart
+++ b/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),
diff --git a/lib/pages/add_wallet_views/verify_recovery_phrase_view/sub_widgets/word_table_item.dart b/lib/pages/add_wallet_views/verify_recovery_phrase_view/sub_widgets/word_table_item.dart
index 5c178fc2d..1cdc1a4f8 100644
--- a/lib/pages/add_wallet_views/verify_recovery_phrase_view/sub_widgets/word_table_item.dart
+++ b/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),
             ),
diff --git a/lib/pages/add_wallet_views/verify_recovery_phrase_view/verify_recovery_phrase_view.dart b/lib/pages/add_wallet_views/verify_recovery_phrase_view/verify_recovery_phrase_view.dart
index 7c3507b9e..cdfff73ca 100644
--- a/lib/pages/add_wallet_views/verify_recovery_phrase_view/verify_recovery_phrase_view.dart
+++ b/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(
diff --git a/lib/pages/address_book_views/address_book_view.dart b/lib/pages/address_book_views/address_book_view.dart
index 4a1a55e6c..b70ef19ed 100644
--- a/lib/pages/address_book_views/address_book_view.dart
+++ b/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,
                 ),
diff --git a/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart b/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart
index 5aa383b0a..a28997e0f 100644
--- a/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart
+++ b/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
diff --git a/lib/pages/address_book_views/subviews/add_new_contact_address_view.dart b/lib/pages/address_book_views/subviews/add_new_contact_address_view.dart
index 07f6b0876..e5dbaa7b9 100644
--- a/lib/pages/address_book_views/subviews/add_new_contact_address_view.dart
+++ b/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
diff --git a/lib/pages/address_book_views/subviews/address_book_filter_view.dart b/lib/pages/address_book_views/subviews/address_book_filter_view.dart
index e39a9dda1..35968621a 100644
--- a/lib/pages/address_book_views/subviews/address_book_filter_view.dart
+++ b/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();
diff --git a/lib/pages/address_book_views/subviews/coin_select_sheet.dart b/lib/pages/address_book_views/subviews/coin_select_sheet.dart
index 8376d9092..7be2f8739 100644
--- a/lib/pages/address_book_views/subviews/coin_select_sheet.dart
+++ b/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);
                             },
diff --git a/lib/pages/address_book_views/subviews/contact_details_view.dart b/lib/pages/address_book_views/subviews/contact_details_view.dart
index d79c3c891..6538af0dc 100644
--- a/lib/pages/address_book_views/subviews/contact_details_view.dart
+++ b/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),
                                 ),
                               ),
                             ],
diff --git a/lib/pages/address_book_views/subviews/contact_popup.dart b/lib/pages/address_book_views/subviews/contact_popup.dart
index 05813f0c8..2cffe50e9 100644
--- a/lib/pages/address_book_views/subviews/contact_popup.dart
+++ b/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),
                                               ),
                                             ),
                                           ],
diff --git a/lib/pages/address_book_views/subviews/edit_contact_address_view.dart b/lib/pages/address_book_views/subviews/edit_contact_address_view.dart
index 742510869..618a41982 100644
--- a/lib/pages/address_book_views/subviews/edit_contact_address_view.dart
+++ b/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
diff --git a/lib/pages/address_book_views/subviews/edit_contact_name_emoji_view.dart b/lib/pages/address_book_views/subviews/edit_contact_name_emoji_view.dart
index 442cee62a..45c23b13c 100644
--- a/lib/pages/address_book_views/subviews/edit_contact_name_emoji_view.dart
+++ b/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
diff --git a/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart b/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart
index 7a2b4fd51..73de8b0aa 100644
--- a/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart
+++ b/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,
                     ),
                   ),
                 ],
diff --git a/lib/pages/exchange_view/confirm_change_now_send.dart b/lib/pages/exchange_view/confirm_change_now_send.dart
index aedfbaab6..6fd6c8a08 100644
--- a/lib/pages/exchange_view/confirm_change_now_send.dart
+++ b/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(
diff --git a/lib/pages/exchange_view/edit_trade_note_view.dart b/lib/pages/exchange_view/edit_trade_note_view.dart
index b22afe052..5e1571b73 100644
--- a/lib/pages/exchange_view/edit_trade_note_view.dart
+++ b/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",
diff --git a/lib/pages/exchange_view/exchange_coin_selection/fixed_rate_pair_coin_selection_view.dart b/lib/pages/exchange_view/exchange_coin_selection/fixed_rate_pair_coin_selection_view.dart
index 50a00c466..82a8ba0ea 100644
--- a/lib/pages/exchange_view/exchange_coin_selection/fixed_rate_pair_coin_selection_view.dart
+++ b/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,
                                       ),
                                     ),
                                   ],
diff --git a/lib/pages/exchange_view/exchange_coin_selection/floating_rate_currency_selection_view.dart b/lib/pages/exchange_view/exchange_coin_selection/floating_rate_currency_selection_view.dart
index 6c03d84ab..28ed9accb 100644
--- a/lib/pages/exchange_view/exchange_coin_selection/floating_rate_currency_selection_view.dart
+++ b/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,
                                       ),
                                     ),
                                   ],
diff --git a/lib/pages/exchange_view/exchange_loading_overlay.dart b/lib/pages/exchange_view/exchange_loading_overlay.dart
index f17bd55c4..e4e6c1f27 100644
--- a/lib/pages/exchange_view/exchange_loading_overlay.dart
+++ b/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: () {
diff --git a/lib/pages/exchange_view/exchange_step_views/step_1_view.dart b/lib/pages/exchange_view/exchange_step_views/step_1_view.dart
index 1284930c9..95f086003 100644
--- a/lib/pages/exchange_view/exchange_step_views/step_1_view.dart
+++ b/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",
diff --git a/lib/pages/exchange_view/exchange_step_views/step_2_view.dart b/lib/pages/exchange_view/exchange_step_views/step_2_view.dart
index c4ebae509..3ac7fd8ec 100644
--- a/lib/pages/exchange_view/exchange_step_views/step_2_view.dart
+++ b/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",
diff --git a/lib/pages/exchange_view/exchange_step_views/step_3_view.dart b/lib/pages/exchange_view/exchange_step_views/step_3_view.dart
index 3c52c282d..604e3707f 100644
--- a/lib/pages/exchange_view/exchange_step_views/step_3_view.dart
+++ b/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",
diff --git a/lib/pages/exchange_view/exchange_step_views/step_4_view.dart b/lib/pages/exchange_view/exchange_step_views/step_4_view.dart
index 48928364b..4a228baab 100644
--- a/lib/pages/exchange_view/exchange_step_views/step_4_view.dart
+++ b/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,
                                   ),
                                 ),
                               );
diff --git a/lib/pages/exchange_view/exchange_view.dart b/lib/pages/exchange_view/exchange_view.dart
index 0ac46d7a8..2f0bfe194 100644
--- a/lib/pages/exchange_view/exchange_view.dart
+++ b/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,
                     ),
                 ],
               ),
diff --git a/lib/pages/exchange_view/send_from_view.dart b/lib/pages/exchange_view/send_from_view.dart
index 14dfbc030..e677ab5c0 100644
--- a/lib/pages/exchange_view/send_from_view.dart
+++ b/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(
diff --git a/lib/pages/exchange_view/sub_widgets/exchange_rate_sheet.dart b/lib/pages/exchange_view/sub_widgets/exchange_rate_sheet.dart
index 24a0c32df..efef2f964 100644
--- a/lib/pages/exchange_view/sub_widgets/exchange_rate_sheet.dart
+++ b/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,
                           )
diff --git a/lib/pages/exchange_view/sub_widgets/step_indicator.dart b/lib/pages/exchange_view/sub_widgets/step_indicator.dart
index 9e8cd4dca..fd0d3a859 100644
--- a/lib/pages/exchange_view/sub_widgets/step_indicator.dart
+++ b/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),
       ),
     );
   }
diff --git a/lib/pages/exchange_view/sub_widgets/step_row.dart b/lib/pages/exchange_view/sub_widgets/step_row.dart
index 9d2b09451..398ac1c16 100644
--- a/lib/pages/exchange_view/sub_widgets/step_row.dart
+++ b/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),
       ],
     );
   }
diff --git a/lib/pages/exchange_view/trade_details_view.dart b/lib/pages/exchange_view/trade_details_view.dart
index c7e307696..6405d6c43 100644
--- a/lib/pages/exchange_view/trade_details_view.dart
+++ b/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,
                             ),
                           )
diff --git a/lib/pages/exchange_view/wallet_initiated_exchange_view.dart b/lib/pages/exchange_view/wallet_initiated_exchange_view.dart
index af70a945e..2be98f002 100644
--- a/lib/pages/exchange_view/wallet_initiated_exchange_view.dart
+++ b/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(
diff --git a/lib/pages/home_view/home_view.dart b/lib/pages/home_view/home_view.dart
index 4226a53aa..07e2199af 100644
--- a/lib/pages/home_view/home_view.dart
+++ b/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(
diff --git a/lib/pages/home_view/sub_widgets/home_view_button_bar.dart b/lib/pages/home_view/sub_widgets/home_view_button_bar.dart
index 673a0a4ea..7541b166f 100644
--- a/lib/pages/home_view/sub_widgets/home_view_button_bar.dart
+++ b/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
         //       ),
         //     ),
         //   ),
diff --git a/lib/pages/intro_view.dart b/lib/pages/intro_view.dart
index 6b9b80631..fa2ef0e64 100644
--- a/lib/pages/intro_view.dart
+++ b/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);
               },
diff --git a/lib/pages/loading_view.dart b/lib/pages/loading_view.dart
index c57ff36ba..c252913df 100644
--- a/lib/pages/loading_view.dart
+++ b/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,
diff --git a/lib/pages/manage_favorites_view/manage_favorites_view.dart b/lib/pages/manage_favorites_view/manage_favorites_view.dart
index 03e5cc03e..7d2b58781 100644
--- a/lib/pages/manage_favorites_view/manage_favorites_view.dart
+++ b/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,
                   ),
                 ),
               ),
diff --git a/lib/pages/notification_views/notifications_view.dart b/lib/pages/notification_views/notifications_view.dart
index 5d01b9d98..a034a34e4 100644
--- a/lib/pages/notification_views/notifications_view.dart
+++ b/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",
diff --git a/lib/pages/pinpad_views/create_pin_view.dart b/lib/pages/pinpad_views/create_pin_view.dart
index 785bd5b5e..c4e4ee592 100644
--- a/lib/pages/pinpad_views/create_pin_view.dart
+++ b/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,
diff --git a/lib/pages/pinpad_views/lock_screen_view.dart b/lib/pages/pinpad_views/lock_screen_view.dart
index 5a1ccfc23..00d8b1914 100644
--- a/lib/pages/pinpad_views/lock_screen_view.dart
+++ b/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,
diff --git a/lib/pages/receive_view/generate_receiving_uri_qr_code_view.dart b/lib/pages/receive_view/generate_receiving_uri_qr_code_view.dart
index c69a541d8..744d8b53c 100644
--- a/lib/pages/receive_view/generate_receiving_uri_qr_code_view.dart
+++ b/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,
                                                       ),
                                                     ),
diff --git a/lib/pages/receive_view/receive_view.dart b/lib/pages/receive_view/receive_view.dart
index 3c2fe6324..50e0ffd5e 100644
--- a/lib/pages/receive_view/receive_view.dart
+++ b/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,
                           ),
diff --git a/lib/pages/send_view/confirm_transaction_view.dart b/lib/pages/send_view/confirm_transaction_view.dart
index 4db359d2b..fff346ee7 100644
--- a/lib/pages/send_view/confirm_transaction_view.dart
+++ b/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(
diff --git a/lib/pages/send_view/send_view.dart b/lib/pages/send_view/send_view.dart
index 88d690709..ee9644c2a 100644
--- a/lib/pages/send_view/send_view.dart
+++ b/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",
diff --git a/lib/pages/send_view/sub_widgets/building_transaction_dialog.dart b/lib/pages/send_view/sub_widgets/building_transaction_dialog.dart
index 2613143ee..0b6786915 100644
--- a/lib/pages/send_view/sub_widgets/building_transaction_dialog.dart
+++ b/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),
diff --git a/lib/pages/send_view/sub_widgets/firo_balance_selection_sheet.dart b/lib/pages/send_view/sub_widgets/firo_balance_selection_sheet.dart
index 9cd8b2e68..e639a8cf8 100644
--- a/lib/pages/send_view/sub_widgets/firo_balance_selection_sheet.dart
+++ b/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(
diff --git a/lib/pages/send_view/sub_widgets/sending_transaction_dialog.dart b/lib/pages/send_view/sub_widgets/sending_transaction_dialog.dart
index cd4044ae6..1eb106b53 100644
--- a/lib/pages/send_view/sub_widgets/sending_transaction_dialog.dart
+++ b/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,
           ),
diff --git a/lib/pages/send_view/sub_widgets/transaction_fee_selection_sheet.dart b/lib/pages/send_view/sub_widgets/transaction_fee_selection_sheet.dart
index cabf0eb60..ff26fe782 100644
--- a/lib/pages/send_view/sub_widgets/transaction_fee_selection_sheet.dart
+++ b/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)
diff --git a/lib/pages/settings_views/global_settings_view/about_view.dart b/lib/pages/settings_views/global_settings_view/about_view.dart
index bfdf9e684..dc2da2488 100644
--- a/lib/pages/settings_views/global_settings_view/about_view.dart
+++ b/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;
diff --git a/lib/pages/settings_views/global_settings_view/advanced_views/advanced_settings_view.dart b/lib/pages/settings_views/global_settings_view/advanced_views/advanced_settings_view.dart
index 05f127513..035efb2db 100644
--- a/lib/pages/settings_views/global_settings_view/advanced_views/advanced_settings_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/advanced_views/debug_view.dart b/lib/pages/settings_views/global_settings_view/advanced_views/debug_view.dart
index 95fa714e4..6b073ea69 100644
--- a/lib/pages/settings_views/global_settings_view/advanced_views/debug_view.dart
+++ b/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,
                                         ),
                                       ),
                                     ],
diff --git a/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart b/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart
index a577d0a3e..b0cf35a84 100644
--- a/lib/pages/settings_views/global_settings_view/appearance_settings_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/currency_view.dart b/lib/pages/settings_views/global_settings_view/currency_view.dart
index 25e9ddb06..cae947caa 100644
--- a/lib/pages/settings_views/global_settings_view/currency_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/global_settings_view.dart b/lib/pages/settings_views/global_settings_view/global_settings_view.dart
index a94115c19..1b334cf18 100644
--- a/lib/pages/settings_views/global_settings_view/global_settings_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/hidden_settings.dart b/lib/pages/settings_views/global_settings_view/hidden_settings.dart
index f20b08649..6b6377ab6 100644
--- a/lib/pages/settings_views/global_settings_view/hidden_settings.dart
+++ b/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
                       //       ),
                       //     ),
                       //   ),
diff --git a/lib/pages/settings_views/global_settings_view/language_view.dart b/lib/pages/settings_views/global_settings_view/language_view.dart
index 83a9347ca..75a2751a2 100644
--- a/lib/pages/settings_views/global_settings_view/language_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/manage_nodes_views/add_edit_node_view.dart b/lib/pages/settings_views/global_settings_view/manage_nodes_views/add_edit_node_view.dart
index f088a594f..2f8eca393 100644
--- a/lib/pages/settings_views/global_settings_view/manage_nodes_views/add_edit_node_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/manage_nodes_views/coin_nodes_view.dart b/lib/pages/settings_views/global_settings_view/manage_nodes_views/coin_nodes_view.dart
index 6b352be26..12573042e 100644
--- a/lib/pages/settings_views/global_settings_view/manage_nodes_views/coin_nodes_view.dart
+++ b/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,
                 ),
diff --git a/lib/pages/settings_views/global_settings_view/manage_nodes_views/manage_nodes_view.dart b/lib/pages/settings_views/global_settings_view/manage_nodes_views/manage_nodes_view.dart
index 24b392d2a..22f239232 100644
--- a/lib/pages/settings_views/global_settings_view/manage_nodes_views/manage_nodes_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/manage_nodes_views/node_details_view.dart b/lib/pages/settings_views/global_settings_view/manage_nodes_views/node_details_view.dart
index 11dff57cf..340bd859b 100644
--- a/lib/pages/settings_views/global_settings_view/manage_nodes_views/node_details_view.dart
+++ b/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),
diff --git a/lib/pages/settings_views/global_settings_view/security_views/change_pin_view/change_pin_view.dart b/lib/pages/settings_views/global_settings_view/security_views/change_pin_view/change_pin_view.dart
index 3402a8afd..f083eb63a 100644
--- a/lib/pages/settings_views/global_settings_view/security_views/change_pin_view/change_pin_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/security_views/security_view.dart b/lib/pages/settings_views/global_settings_view/security_views/security_view.dart
index 872091b29..24fce5cd8 100644
--- a/lib/pages/settings_views/global_settings_view/security_views/security_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/auto_backup_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/auto_backup_view.dart
index e935cedc1..3f832a4af 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/auto_backup_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/create_auto_backup_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/create_auto_backup_view.dart
index 4530decdf..22ace0a8e 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/create_auto_backup_view.dart
+++ b/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
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/create_backup_information_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/create_backup_information_view.dart
index 25fda95da..772c446f2 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/create_backup_information_view.dart
+++ b/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)
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/create_backup_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/create_backup_view.dart
index 91d538a33..964111cd3 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/create_backup_view.dart
+++ b/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 {
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/dialogs/cancel_stack_restore_dialog.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/dialogs/cancel_stack_restore_dialog.dart
index 1d14b72c9..16e51a35d 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/dialogs/cancel_stack_restore_dialog.dart
+++ b/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: () {
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/edit_auto_backup_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/edit_auto_backup_view.dart
index 1ba5910c7..fa14358ea 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/edit_auto_backup_view.dart
+++ b/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
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/restore_from_encrypted_string_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/restore_from_encrypted_string_view.dart
index 8e76d285a..3173bc402 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/restore_from_encrypted_string_view.dart
+++ b/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,
                                                 ),
                                               ),
                                             ),
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/restore_from_file_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/restore_from_file_view.dart
index 182cf3c01..feda62d0a 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/restore_from_file_view.dart
+++ b/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,
                                               ),
                                             ),
                                           ),
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/stack_backup_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/stack_backup_view.dart
index 9a880e53e..679043fe7 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/stack_backup_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/backup_frequency_type_select_sheet.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/backup_frequency_type_select_sheet.dart
index 6005ac9e7..b64defcf7 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/backup_frequency_type_select_sheet.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/recovery_phrase_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/recovery_phrase_view.dart
index c32328d53..7b30a21b0 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/recovery_phrase_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/stack_restore_progress_view.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/stack_restore_progress_view.dart
index 0dbc96aa3..367d211ed 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_views/stack_restore_progress_view.dart
+++ b/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,
               ),
             ),
           ),
diff --git a/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_widgets/restoring_wallet_card.dart b/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_widgets/restoring_wallet_card.dart
index e953561da..8f9890a6a 100644
--- a/lib/pages/settings_views/global_settings_view/stack_backup_views/sub_widgets/restoring_wallet_card.dart
+++ b/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),
                   ),
                 ),
               ),
diff --git a/lib/pages/settings_views/global_settings_view/startup_preferences/startup_preferences_view.dart b/lib/pages/settings_views/global_settings_view/startup_preferences/startup_preferences_view.dart
index fe4640543..baf649ba2 100644
--- a/lib/pages/settings_views/global_settings_view/startup_preferences/startup_preferences_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/startup_preferences/startup_wallet_selection_view.dart b/lib/pages/settings_views/global_settings_view/startup_preferences/startup_wallet_selection_view.dart
index 981b09b8c..54e2d3c76 100644
--- a/lib/pages/settings_views/global_settings_view/startup_preferences/startup_wallet_selection_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/support_view.dart b/lib/pages/settings_views/global_settings_view/support_view.dart
index 9d795282d..fdfa6f404 100644
--- a/lib/pages/settings_views/global_settings_view/support_view.dart
+++ b/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,
diff --git a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_options_view.dart b/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_options_view.dart
index 60eb51dbf..bada67353 100644
--- a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_options_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_preferences_view.dart b/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_preferences_view.dart
index 2bac3ef35..e48ebb342 100644
--- a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/syncing_preferences_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/wallet_syncing_options_view.dart b/lib/pages/settings_views/global_settings_view/syncing_preferences_views/wallet_syncing_options_view.dart
index 11809d95e..1e302cf12 100644
--- a/lib/pages/settings_views/global_settings_view/syncing_preferences_views/wallet_syncing_options_view.dart
+++ b/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(
diff --git a/lib/pages/settings_views/sub_widgets/settings_list_button.dart b/lib/pages/settings_views/sub_widgets/settings_list_button.dart
index 961f9ee95..5081e0f76 100644
--- a/lib/pages/settings_views/sub_widgets/settings_list_button.dart
+++ b/lib/pages/settings_views/sub_widgets/settings_list_button.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.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 SettingsListButton extends StatelessWidget {
   const SettingsListButton({
@@ -21,7 +21,7 @@ class SettingsListButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return RawMaterialButton(
-      // splashColor: StackTheme.instance.color.highlight,
+      // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
       constraints: const BoxConstraints(
         minHeight: 32,
         minWidth: 32,
@@ -41,7 +41,9 @@ class SettingsListButton extends StatelessWidget {
               width: 32,
               height: 32,
               decoration: BoxDecoration(
-                color: StackTheme.instance.color.buttonBackSecondary,
+                color: Theme.of(context)
+                    .extension<StackColors>()!
+                    .buttonBackSecondary,
                 borderRadius: BorderRadius.circular(100),
               ),
               child: Center(
@@ -51,7 +53,9 @@ class SettingsListButton extends StatelessWidget {
                   child: Center(
                     child: SvgPicture.asset(
                       iconAssetName,
-                      color: StackTheme.instance.color.accentColorDark,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .accentColorDark,
                       width: iconSize,
                       height: iconSize,
                     ),
@@ -66,7 +70,9 @@ class SettingsListButton extends StatelessWidget {
               child: Text(
                 title,
                 style: STextStyles.smallMed14(context).copyWith(
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                 ),
               ),
             ),
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_backup_views/wallet_backup_view.dart b/lib/pages/settings_views/wallet_settings_view/wallet_backup_views/wallet_backup_view.dart
index ee9123026..3d557d245 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_backup_views/wallet_backup_view.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_backup_views/wallet_backup_view.dart
@@ -14,7 +14,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/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
@@ -36,7 +36,7 @@ class WalletBackupView extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     debugPrint("BUILD: $runtimeType");
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -53,13 +53,15 @@ class WalletBackupView extends ConsumerWidget {
             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: 20,
                   height: 20,
-                  color: StackTheme.instance.color.topNavIconPrimary,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .topNavIconPrimary,
                 ),
                 onPressed: () async {
                   await clipboardInterface
@@ -107,7 +109,7 @@ class WalletBackupView extends ConsumerWidget {
             ),
             Container(
               decoration: BoxDecoration(
-                color: StackTheme.instance.color.popupBG,
+                color: Theme.of(context).extension<StackColors>()!.popupBG,
                 borderRadius:
                     BorderRadius.circular(Constants.size.circularBorderRadius),
               ),
@@ -134,7 +136,9 @@ class WalletBackupView extends ConsumerWidget {
               height: 12,
             ),
             TextButton(
-              style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getPrimaryEnabledButtonColor(context),
               onPressed: () {
                 String data = AddressUtils.encodeQRSeedData(mnemonic);
 
@@ -166,10 +170,12 @@ class WalletBackupView extends ConsumerWidget {
                                 child: QrImage(
                                     data: data,
                                     size: width,
-                                    backgroundColor:
-                                        StackTheme.instance.color.popupBG,
-                                    foregroundColor: StackTheme
-                                        .instance.color.accentColorDark),
+                                    backgroundColor: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .popupBG,
+                                    foregroundColor: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .accentColorDark),
                               ),
                             ),
                           ),
@@ -184,13 +190,15 @@ class WalletBackupView extends ConsumerWidget {
                                   // 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.accentColorDark),
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark),
                                 ),
                               ),
                             ),
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/confirm_full_rescan.dart b/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/confirm_full_rescan.dart
index 6fcd6f20d..141eb4c99 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/confirm_full_rescan.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/confirm_full_rescan.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 ConfirmFullRescanDialog extends StatelessWidget {
@@ -20,7 +20,9 @@ class ConfirmFullRescanDialog extends StatelessWidget {
         message:
             "Warning! It may take a while. If you exit before completion, you will have to redo the process.",
         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 ConfirmFullRescanDialog extends StatelessWidget {
           },
         ),
         rightButton: TextButton(
-          style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getPrimaryEnabledButtonColor(context),
           child: Text(
             "Rescan",
             style: STextStyles.button(context),
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/rescanning_dialog.dart b/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/rescanning_dialog.dart
index 02e4e6971..da39b1017 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/rescanning_dialog.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/sub_widgets/rescanning_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 RescanningDialog extends StatefulWidget {
@@ -62,7 +62,7 @@ class _RescanningDialogState extends State<RescanningDialog>
             Assets.svg.arrowRotate3,
             width: 24,
             height: 24,
-            color: StackTheme.instance.color.accentColorDark,
+            color: Theme.of(context).extension<StackColors>()!.accentColorDark,
           ),
         ),
         // rightButton: TextButton(
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/wallet_network_settings_view.dart b/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/wallet_network_settings_view.dart
index aa524c1dd..892cd13d8 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/wallet_network_settings_view.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_network_settings_view/wallet_network_settings_view.dart
@@ -21,7 +21,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/animated_text.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
@@ -107,8 +107,9 @@ class _WalletNetworkSettingsViewState
           builder: (context) => StackDialog(
             title: "Rescan completed",
             rightButton: TextButton(
-              style:
-                  StackTheme.instance.getSecondaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getSecondaryEnabledButtonColor(context),
               child: Text(
                 "Ok",
                 style: STextStyles.itemSubtitle12(context),
@@ -136,8 +137,9 @@ class _WalletNetworkSettingsViewState
             title: "Rescan failed",
             message: e.toString(),
             rightButton: TextButton(
-              style:
-                  StackTheme.instance.getSecondaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getSecondaryEnabledButtonColor(context),
               child: Text(
                 "Ok",
                 style: STextStyles.itemSubtitle12(context),
@@ -281,7 +283,7 @@ class _WalletNetworkSettingsViewState
     }
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -305,10 +307,12 @@ class _WalletNetworkSettingsViewState
                 key: const Key("walletNetworkSettingsAddNewNodeViewButton"),
                 size: 36,
                 shadows: const [],
-                color: StackTheme.instance.color.background,
+                color: Theme.of(context).extension<StackColors>()!.background,
                 icon: SvgPicture.asset(
                   Assets.svg.verticalEllipsis,
-                  color: StackTheme.instance.color.accentColorDark,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark,
                   width: 20,
                   height: 20,
                 ),
@@ -325,7 +329,9 @@ class _WalletNetworkSettingsViewState
                             right: 10,
                             child: Container(
                               decoration: BoxDecoration(
-                                color: StackTheme.instance.color.popupBG,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .popupBG,
                                 borderRadius: BorderRadius.circular(
                                     Constants.size.circularBorderRadius),
                                 // boxShadow: [CFColors.standardBoxShadow],
@@ -418,7 +424,9 @@ class _WalletNetworkSettingsViewState
                             width: _iconSize,
                             height: _iconSize,
                             decoration: BoxDecoration(
-                              color: StackTheme.instance.color.accentColorGreen
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .accentColorGreen
                                   .withOpacity(0.2),
                               borderRadius: BorderRadius.circular(_iconSize),
                             ),
@@ -427,8 +435,9 @@ class _WalletNetworkSettingsViewState
                                 Assets.svg.radio,
                                 height: 14,
                                 width: 14,
-                                color:
-                                    StackTheme.instance.color.accentColorGreen,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorGreen,
                               ),
                             ),
                           ),
@@ -451,8 +460,9 @@ class _WalletNetworkSettingsViewState
                                       "100%",
                                       style: STextStyles.syncPercent(context)
                                           .copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorGreen,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorGreen,
                                       ),
                                     ),
                                   ],
@@ -464,10 +474,12 @@ class _WalletNetworkSettingsViewState
                               ProgressBar(
                                 width: progressLength,
                                 height: 5,
-                                fillColor:
-                                    StackTheme.instance.color.accentColorGreen,
-                                backgroundColor: StackTheme
-                                    .instance.color.textFieldDefaultBG,
+                                fillColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorGreen,
+                                backgroundColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textFieldDefaultBG,
                                 percent: 1,
                               ),
                             ],
@@ -483,7 +495,9 @@ class _WalletNetworkSettingsViewState
                             width: _iconSize,
                             height: _iconSize,
                             decoration: BoxDecoration(
-                              color: StackTheme.instance.color.accentColorYellow
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .accentColorYellow
                                   .withOpacity(0.2),
                               borderRadius: BorderRadius.circular(_iconSize),
                             ),
@@ -492,8 +506,9 @@ class _WalletNetworkSettingsViewState
                                 Assets.svg.radioSyncing,
                                 height: 14,
                                 width: 14,
-                                color:
-                                    StackTheme.instance.color.accentColorYellow,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorYellow,
                               ),
                             ),
                           ),
@@ -524,7 +539,8 @@ class _WalletNetworkSettingsViewState
                                           style:
                                               STextStyles.syncPercent(context)
                                                   .copyWith(
-                                            color: StackTheme.instance.color
+                                            color: Theme.of(context)
+                                                .extension<StackColors>()!
                                                 .accentColorYellow,
                                           ),
                                         ),
@@ -535,7 +551,8 @@ class _WalletNetworkSettingsViewState
                                             style:
                                                 STextStyles.syncPercent(context)
                                                     .copyWith(
-                                              color: StackTheme.instance.color
+                                              color: Theme.of(context)
+                                                  .extension<StackColors>()!
                                                   .accentColorYellow,
                                             ),
                                           ),
@@ -550,10 +567,12 @@ class _WalletNetworkSettingsViewState
                               ProgressBar(
                                 width: progressLength,
                                 height: 5,
-                                fillColor:
-                                    StackTheme.instance.color.accentColorYellow,
-                                backgroundColor: StackTheme
-                                    .instance.color.textFieldDefaultBG,
+                                fillColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorYellow,
+                                backgroundColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textFieldDefaultBG,
                                 percent: _percent,
                               ),
                             ],
@@ -569,7 +588,9 @@ class _WalletNetworkSettingsViewState
                             width: _iconSize,
                             height: _iconSize,
                             decoration: BoxDecoration(
-                              color: StackTheme.instance.color.accentColorRed
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .accentColorRed
                                   .withOpacity(0.2),
                               borderRadius: BorderRadius.circular(_iconSize),
                             ),
@@ -578,7 +599,9 @@ class _WalletNetworkSettingsViewState
                                 Assets.svg.radioProblem,
                                 height: 14,
                                 width: 14,
-                                color: StackTheme.instance.color.accentColorRed,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorRed,
                               ),
                             ),
                           ),
@@ -597,16 +620,18 @@ class _WalletNetworkSettingsViewState
                                       "Unable to synchronize",
                                       style:
                                           STextStyles.w600_10(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorRed,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorRed,
                                       ),
                                     ),
                                     Text(
                                       "0%",
                                       style: STextStyles.syncPercent(context)
                                           .copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorRed,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorRed,
                                       ),
                                     ),
                                   ],
@@ -618,10 +643,12 @@ class _WalletNetworkSettingsViewState
                               ProgressBar(
                                 width: progressLength,
                                 height: 5,
-                                fillColor:
-                                    StackTheme.instance.color.accentColorRed,
-                                backgroundColor: StackTheme
-                                    .instance.color.textFieldDefaultBG,
+                                fillColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorRed,
+                                backgroundColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textFieldDefaultBG,
                                 percent: 0,
                               ),
                             ],
@@ -635,11 +662,15 @@ class _WalletNetworkSettingsViewState
                         top: 12,
                       ),
                       child: RoundedContainer(
-                        color: StackTheme.instance.color.warningBackground,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .warningBackground,
                         child: Text(
                           "Please check your internet connection and make sure your current node is not having issues.",
                           style: STextStyles.baseXS(context).copyWith(
-                            color: StackTheme.instance.color.warningForeground,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .warningForeground,
                           ),
                         ),
                       ),
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_settings_view.dart b/lib/pages/settings_views/wallet_settings_view/wallet_settings_view.dart
index f27c56ade..6e5cdd5ed 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_settings_view.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_settings_view.dart
@@ -25,7 +25,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/rounded_white_container.dart';
 import 'package:tuple/tuple.dart';
@@ -133,7 +133,7 @@ class _WalletSettingsViewState extends State<WalletSettingsView> {
   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: () {
@@ -301,13 +301,15 @@ class _WalletSettingsViewState extends State<WalletSettingsView> {
                                   ModalRoute.withName(HomeView.routeName),
                                 );
                               },
-                              style: StackTheme.instance
+                              style: Theme.of(context)
+                                  .extension<StackColors>()!
                                   .getSecondaryEnabledButtonColor(context),
                               child: Text(
                                 "Log out",
                                 style: STextStyles.button(context).copyWith(
-                                    color: StackTheme
-                                        .instance.color.accentColorDark),
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .accentColorDark),
                               ),
                             );
                           },
@@ -409,8 +411,10 @@ class _EpiBoxInfoFormState extends ConsumerState<EpicBoxInfoForm> {
             },
             child: Text(
               "Save",
-              style: STextStyles.button(context)
-                  .copyWith(color: StackTheme.instance.color.accentColorDark),
+              style: STextStyles.button(context).copyWith(
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .accentColorDark),
             ),
           ),
         ],
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_recovery_phrase_view.dart b/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_recovery_phrase_view.dart
index 12ac6a725..66d666c20 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_recovery_phrase_view.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_recovery_phrase_view.dart
@@ -12,7 +12,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/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 
@@ -55,7 +55,7 @@ class _DeleteWalletRecoveryPhraseViewState
     debugPrint("BUILD: $runtimeType");
 
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -68,13 +68,15 @@ class _DeleteWalletRecoveryPhraseViewState
             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: 20,
                   height: 20,
-                  color: StackTheme.instance.color.topNavIconPrimary,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .topNavIconPrimary,
                 ),
                 onPressed: () async {
                   final words = await _manager.mnemonic;
@@ -120,7 +122,7 @@ class _DeleteWalletRecoveryPhraseViewState
             ),
             Container(
               decoration: BoxDecoration(
-                color: StackTheme.instance.color.popupBG,
+                color: Theme.of(context).extension<StackColors>()!.popupBG,
                 borderRadius:
                     BorderRadius.circular(Constants.size.circularBorderRadius),
               ),
@@ -129,7 +131,9 @@ class _DeleteWalletRecoveryPhraseViewState
                 child: Text(
                   "Please write down your recovery phrase in the correct order and save it to keep your funds secure. You will also be asked to verify the words on the next screen.",
                   style: STextStyles.label(context).copyWith(
-                      color: StackTheme.instance.color.accentColorDark),
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .accentColorDark),
                 ),
               ),
             ),
@@ -148,7 +152,9 @@ class _DeleteWalletRecoveryPhraseViewState
               height: 16,
             ),
             TextButton(
-              style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getPrimaryEnabledButtonColor(context),
               onPressed: () {
                 showDialog<dynamic>(
                   barrierDismissible: true,
@@ -156,7 +162,8 @@ class _DeleteWalletRecoveryPhraseViewState
                   builder: (_) => StackDialog(
                     title: "Thanks! Your wallet will be deleted.",
                     leftButton: TextButton(
-                      style: StackTheme.instance
+                      style: Theme.of(context)
+                          .extension<StackColors>()!
                           .getSecondaryEnabledButtonColor(context),
                       onPressed: () {
                         Navigator.pop(context);
@@ -164,11 +171,14 @@ class _DeleteWalletRecoveryPhraseViewState
                       child: Text(
                         "Cancel",
                         style: STextStyles.button(context).copyWith(
-                            color: StackTheme.instance.color.accentColorDark),
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .accentColorDark),
                       ),
                     ),
                     rightButton: TextButton(
-                      style: StackTheme.instance
+                      style: Theme.of(context)
+                          .extension<StackColors>()!
                           .getPrimaryEnabledButtonColor(context),
                       onPressed: () async {
                         final walletId = _manager.walletId;
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_warning_view.dart b/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_warning_view.dart
index 86935df18..ec8c5a128 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_warning_view.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_warning_view.dart
@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/delete_wallet_recovery_phrase_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';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 import 'package:tuple/tuple.dart';
@@ -21,7 +21,7 @@ class DeleteWalletWarningView 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: () {
@@ -51,32 +51,40 @@ class DeleteWalletWarningView extends ConsumerWidget {
               height: 16,
             ),
             RoundedContainer(
-              color: StackTheme.instance.color.warningBackground,
+              color:
+                  Theme.of(context).extension<StackColors>()!.warningBackground,
               child: Text(
                 "You are going to permanently delete you wallet.\n\nIf you delete your wallet, the only way you can have access to your funds is by using your backup key.\n\nStack Wallet does not keep nor is able to restore your backup key or your wallet.\n\nPLEASE SAVE YOUR BACKUP KEY.",
                 style: STextStyles.baseXS(context).copyWith(
-                  color: StackTheme.instance.color.warningForeground,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .warningForeground,
                 ),
               ),
             ),
             const Spacer(),
             TextButton(
-              style:
-                  StackTheme.instance.getSecondaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getSecondaryEnabledButtonColor(context),
               onPressed: () {
                 Navigator.pop(context);
               },
               child: Text(
                 "Cancel",
-                style: STextStyles.button(context)
-                    .copyWith(color: StackTheme.instance.color.accentColorDark),
+                style: STextStyles.button(context).copyWith(
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorDark),
               ),
             ),
             const SizedBox(
               height: 12,
             ),
             TextButton(
-              style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getPrimaryEnabledButtonColor(context),
               onPressed: () async {
                 final manager = ref
                     .read(walletsChangeNotifierProvider)
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/rename_wallet_view.dart b/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/rename_wallet_view.dart
index d40edbd70..b876216e0 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/rename_wallet_view.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/rename_wallet_view.dart
@@ -5,7 +5,7 @@ import 'package:stackwallet/providers/providers.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/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/stack_text_field.dart';
@@ -52,7 +52,7 @@ class _RenameWalletViewState extends ConsumerState<RenameWalletView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: StackTheme.instance.color.background,
+      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
       appBar: AppBar(
         leading: AppBarBackButton(
           onPressed: () {
@@ -107,7 +107,9 @@ class _RenameWalletViewState extends ConsumerState<RenameWalletView> {
             ),
             const Spacer(),
             TextButton(
-              style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+              style: Theme.of(context)
+                  .extension<StackColors>()!
+                  .getPrimaryEnabledButtonColor(context),
               onPressed: () async {
                 final newName = _controller.text;
                 final success = await ref
diff --git a/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/wallet_settings_wallet_settings_view.dart b/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/wallet_settings_wallet_settings_view.dart
index 1c76bd22c..52aa6027a 100644
--- a/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/wallet_settings_wallet_settings_view.dart
+++ b/lib/pages/settings_views/wallet_settings_view/wallet_settings_wallet_settings/wallet_settings_wallet_settings_view.dart
@@ -7,7 +7,7 @@ import 'package:stackwallet/providers/providers.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/rounded_white_container.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
@@ -25,7 +25,7 @@ class WalletSettingsWalletSettingsView 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: () {
@@ -50,7 +50,7 @@ class WalletSettingsWalletSettingsView extends ConsumerWidget {
               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,
@@ -85,7 +85,7 @@ class WalletSettingsWalletSettingsView extends ConsumerWidget {
               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,
@@ -101,7 +101,8 @@ class WalletSettingsWalletSettingsView extends ConsumerWidget {
                         title:
                             "Do you want to delete ${ref.read(walletsChangeNotifierProvider).getManager(walletId).walletName}?",
                         leftButton: TextButton(
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getSecondaryEnabledButtonColor(context),
                           onPressed: () {
                             Navigator.pop(context);
@@ -109,12 +110,14 @@ class WalletSettingsWalletSettingsView extends ConsumerWidget {
                           child: Text(
                             "Cancel",
                             style: STextStyles.button(context).copyWith(
-                                color:
-                                    StackTheme.instance.color.accentColorDark),
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark),
                           ),
                         ),
                         rightButton: TextButton(
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context),
                           onPressed: () {
                             Navigator.pop(context);
diff --git a/lib/pages/wallet_view/sub_widgets/transactions_list.dart b/lib/pages/wallet_view/sub_widgets/transactions_list.dart
index 1af56c8d8..bda060071 100644
--- a/lib/pages/wallet_view/sub_widgets/transactions_list.dart
+++ b/lib/pages/wallet_view/sub_widgets/transactions_list.dart
@@ -7,7 +7,7 @@ import 'package:stackwallet/pages/wallet_view/sub_widgets/no_transactions_found.
 import 'package:stackwallet/providers/global/wallets_provider.dart';
 import 'package:stackwallet/services/coins/manager.dart';
 import 'package:stackwallet/utilities/constants.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/transaction_card.dart';
 
@@ -127,7 +127,7 @@ class _TransactionsListState extends ConsumerState<TransactionsList> {
                 final tx = list[index];
                 return Container(
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.color.popupBG,
+                    color: Theme.of(context).extension<StackColors>()!.popupBG,
                     borderRadius: radius,
                   ),
                   child: TransactionCard(
diff --git a/lib/pages/wallet_view/sub_widgets/wallet_balance_toggle_sheet.dart b/lib/pages/wallet_view/sub_widgets/wallet_balance_toggle_sheet.dart
index 593b0d9c1..afdac6d8e 100644
--- a/lib/pages/wallet_view/sub_widgets/wallet_balance_toggle_sheet.dart
+++ b/lib/pages/wallet_view/sub_widgets/wallet_balance_toggle_sheet.dart
@@ -6,7 +6,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/wallet_balance_toggle_state.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 WalletBalanceToggleSheet extends ConsumerWidget {
   const WalletBalanceToggleSheet({
@@ -25,7 +25,7 @@ class WalletBalanceToggleSheet extends ConsumerWidget {
 
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: const BorderRadius.vertical(
           top: Radius.circular(20),
         ),
@@ -46,7 +46,9 @@ class WalletBalanceToggleSheet 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,
                     ),
@@ -94,8 +96,9 @@ class WalletBalanceToggleSheet extends ConsumerWidget {
                         width: 20,
                         height: 20,
                         child: Radio(
-                          activeColor:
-                              StackTheme.instance.color.radioButtonIconEnabled,
+                          activeColor: Theme.of(context)
+                              .extension<StackColors>()!
+                              .radioButtonIconEnabled,
                           value: WalletBalanceToggleState.available,
                           groupValue: ref
                               .watch(walletBalanceToggleStateProvider.state)
@@ -126,7 +129,9 @@ class WalletBalanceToggleSheet extends ConsumerWidget {
                               "Current spendable (unlocked) balance",
                               style:
                                   STextStyles.itemSubtitle12(context).copyWith(
-                                color: StackTheme.instance.color.textSubtitle1,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textSubtitle1,
                               ),
                             ),
                           ],
@@ -146,7 +151,9 @@ class WalletBalanceToggleSheet extends ConsumerWidget {
                               "Current private spendable (unlocked) balance",
                               style:
                                   STextStyles.itemSubtitle12(context).copyWith(
-                                color: StackTheme.instance.color.textSubtitle1,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textSubtitle1,
                               ),
                             ),
                           ],
@@ -183,8 +190,9 @@ class WalletBalanceToggleSheet extends ConsumerWidget {
                         width: 20,
                         height: 20,
                         child: Radio(
-                          activeColor:
-                              StackTheme.instance.color.radioButtonIconEnabled,
+                          activeColor: Theme.of(context)
+                              .extension<StackColors>()!
+                              .radioButtonIconEnabled,
                           value: WalletBalanceToggleState.full,
                           groupValue: ref
                               .watch(walletBalanceToggleStateProvider.state)
@@ -215,7 +223,9 @@ class WalletBalanceToggleSheet extends ConsumerWidget {
                               "Total wallet balance",
                               style:
                                   STextStyles.itemSubtitle12(context).copyWith(
-                                color: StackTheme.instance.color.textSubtitle1,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textSubtitle1,
                               ),
                             ),
                           ],
@@ -235,7 +245,9 @@ class WalletBalanceToggleSheet extends ConsumerWidget {
                               "Current public spendable (unlocked) balance",
                               style:
                                   STextStyles.itemSubtitle12(context).copyWith(
-                                color: StackTheme.instance.color.textSubtitle1,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textSubtitle1,
                               ),
                             ),
                           ],
diff --git a/lib/pages/wallet_view/sub_widgets/wallet_navigation_bar.dart b/lib/pages/wallet_view/sub_widgets/wallet_navigation_bar.dart
index d55c78da3..82375fc41 100644
--- a/lib/pages/wallet_view/sub_widgets/wallet_navigation_bar.dart
+++ b/lib/pages/wallet_view/sub_widgets/wallet_navigation_bar.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_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 WalletNavigationBar extends StatelessWidget {
   const WalletNavigationBar({
@@ -27,8 +27,10 @@ class WalletNavigationBar extends StatelessWidget {
     return Container(
       height: height,
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
-        boxShadow: [StackTheme.instance.standardBoxShadow],
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
+        boxShadow: [
+          Theme.of(context).extension<StackColors>()!.standardBoxShadow
+        ],
         borderRadius: BorderRadius.circular(
           height / 2.0,
         ),
@@ -49,7 +51,8 @@ class WalletNavigationBar extends StatelessWidget {
                 minWidth: 66,
               ),
               onPressed: onReceivePressed,
-              splashColor: StackTheme.instance.color.highlight,
+              splashColor:
+                  Theme.of(context).extension<StackColors>()!.highlight,
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(
                   height / 2.0,
@@ -65,7 +68,9 @@ class WalletNavigationBar extends StatelessWidget {
                       const Spacer(),
                       Container(
                         decoration: BoxDecoration(
-                          color: StackTheme.instance.color.accentColorDark
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .accentColorDark
                               .withOpacity(0.4),
                           borderRadius: BorderRadius.circular(
                             24,
@@ -77,7 +82,9 @@ class WalletNavigationBar extends StatelessWidget {
                             Assets.svg.arrowDownLeft,
                             width: 12,
                             height: 12,
-                            color: StackTheme.instance.color.accentColorDark,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .accentColorDark,
                           ),
                         ),
                       ),
@@ -99,7 +106,8 @@ class WalletNavigationBar extends StatelessWidget {
                 minWidth: 66,
               ),
               onPressed: onSendPressed,
-              splashColor: StackTheme.instance.color.highlight,
+              splashColor:
+                  Theme.of(context).extension<StackColors>()!.highlight,
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(
                   height / 2.0,
@@ -115,7 +123,9 @@ class WalletNavigationBar extends StatelessWidget {
                       const Spacer(),
                       Container(
                         decoration: BoxDecoration(
-                          color: StackTheme.instance.color.accentColorDark
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .accentColorDark
                               .withOpacity(0.4),
                           borderRadius: BorderRadius.circular(
                             24,
@@ -127,7 +137,9 @@ class WalletNavigationBar extends StatelessWidget {
                             Assets.svg.arrowUpRight,
                             width: 12,
                             height: 12,
-                            color: StackTheme.instance.color.accentColorDark,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .accentColorDark,
                           ),
                         ),
                       ),
@@ -150,7 +162,8 @@ class WalletNavigationBar extends StatelessWidget {
                   minWidth: 66,
                 ),
                 onPressed: onExchangePressed,
-                splashColor: StackTheme.instance.color.highlight,
+                splashColor:
+                    Theme.of(context).extension<StackColors>()!.highlight,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(
                     height / 2.0,
@@ -238,7 +251,7 @@ class WalletNavigationBar extends StatelessWidget {
 //   Widget build(BuildContext context) {
 //     return Container(
 //       child: MaterialButton(
-//         splashColor: StackTheme.instance.color.highlight,
+//         splashColor: Theme.of(context).extension<StackColors>()!.highlight,
 //         padding: const EdgeInsets.all(0),
 //         minWidth: 45,
 //         shape: RoundedRectangleBorder(
diff --git a/lib/pages/wallet_view/sub_widgets/wallet_refresh_button.dart b/lib/pages/wallet_view/sub_widgets/wallet_refresh_button.dart
index 806a5861c..7faae106f 100644
--- a/lib/pages/wallet_view/sub_widgets/wallet_refresh_button.dart
+++ b/lib/pages/wallet_view/sub_widgets/wallet_refresh_button.dart
@@ -9,7 +9,7 @@ import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_
 import 'package:stackwallet/services/event_bus/global_event_bus.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 /// [eventBus] should only be set during testing
 class WalletRefreshButton extends ConsumerStatefulWidget {
@@ -96,7 +96,7 @@ class _RefreshButtonState extends ConsumerState<WalletRefreshButton>
       height: 36,
       width: 36,
       child: MaterialButton(
-        splashColor: StackTheme.instance.color.highlight,
+        splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         onPressed: () {
           final managerProvider = ref
               .read(walletsChangeNotifierProvider)
@@ -123,7 +123,7 @@ class _RefreshButtonState extends ConsumerState<WalletRefreshButton>
             Assets.svg.arrowRotate,
             width: 24,
             height: 24,
-            color: StackTheme.instance.color.textFavoriteCard,
+            color: Theme.of(context).extension<StackColors>()!.textFavoriteCard,
           ),
         ),
       ),
diff --git a/lib/pages/wallet_view/sub_widgets/wallet_summary.dart b/lib/pages/wallet_view/sub_widgets/wallet_summary.dart
index a4800594a..2a5beb705 100644
--- a/lib/pages/wallet_view/sub_widgets/wallet_summary.dart
+++ b/lib/pages/wallet_view/sub_widgets/wallet_summary.dart
@@ -6,7 +6,7 @@ import 'package:stackwallet/services/coins/manager.dart';
 import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/constants.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class WalletSummary extends StatelessWidget {
   const WalletSummary({
@@ -48,7 +48,7 @@ class WalletSummary extends StatelessWidget {
               builder: (_, ref, __) {
                 return Container(
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.colorForCoin(ref
+                    color: Theme.of(context).extension<StackColors>()!.colorForCoin(ref
                         .watch(managerProvider.select((value) => value.coin))),
                     borderRadius: BorderRadius.circular(
                       Constants.size.circularBorderRadius,
diff --git a/lib/pages/wallet_view/sub_widgets/wallet_summary_info.dart b/lib/pages/wallet_view/sub_widgets/wallet_summary_info.dart
index 03f8bdb81..9b4c384b5 100644
--- a/lib/pages/wallet_view/sub_widgets/wallet_summary_info.dart
+++ b/lib/pages/wallet_view/sub_widgets/wallet_summary_info.dart
@@ -14,7 +14,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/wallet_balance_toggle_state.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';
 
 class WalletSummaryInfo extends StatefulWidget {
@@ -130,8 +130,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                                   "${_showAvailable ? "Private" : "Public"} Balance",
                                   style: STextStyles.subtitle(context).copyWith(
                                     fontWeight: FontWeight.w500,
-                                    color: StackTheme
-                                        .instance.color.textFavoriteCard,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textFavoriteCard,
                                   ),
                                 ),
                               if (coin != Coin.firo && coin != Coin.firoTestNet)
@@ -139,8 +140,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                                   "${_showAvailable ? "Available" : "Full"} Balance",
                                   style: STextStyles.subtitle(context).copyWith(
                                     fontWeight: FontWeight.w500,
-                                    color: StackTheme
-                                        .instance.color.textFavoriteCard,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textFavoriteCard,
                                   ),
                                 ),
                               const SizedBox(
@@ -148,8 +150,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                               ),
                               SvgPicture.asset(
                                 Assets.svg.chevronDown,
-                                color:
-                                    StackTheme.instance.color.textFavoriteCard,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textFavoriteCard,
                                 width: 8,
                                 height: 4,
                               ),
@@ -167,7 +170,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                             )} ${coin.ticker}",
                             style: STextStyles.pageTitleH1(context).copyWith(
                               fontSize: 24,
-                              color: StackTheme.instance.color.textFavoriteCard,
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .textFavoriteCard,
                             ),
                           ),
                         ),
@@ -179,7 +184,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                           )} $baseCurrency",
                           style: STextStyles.subtitle(context).copyWith(
                             fontWeight: FontWeight.w500,
-                            color: StackTheme.instance.color.textFavoriteCard,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .textFavoriteCard,
                           ),
                         ),
                       ],
@@ -197,8 +204,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                                   "${_showAvailable ? "Private" : "Public"} Balance",
                                   style: STextStyles.subtitle(context).copyWith(
                                     fontWeight: FontWeight.w500,
-                                    color: StackTheme
-                                        .instance.color.textFavoriteCard,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textFavoriteCard,
                                   ),
                                 ),
                               if (coin != Coin.firo && coin != Coin.firoTestNet)
@@ -206,8 +214,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                                   "${_showAvailable ? "Available" : "Full"} Balance",
                                   style: STextStyles.subtitle(context).copyWith(
                                     fontWeight: FontWeight.w500,
-                                    color: StackTheme
-                                        .instance.color.textFavoriteCard,
+                                    color: Theme.of(context)
+                                        .extension<StackColors>()!
+                                        .textFavoriteCard,
                                   ),
                                 ),
                               const SizedBox(
@@ -217,8 +226,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                                 Assets.svg.chevronDown,
                                 width: 8,
                                 height: 4,
-                                color:
-                                    StackTheme.instance.color.textFavoriteCard,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .textFavoriteCard,
                               ),
                             ],
                           ),
@@ -233,7 +243,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                           ],
                           style: STextStyles.pageTitleH1(context).copyWith(
                             fontSize: 24,
-                            color: StackTheme.instance.color.textFavoriteCard,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .textFavoriteCard,
                           ),
                         ),
                         AnimatedText(
@@ -245,7 +257,9 @@ class _WalletSummaryInfoState extends State<WalletSummaryInfo> {
                           ],
                           style: STextStyles.subtitle(context).copyWith(
                             fontWeight: FontWeight.w500,
-                            color: StackTheme.instance.color.textFavoriteCard,
+                            color: Theme.of(context)
+                                .extension<StackColors>()!
+                                .textFavoriteCard,
                           ),
                         ),
                       ],
diff --git a/lib/pages/wallet_view/transaction_views/all_transactions_view.dart b/lib/pages/wallet_view/transaction_views/all_transactions_view.dart
index 0892da62a..78f24ba6a 100644
--- a/lib/pages/wallet_view/transaction_views/all_transactions_view.dart
+++ b/lib/pages/wallet_view/transaction_views/all_transactions_view.dart
@@ -11,7 +11,7 @@ import 'package:stackwallet/providers/ui/transaction_filter_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/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
@@ -165,9 +165,9 @@ class _TransactionDetailsViewState extends ConsumerState<AllTransactionsView> {
   @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) {
@@ -196,10 +196,12 @@ class _TransactionDetailsViewState extends ConsumerState<AllTransactionsView> {
                 key: const Key("transactionSearchFilterViewButton"),
                 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,
                 ),
diff --git a/lib/pages/wallet_view/transaction_views/dialogs/cancelling_transaction_progress_dialog.dart b/lib/pages/wallet_view/transaction_views/dialogs/cancelling_transaction_progress_dialog.dart
index 0f4017876..7d737ab41 100644
--- a/lib/pages/wallet_view/transaction_views/dialogs/cancelling_transaction_progress_dialog.dart
+++ b/lib/pages/wallet_view/transaction_views/dialogs/cancelling_transaction_progress_dialog.dart
@@ -1,8 +1,7 @@
-import 'package:flutter/cupertino.dart';
 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 CancellingTransactionProgressDialog extends StatefulWidget {
@@ -57,7 +56,7 @@ class _CancellingTransactionProgressDialogState
             Assets.svg.arrowRotate3,
             width: 24,
             height: 24,
-            color: StackTheme.instance.color.accentColorDark,
+            color: Theme.of(context).extension<StackColors>()!.accentColorDark,
           ),
         ),
         // rightButton: TextButton(
diff --git a/lib/pages/wallet_view/transaction_views/edit_note_view.dart b/lib/pages/wallet_view/transaction_views/edit_note_view.dart
index bda5692b3..aa085429b 100644
--- a/lib/pages/wallet_view/transaction_views/edit_note_view.dart
+++ b/lib/pages/wallet_view/transaction_views/edit_note_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/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/stack_text_field.dart';
@@ -48,9 +48,10 @@ class _EditNoteViewState extends ConsumerState<EditNoteView> {
   @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) {
@@ -130,7 +131,8 @@ class _EditNoteViewState extends ConsumerState<EditNoteView> {
                               Navigator.of(context).pop();
                             }
                           },
-                          style: StackTheme.instance
+                          style: Theme.of(context)
+                              .extension<StackColors>()!
                               .getPrimaryEnabledButtonColor(context),
                           child: Text(
                             "Save",
diff --git a/lib/pages/wallet_view/transaction_views/transaction_details_view.dart b/lib/pages/wallet_view/transaction_views/transaction_details_view.dart
index 0871d7ae4..391b5caec 100644
--- a/lib/pages/wallet_view/transaction_views/transaction_details_view.dart
+++ b/lib/pages/wallet_view/transaction_views/transaction_details_view.dart
@@ -22,7 +22,7 @@ import 'package:stackwallet/utilities/enums/flush_bar_type.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/custom_buttons/blue_text_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -179,12 +179,16 @@ class _TransactionDetailsViewState
           },
           child: Text(
             "Cancel",
-            style: STextStyles.button(context)
-                .copyWith(color: StackTheme.instance.color.accentColorDark),
+            style: STextStyles.button(context).copyWith(
+                color: Theme.of(context)
+                    .extension<StackColors>()!
+                    .accentColorDark),
           ),
         ),
         rightButton: TextButton(
-          style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getPrimaryEnabledButtonColor(context),
           onPressed: () {
             Navigator.of(context).pop(true);
           },
@@ -201,9 +205,9 @@ class _TransactionDetailsViewState
   @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) {
@@ -375,8 +379,9 @@ class _TransactionDetailsViewState
                                   Assets.svg.pencil,
                                   width: 10,
                                   height: 10,
-                                  color:
-                                      StackTheme.instance.color.infoItemIcons,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .infoItemIcons,
                                 ),
                                 const SizedBox(
                                   width: 4,
@@ -718,7 +723,7 @@ class _TransactionDetailsViewState
               child: TextButton(
                 style: ButtonStyle(
                   backgroundColor: MaterialStateProperty.all<Color>(
-                    StackTheme.instance.color.textError,
+                    Theme.of(context).extension<StackColors>()!.textError,
                   ),
                 ),
                 onPressed: () async {
diff --git a/lib/pages/wallet_view/transaction_views/transaction_search_filter_view.dart b/lib/pages/wallet_view/transaction_views/transaction_search_filter_view.dart
index 1239835b4..5966e3f5c 100644
--- a/lib/pages/wallet_view/transaction_views/transaction_search_filter_view.dart
+++ b/lib/pages/wallet_view/transaction_views/transaction_search_filter_view.dart
@@ -7,13 +7,14 @@ import 'package:flutter_svg/svg.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:stackwallet/models/transaction_filter.dart';
 import 'package:stackwallet/providers/providers.dart';
+import 'package:stackwallet/providers/ui/color_theme_provider.dart';
 import 'package:stackwallet/providers/ui/transaction_filter_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/icon_widgets/x_icon.dart';
@@ -50,8 +51,11 @@ class _TransactionSearchViewState
   final keywordTextFieldFocusNode = FocusNode();
   final amountTextFieldFocusNode = FocusNode();
 
+  late Color baseColor;
+
   @override
   initState() {
+    baseColor = ref.read(colorThemeProvider.state).state.textSubtitle2;
     final filterState = ref.read(transactionFilterProvider.state).state;
     if (filterState != null) {
       _isActiveReceivedCheckbox = filterState.received;
@@ -91,8 +95,8 @@ class _TransactionSearchViewState
       isDateSelected ? "From..." : _fromDateString,
       style: STextStyles.fieldLabel(context).copyWith(
           color: isDateSelected
-              ? StackTheme.instance.color.textSubtitle2
-              : StackTheme.instance.color.accentColorDark),
+              ? Theme.of(context).extension<StackColors>()!.textSubtitle2
+              : Theme.of(context).extension<StackColors>()!.accentColorDark),
     );
   }
 
@@ -102,53 +106,54 @@ class _TransactionSearchViewState
       isDateSelected ? "To..." : _toDateString,
       style: STextStyles.fieldLabel(context).copyWith(
           color: isDateSelected
-              ? StackTheme.instance.color.textSubtitle2
-              : StackTheme.instance.color.accentColorDark),
+              ? Theme.of(context).extension<StackColors>()!.textSubtitle2
+              : Theme.of(context).extension<StackColors>()!.accentColorDark),
     );
   }
 
   var _selectedFromDate = DateTime(2007);
   var _selectedToDate = DateTime.now();
 
-  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(
-      backgroundPicker: StackTheme.instance.color.popupBG,
-      // backgroundHeader: StackTheme.instance.color.textSubtitle2,
+      backgroundPicker: Theme.of(context).extension<StackColors>()!.popupBG,
+      // backgroundHeader: Theme.of(context).extension<StackColors>()!.textSubtitle2,
       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.textWhite,
+        color: Theme.of(context).extension<StackColors>()!.textWhite,
       ),
       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,
       ),
@@ -158,14 +163,14 @@ class _TransactionSearchViewState
 
   MaterialRoundedYearPickerStyle _buildYearPickerStyle() {
     return MaterialRoundedYearPickerStyle(
-      backgroundPicker: StackTheme.instance.color.popupBG,
+      backgroundPicker: Theme.of(context).extension<StackColors>()!.popupBG,
       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,
       ),
@@ -187,6 +192,8 @@ class _TransactionSearchViewState
         GestureDetector(
           key: const Key("transactionSearchViewFromDatePickerKey"),
           onTap: () async {
+            final color =
+                Theme.of(context).extension<StackColors>()!.accentColorDark;
             final height = MediaQuery.of(context).size.height;
             // check and hide keyboard
             if (FocusScope.of(context).hasFocus) {
@@ -202,7 +209,7 @@ class _TransactionSearchViewState
               height: height * 0.5,
               theme: ThemeData(
                 primarySwatch: Util.createMaterialColor(
-                  StackTheme.instance.color.accentColorDark,
+                  color,
                 ),
               ),
               //TODO pick a better initial date
@@ -237,11 +244,15 @@ class _TransactionSearchViewState
           child: Container(
             width: width,
             decoration: BoxDecoration(
-              color: StackTheme.instance.color.textFieldDefaultBG,
+              color: Theme.of(context)
+                  .extension<StackColors>()!
+                  .textFieldDefaultBG,
               borderRadius:
                   BorderRadius.circular(Constants.size.circularBorderRadius),
               border: Border.all(
-                color: StackTheme.instance.color.textFieldDefaultBG,
+                color: Theme.of(context)
+                    .extension<StackColors>()!
+                    .textFieldDefaultBG,
                 width: 1,
               ),
             ),
@@ -253,7 +264,9 @@ class _TransactionSearchViewState
                     Assets.svg.calendar,
                     height: 20,
                     width: 20,
-                    color: StackTheme.instance.color.textSubtitle2,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textSubtitle2,
                   ),
                   const SizedBox(
                     width: 10,
@@ -281,6 +294,8 @@ class _TransactionSearchViewState
         GestureDetector(
           key: const Key("transactionSearchViewToDatePickerKey"),
           onTap: () async {
+            final color =
+                Theme.of(context).extension<StackColors>()!.accentColorDark;
             final height = MediaQuery.of(context).size.height;
             // check and hide keyboard
             if (FocusScope.of(context).hasFocus) {
@@ -295,7 +310,7 @@ class _TransactionSearchViewState
               height: height * 0.5,
               theme: ThemeData(
                 primarySwatch: Util.createMaterialColor(
-                  StackTheme.instance.color.accentColorDark,
+                  color,
                 ),
               ),
               //TODO pick a better initial date
@@ -331,11 +346,15 @@ class _TransactionSearchViewState
           child: Container(
             width: width,
             decoration: BoxDecoration(
-              color: StackTheme.instance.color.textFieldDefaultBG,
+              color: Theme.of(context)
+                  .extension<StackColors>()!
+                  .textFieldDefaultBG,
               borderRadius:
                   BorderRadius.circular(Constants.size.circularBorderRadius),
               border: Border.all(
-                color: StackTheme.instance.color.textFieldDefaultBG,
+                color: Theme.of(context)
+                    .extension<StackColors>()!
+                    .textFieldDefaultBG,
                 width: 1,
               ),
             ),
@@ -347,7 +366,9 @@ class _TransactionSearchViewState
                     Assets.svg.calendar,
                     height: 20,
                     width: 20,
-                    color: StackTheme.instance.color.textSubtitle2,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textSubtitle2,
                   ),
                   const SizedBox(
                     width: 10,
@@ -370,9 +391,9 @@ class _TransactionSearchViewState
   @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) {
@@ -684,13 +705,15 @@ class _TransactionSearchViewState
                                     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.accentColorDark),
+                                      color: Theme.of(context)
+                                          .extension<StackColors>()!
+                                          .accentColorDark),
                                 ),
                               ),
                             ),
@@ -702,7 +725,8 @@ class _TransactionSearchViewState
                             child: SizedBox(
                               height: 48,
                               child: TextButton(
-                                style: StackTheme.instance
+                                style: Theme.of(context)
+                                    .extension<StackColors>()!
                                     .getPrimaryEnabledButtonColor(context),
                                 onPressed: () async {
                                   _onApplyPressed();
diff --git a/lib/pages/wallet_view/wallet_view.dart b/lib/pages/wallet_view/wallet_view.dart
index 9717158db..b2069712d 100644
--- a/lib/pages/wallet_view/wallet_view.dart
+++ b/lib/pages/wallet_view/wallet_view.dart
@@ -39,7 +39,7 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/enums/wallet_balance_toggle_state.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';
@@ -208,21 +208,21 @@ class _WalletViewState extends ConsumerState<WalletView> {
       case WalletSyncStatus.unableToSync:
         return SvgPicture.asset(
           Assets.svg.radioProblem,
-          color: StackTheme.instance.color.accentColorRed,
+          color: Theme.of(context).extension<StackColors>()!.accentColorRed,
           width: 20,
           height: 20,
         );
       case WalletSyncStatus.synced:
         return SvgPicture.asset(
           Assets.svg.radio,
-          color: StackTheme.instance.color.accentColorGreen,
+          color: Theme.of(context).extension<StackColors>()!.accentColorGreen,
           width: 20,
           height: 20,
         );
       case WalletSyncStatus.syncing:
         return SvgPicture.asset(
           Assets.svg.radioSyncing,
-          color: StackTheme.instance.color.accentColorYellow,
+          color: Theme.of(context).extension<StackColors>()!.accentColorYellow,
           width: 20,
           height: 20,
         );
@@ -375,7 +375,7 @@ class _WalletViewState extends ConsumerState<WalletView> {
             children: [
               SvgPicture.asset(
                 Assets.svg.iconFor(coin: coin),
-                // color: StackTheme.instance.color.accentColorDark
+                // color: Theme.of(context).extension<StackColors>()!.accentColorDark
                 width: 24,
                 height: 24,
               ),
@@ -405,7 +405,7 @@ class _WalletViewState extends ConsumerState<WalletView> {
                   key: const Key("walletViewRadioButton"),
                   size: 36,
                   shadows: const [],
-                  color: StackTheme.instance.color.background,
+                  color: Theme.of(context).extension<StackColors>()!.background,
                   icon: _buildNetworkIcon(_currentSyncStatus),
                   onPressed: () {
                     Navigator.of(context).pushNamed(
@@ -432,7 +432,7 @@ class _WalletViewState extends ConsumerState<WalletView> {
                   key: const Key("walletViewAlertsButton"),
                   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.hasUnreadNotificationsFor(walletId)))
@@ -443,7 +443,9 @@ class _WalletViewState extends ConsumerState<WalletView> {
                     color: ref.watch(notificationsProvider.select((value) =>
                             value.hasUnreadNotificationsFor(walletId)))
                         ? null
-                        : StackTheme.instance.color.topNavIconPrimary,
+                        : Theme.of(context)
+                            .extension<StackColors>()!
+                            .topNavIconPrimary,
                   ),
                   onPressed: () {
                     // reset unread state
@@ -492,10 +494,12 @@ class _WalletViewState extends ConsumerState<WalletView> {
                   key: const Key("walletViewSettingsButton"),
                   size: 36,
                   shadows: const [],
-                  color: StackTheme.instance.color.background,
+                  color: Theme.of(context).extension<StackColors>()!.background,
                   icon: SvgPicture.asset(
                     Assets.svg.bars,
-                    color: StackTheme.instance.color.accentColorDark,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorDark,
                     width: 20,
                     height: 20,
                   ),
@@ -518,7 +522,7 @@ class _WalletViewState extends ConsumerState<WalletView> {
         ),
         body: SafeArea(
           child: Container(
-            color: StackTheme.instance.color.background,
+            color: Theme.of(context).extension<StackColors>()!.background,
             child: Column(
               children: [
                 const SizedBox(
@@ -548,7 +552,8 @@ class _WalletViewState extends ConsumerState<WalletView> {
                       children: [
                         Expanded(
                           child: TextButton(
-                            style: StackTheme.instance
+                            style: Theme.of(context)
+                                .extension<StackColors>()!
                                 .getSecondaryEnabledButtonColor(context),
                             onPressed: () async {
                               await showDialog<void>(
@@ -565,8 +570,9 @@ class _WalletViewState extends ConsumerState<WalletView> {
                                       "Cancel",
                                       style:
                                           STextStyles.button(context).copyWith(
-                                        color: StackTheme
-                                            .instance.color.accentColorDark,
+                                        color: Theme.of(context)
+                                            .extension<StackColors>()!
+                                            .accentColorDark,
                                       ),
                                     ),
                                   ),
@@ -576,7 +582,8 @@ class _WalletViewState extends ConsumerState<WalletView> {
 
                                       unawaited(attemptAnonymize());
                                     },
-                                    style: StackTheme.instance
+                                    style: Theme.of(context)
+                                        .extension<StackColors>()!
                                         .getPrimaryEnabledButtonColor(context),
                                     child: Text(
                                       "Continue",
@@ -589,8 +596,9 @@ class _WalletViewState extends ConsumerState<WalletView> {
                             child: Text(
                               "Anonymize funds",
                               style: STextStyles.button(context).copyWith(
-                                color: StackTheme
-                                    .instance.color.buttonTextSecondary,
+                                color: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .buttonTextSecondary,
                               ),
                             ),
                           ),
@@ -609,7 +617,9 @@ class _WalletViewState extends ConsumerState<WalletView> {
                       Text(
                         "Transactions",
                         style: STextStyles.itemSubtitle(context).copyWith(
-                          color: StackTheme.instance.color.textDark3,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .textDark3,
                         ),
                       ),
                       BlueTextButton(
diff --git a/lib/pages/wallets_sheet/wallets_sheet.dart b/lib/pages/wallets_sheet/wallets_sheet.dart
index c22aefdd5..b69971ab5 100644
--- a/lib/pages/wallets_sheet/wallets_sheet.dart
+++ b/lib/pages/wallets_sheet/wallets_sheet.dart
@@ -4,7 +4,7 @@ import 'package:stackwallet/providers/providers.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/wallet_card.dart';
 
 class WalletsSheet extends ConsumerWidget {
@@ -24,7 +24,7 @@ class WalletsSheet extends ConsumerWidget {
 
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: const BorderRadius.vertical(
           top: Radius.circular(20),
         ),
@@ -45,7 +45,9 @@ class WalletsSheet 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,
                     ),
diff --git a/lib/pages/wallets_view/sub_widgets/all_wallets.dart b/lib/pages/wallets_view/sub_widgets/all_wallets.dart
index 973d0ef51..eae7374bf 100644
--- a/lib/pages/wallets_view/sub_widgets/all_wallets.dart
+++ b/lib/pages/wallets_view/sub_widgets/all_wallets.dart
@@ -4,7 +4,7 @@ import 'package:stackwallet/pages/add_wallet_views/add_wallet_view/add_wallet_vi
 import 'package:stackwallet/pages/wallets_view/sub_widgets/wallet_list_item.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/custom_buttons/blue_text_button.dart';
 
 class AllWallets extends StatelessWidget {
@@ -21,7 +21,7 @@ class AllWallets extends StatelessWidget {
             Text(
               "All wallets",
               style: STextStyles.itemSubtitle(context).copyWith(
-                color: StackTheme.instance.color.textDark,
+                color: Theme.of(context).extension<StackColors>()!.textDark,
               ),
             ),
             BlueTextButton(
diff --git a/lib/pages/wallets_view/sub_widgets/empty_wallets.dart b/lib/pages/wallets_view/sub_widgets/empty_wallets.dart
index cde45c2b0..4309186ac 100644
--- a/lib/pages/wallets_view/sub_widgets/empty_wallets.dart
+++ b/lib/pages/wallets_view/sub_widgets/empty_wallets.dart
@@ -3,7 +3,7 @@ import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/pages/add_wallet_views/add_wallet_view/add_wallet_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';
 
 class EmptyWallets extends StatelessWidget {
@@ -43,10 +43,14 @@ class EmptyWallets extends StatelessWidget {
                 textAlign: TextAlign.center,
                 style: isDesktop
                     ? STextStyles.desktopSubtitleH2(context).copyWith(
-                        color: StackTheme.instance.color.textSubtitle1,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textSubtitle1,
                       )
                     : STextStyles.subtitle(context).copyWith(
-                        color: StackTheme.instance.color.textSubtitle1,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textSubtitle1,
                       ),
               ),
               SizedBox(
@@ -88,7 +92,9 @@ class AddWalletButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return TextButton(
-      style: StackTheme.instance.getPrimaryEnabledButtonColor(context),
+      style: Theme.of(context)
+          .extension<StackColors>()!
+          .getPrimaryEnabledButtonColor(context),
       onPressed: () {
         Navigator.of(context).pushNamed(AddWalletView.routeName);
       },
diff --git a/lib/pages/wallets_view/sub_widgets/favorite_card.dart b/lib/pages/wallets_view/sub_widgets/favorite_card.dart
index 82f68e266..bc95d51b5 100644
--- a/lib/pages/wallets_view/sub_widgets/favorite_card.dart
+++ b/lib/pages/wallets_view/sub_widgets/favorite_card.dart
@@ -10,7 +10,7 @@ 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:tuple/tuple.dart';
 
 class FavoriteCard extends ConsumerStatefulWidget {
@@ -70,7 +70,7 @@ class _FavoriteCardState extends ConsumerState<FavoriteCard> {
                 width: widget.width,
                 height: widget.height,
                 decoration: BoxDecoration(
-                  color: StackTheme.instance.colorForCoin(coin),
+                  color: Theme.of(context).extension<StackColors>()!.colorForCoin(coin),
                   borderRadius: BorderRadius.circular(
                     Constants.size.circularBorderRadius,
                   ),
@@ -138,7 +138,7 @@ class _FavoriteCardState extends ConsumerState<FavoriteCard> {
                           ref.watch(managerProvider
                               .select((value) => value.walletName)),
                           style: STextStyles.itemSubtitle12(context).copyWith(
-                            color: StackTheme.instance.color.textFavoriteCard,
+                            color: Theme.of(context).extension<StackColors>()!.textFavoriteCard,
                           ),
                           overflow: TextOverflow.fade,
                         ),
@@ -185,7 +185,7 @@ class _FavoriteCardState extends ConsumerState<FavoriteCard> {
                             )} ${coin.ticker}",
                             style: STextStyles.titleBold12(context).copyWith(
                               fontSize: 16,
-                              color: StackTheme.instance.color.textFavoriteCard,
+                              color: Theme.of(context).extension<StackColors>()!.textFavoriteCard,
                             ),
                           ),
                         ),
@@ -206,7 +206,7 @@ class _FavoriteCardState extends ConsumerState<FavoriteCard> {
                           )}",
                           style: STextStyles.itemSubtitle12(context).copyWith(
                             fontSize: 10,
-                            color: StackTheme.instance.color.textFavoriteCard,
+                            color: Theme.of(context).extension<StackColors>()!.textFavoriteCard,
                           ),
                         ),
                       ],
diff --git a/lib/pages/wallets_view/sub_widgets/favorite_wallets.dart b/lib/pages/wallets_view/sub_widgets/favorite_wallets.dart
index e78c34195..073747386 100644
--- a/lib/pages/wallets_view/sub_widgets/favorite_wallets.dart
+++ b/lib/pages/wallets_view/sub_widgets/favorite_wallets.dart
@@ -10,7 +10,7 @@ import 'package:stackwallet/services/coins/manager.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_page_view/custom_page_view.dart'
     as cpv;
 
@@ -83,7 +83,7 @@ class _FavoriteWalletsState extends ConsumerState<FavoriteWallets> {
               Text(
                 "Favorite Wallets",
                 style: STextStyles.itemSubtitle(context).copyWith(
-                  color: StackTheme.instance.color.textDark3,
+                  color: Theme.of(context).extension<StackColors>()!.textDark3,
                 ),
               ),
               const Spacer(),
@@ -91,13 +91,15 @@ class _FavoriteWalletsState extends ConsumerState<FavoriteWallets> {
                 TextButton(
                   style: ButtonStyle(
                     backgroundColor: MaterialStateProperty.all<Color>(
-                        StackTheme.instance.color.background),
+                        Theme.of(context).extension<StackColors>()!.background),
                   ),
                   child: SvgPicture.asset(
                     Assets.svg.ellipsis,
                     width: 16,
                     height: 16,
-                    color: StackTheme.instance.color.accentColorDark,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorDark,
                   ),
                   onPressed: () {
                     Navigator.of(context).pushNamed(
@@ -120,12 +122,15 @@ class _FavoriteWalletsState extends ConsumerState<FavoriteWallets> {
                   height: cardHeight,
                   width: cardWidth,
                   decoration: BoxDecoration(
-                    color: StackTheme.instance.color.textFieldDefaultBG,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textFieldDefaultBG,
                     borderRadius: BorderRadius.circular(
                         Constants.size.circularBorderRadius),
                   ),
                   child: MaterialButton(
-                    splashColor: StackTheme.instance.color.highlight,
+                    splashColor:
+                        Theme.of(context).extension<StackColors>()!.highlight,
                     key: const Key("favoriteWalletsAddFavoriteButtonKey"),
                     padding: const EdgeInsets.all(12),
                     materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
@@ -144,7 +149,9 @@ class _FavoriteWalletsState extends ConsumerState<FavoriteWallets> {
                           Assets.svg.plus,
                           width: 8,
                           height: 8,
-                          color: StackTheme.instance.color.textSubtitle1,
+                          color: Theme.of(context)
+                              .extension<StackColors>()!
+                              .textSubtitle1,
                         ),
                         const SizedBox(
                           width: 4,
diff --git a/lib/pages/wallets_view/sub_widgets/wallet_list_item.dart b/lib/pages/wallets_view/sub_widgets/wallet_list_item.dart
index dea2030e5..842b1f4c4 100644
--- a/lib/pages/wallets_view/sub_widgets/wallet_list_item.dart
+++ b/lib/pages/wallets_view/sub_widgets/wallet_list_item.dart
@@ -8,7 +8,7 @@ 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/widgets/rounded_white_container.dart';
 
 class WalletListItem extends ConsumerWidget {
@@ -32,7 +32,7 @@ class WalletListItem extends ConsumerWidget {
     return RoundedWhiteContainer(
       padding: const EdgeInsets.all(0),
       child: MaterialButton(
-        // splashColor: StackTheme.instance.color.highlight,
+        // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         key: Key("walletListItemButtonKey_${coin.name}"),
         padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 13),
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
@@ -78,13 +78,16 @@ class WalletListItem extends ConsumerWidget {
 
                   final double percentChange = tuple.item2;
 
-                  var percentChangedColor = StackTheme.instance.color.textDark;
+                  var percentChangedColor =
+                      Theme.of(context).extension<StackColors>()!.textDark;
                   if (percentChange > 0) {
-                    percentChangedColor =
-                        StackTheme.instance.color.accentColorGreen;
+                    percentChangedColor = Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorGreen;
                   } else if (percentChange < 0) {
-                    percentChangedColor =
-                        StackTheme.instance.color.accentColorRed;
+                    percentChangedColor = Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorRed;
                   }
 
                   return Column(
diff --git a/lib/pages_desktop_specific/create_password/create_password_view.dart b/lib/pages_desktop_specific/create_password/create_password_view.dart
index 1260fbc51..2391a22f6 100644
--- a/lib/pages_desktop_specific/create_password/create_password_view.dart
+++ b/lib/pages_desktop_specific/create_password/create_password_view.dart
@@ -10,7 +10,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/desktop/desktop_app_bar.dart';
 import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
@@ -196,8 +196,9 @@ class _CreatePasswordViewState extends State<CreatePasswordView> {
                                           hidePassword
                                               ? Assets.svg.eye
                                               : Assets.svg.eyeSlash,
-                                          color: StackTheme
-                                              .instance.color.textDark3,
+                                          color: Theme.of(context)
+                                              .extension<StackColors>()!
+                                              .textDark3,
                                           width: 24,
                                           height: 19,
                                         ),
@@ -262,8 +263,9 @@ class _CreatePasswordViewState extends State<CreatePasswordView> {
                                 style:
                                     STextStyles.desktopTextExtraSmall(context)
                                         .copyWith(
-                                  color:
-                                      StackTheme.instance.color.textSubtitle1,
+                                  color: Theme.of(context)
+                                      .extension<StackColors>()!
+                                      .textSubtitle1,
                                 ),
                               )
                             : null,
@@ -280,12 +282,19 @@ class _CreatePasswordViewState extends State<CreatePasswordView> {
                           width: 458,
                           height: 8,
                           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,
                         ),
@@ -342,10 +351,12 @@ class _CreatePasswordViewState extends State<CreatePasswordView> {
                                                   : Assets.svg.eyeSlash,
                                           color: fieldsMatch &&
                                                   passwordStrength == 1
-                                              ? StackTheme.instance.color
+                                              ? Theme.of(context)
+                                                  .extension<StackColors>()!
                                                   .accentColorGreen
-                                              : StackTheme
-                                                  .instance.color.textDark3,
+                                              : Theme.of(context)
+                                                  .extension<StackColors>()!
+                                                  .textDark3,
                                           width: 24,
                                           height: 19,
                                         ),
@@ -373,9 +384,11 @@ class _CreatePasswordViewState extends State<CreatePasswordView> {
                       height: 70,
                       child: TextButton(
                         style: nextEnabled
-                            ? StackTheme.instance
+                            ? Theme.of(context)
+                                .extension<StackColors>()!
                                 .getPrimaryEnabledButtonColor(context)
-                            : StackTheme.instance
+                            : Theme.of(context)
+                                .extension<StackColors>()!
                                 .getPrimaryDisabledButtonColor(context),
                         onPressed: nextEnabled ? onNextPressed : null,
                         child: Text(
diff --git a/lib/pages_desktop_specific/home/desktop_home_view.dart b/lib/pages_desktop_specific/home/desktop_home_view.dart
index e7bc12507..bd4996ec1 100644
--- a/lib/pages_desktop_specific/home/desktop_home_view.dart
+++ b/lib/pages_desktop_specific/home/desktop_home_view.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/pages_desktop_specific/home/desktop_menu.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class DesktopHomeView extends ConsumerStatefulWidget {
   const DesktopHomeView({Key? key}) : super(key: key);
@@ -55,7 +55,7 @@ class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: StackTheme.instance.color.background,
+      color: Theme.of(context).extension<StackColors>()!.background,
       child: Row(
         children: [
           DesktopMenu(
diff --git a/lib/pages_desktop_specific/home/desktop_menu.dart b/lib/pages_desktop_specific/home/desktop_menu.dart
index 275f4cc03..81ba00a16 100644
--- a/lib/pages_desktop_specific/home/desktop_menu.dart
+++ b/lib/pages_desktop_specific/home/desktop_menu.dart
@@ -4,7 +4,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:stackwallet/pages_desktop_specific/home/desktop_menu_item.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 DesktopMenu extends ConsumerStatefulWidget {
   const DesktopMenu({
@@ -41,7 +41,7 @@ class _DesktopMenuState extends ConsumerState<DesktopMenu> {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: StackTheme.instance.color.popupBG,
+      color: Theme.of(context).extension<StackColors>()!.popupBG,
       child: SizedBox(
         width: _width,
         child: Column(
diff --git a/lib/pages_desktop_specific/home/desktop_menu_item.dart b/lib/pages_desktop_specific/home/desktop_menu_item.dart
index 68d21061e..76d945e2d 100644
--- a/lib/pages_desktop_specific/home/desktop_menu_item.dart
+++ b/lib/pages_desktop_specific/home/desktop_menu_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';
 
 class DesktopMenuItem<T> extends StatelessWidget {
   const DesktopMenuItem({
@@ -24,8 +24,12 @@ class DesktopMenuItem<T> extends StatelessWidget {
   Widget build(BuildContext context) {
     return TextButton(
       style: value == group
-          ? StackTheme.instance.getDesktopMenuButtonColorSelected(context)
-          : StackTheme.instance.getDesktopMenuButtonColor(context),
+          ? Theme.of(context)
+              .extension<StackColors>()!
+              .getDesktopMenuButtonColorSelected(context)
+          : Theme.of(context)
+              .extension<StackColors>()!
+              .getDesktopMenuButtonColor(context),
       onPressed: () {
         onChanged(value);
       },
diff --git a/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart b/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart
index 5635b2544..64e4a23d3 100644
--- a/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart
+++ b/lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/utilities/constants.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/wallet_info_row/wallet_info_row.dart';
 
 class CoinWalletsTable extends ConsumerWidget {
@@ -16,7 +16,7 @@ class CoinWalletsTable 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: BorderRadius.circular(
           Constants.size.circularBorderRadius,
         ),
diff --git a/lib/pages_desktop_specific/home/my_stack_view/exit_to_my_stack_button.dart b/lib/pages_desktop_specific/home/my_stack_view/exit_to_my_stack_button.dart
index b4b5f70e3..d34e1f7b3 100644
--- a/lib/pages_desktop_specific/home/my_stack_view/exit_to_my_stack_button.dart
+++ b/lib/pages_desktop_specific/home/my_stack_view/exit_to_my_stack_button.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:stackwallet/pages_desktop_specific/home/desktop_home_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';
 
 class ExitToMyStackButton extends StatelessWidget {
   const ExitToMyStackButton({
@@ -20,8 +20,9 @@ class ExitToMyStackButton extends StatelessWidget {
       child: SizedBox(
         height: 56,
         child: TextButton(
-          style:
-              StackTheme.instance.getSmallSecondaryEnabledButtonColor(context),
+          style: Theme.of(context)
+              .extension<StackColors>()!
+              .getSmallSecondaryEnabledButtonColor(context),
           onPressed: onPressed ??
               () {
                 Navigator.of(context).popUntil(
diff --git a/lib/pages_desktop_specific/home/my_stack_view/my_wallets.dart b/lib/pages_desktop_specific/home/my_stack_view/my_wallets.dart
index 5879cedba..e41c7643d 100644
--- a/lib/pages_desktop_specific/home/my_stack_view/my_wallets.dart
+++ b/lib/pages_desktop_specific/home/my_stack_view/my_wallets.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:stackwallet/pages/add_wallet_views/add_wallet_view/add_wallet_view.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_summary_table.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/blue_text_button.dart';
 
 class MyWallets extends StatefulWidget {
@@ -23,7 +23,9 @@ class _MyWalletsState extends State<MyWallets> {
           Text(
             "Favorite wallets",
             style: STextStyles.desktopTextExtraSmall(context).copyWith(
-              color: StackTheme.instance.color.textFieldActiveSearchIconRight,
+              color: Theme.of(context)
+                  .extension<StackColors>()!
+                  .textFieldActiveSearchIconRight,
             ),
           ),
           const SizedBox(
@@ -44,8 +46,9 @@ class _MyWalletsState extends State<MyWallets> {
               Text(
                 "All wallets",
                 style: STextStyles.desktopTextExtraSmall(context).copyWith(
-                  color:
-                      StackTheme.instance.color.textFieldActiveSearchIconRight,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .textFieldActiveSearchIconRight,
                 ),
               ),
               const Spacer(),
diff --git a/lib/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart b/lib/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart
index ac1c32970..243d9d036 100644
--- a/lib/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart
+++ b/lib/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart
@@ -8,7 +8,7 @@ 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/widgets/table_view/table_view.dart';
 import 'package:stackwallet/widgets/table_view/table_view_cell.dart';
 import 'package:stackwallet/widgets/table_view/table_view_row.dart';
@@ -41,7 +41,7 @@ class _WalletTableState extends ConsumerState<WalletSummaryTable> {
               vertical: 16,
             ),
             decoration: BoxDecoration(
-              color: StackTheme.instance.color.popupBG,
+              color: Theme.of(context).extension<StackColors>()!.popupBG,
               borderRadius: BorderRadius.circular(
                 Constants.size.circularBorderRadius,
               ),
@@ -63,7 +63,9 @@ class _WalletTableState extends ConsumerState<WalletSummaryTable> {
                       providersByCoin[i].key.prettyName,
                       style:
                           STextStyles.desktopTextExtraSmall(context).copyWith(
-                        color: StackTheme.instance.color.textDark,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textDark,
                       ),
                     )
                   ],
@@ -76,7 +78,9 @@ class _WalletTableState extends ConsumerState<WalletSummaryTable> {
                       ? "${providersByCoin[i].value.length} wallet"
                       : "${providersByCoin[i].value.length} wallets",
                   style: STextStyles.desktopTextExtraSmall(context).copyWith(
-                    color: StackTheme.instance.color.textSubtitle1,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textSubtitle1,
                   ),
                 ),
               ),
@@ -133,11 +137,14 @@ class TablePriceInfo extends ConsumerWidget {
 
     final double percentChange = tuple.item2;
 
-    var percentChangedColor = StackTheme.instance.color.textDark;
+    var percentChangedColor =
+        Theme.of(context).extension<StackColors>()!.textDark;
     if (percentChange > 0) {
-      percentChangedColor = StackTheme.instance.color.accentColorGreen;
+      percentChangedColor =
+          Theme.of(context).extension<StackColors>()!.accentColorGreen;
     } else if (percentChange < 0) {
-      percentChangedColor = StackTheme.instance.color.accentColorRed;
+      percentChangedColor =
+          Theme.of(context).extension<StackColors>()!.accentColorRed;
     }
 
     return Row(
@@ -146,7 +153,7 @@ class TablePriceInfo extends ConsumerWidget {
         Text(
           "$priceString $currency/${coin.ticker}",
           style: STextStyles.desktopTextExtraSmall(context).copyWith(
-            color: StackTheme.instance.color.textSubtitle1,
+            color: Theme.of(context).extension<StackColors>()!.textSubtitle1,
           ),
         ),
         Text(
diff --git a/lib/utilities/assets.dart b/lib/utilities/assets.dart
index 883729ae9..635bc91f4 100644
--- a/lib/utilities/assets.dart
+++ b/lib/utilities/assets.dart
@@ -1,11 +1,12 @@
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/color_theme.dart';
 
 abstract class Assets {
   static const svg = _SVG();
   static const png = _PNG();
   static const lottie = _ANIMATIONS();
   static const socials = _SOCIALS();
+  static ThemeType? theme;
 }
 
 class _SOCIALS {
@@ -23,10 +24,8 @@ class _SVG {
   String get plus => "assets/svg/plus.svg";
   String get gear => "assets/svg/gear.svg";
   String get bell => "assets/svg/bell.svg";
-  String get bellNew =>
-      "assets/svg/${StackTheme.instance.theme.name}/bell-new.svg";
-  String get stackIcon =>
-      "assets/svg/${StackTheme.instance.theme.name}/stack-icon1.svg";
+  String get bellNew => "assets/svg/${Assets.theme!.name}/bell-new.svg";
+  String get stackIcon => "assets/svg/${Assets.theme!.name}/stack-icon1.svg";
   String get arrowLeft => "assets/svg/arrow-left-fa.svg";
   String get star => "assets/svg/star.svg";
   String get copy => "assets/svg/copy-fa.svg";
@@ -38,10 +37,8 @@ class _SVG {
   String get bars => "assets/svg/bars.svg";
   String get filter => "assets/svg/filter.svg";
   String get pending => "assets/svg/pending.svg";
-  String get exchange =>
-      "assets/svg/${StackTheme.instance.theme.name}/exchange-2.svg";
-  String get buy =>
-      "assets/svg/${StackTheme.instance.theme.name}/buy-coins-icon.svg";
+  String get exchange => "assets/svg/${Assets.theme!.name}/exchange-2.svg";
+  String get buy => "assets/svg/${Assets.theme!.name}/buy-coins-icon.svg";
   String get radio => "assets/svg/signal-stream.svg";
   String get arrowRotate => "assets/svg/arrow-rotate.svg";
   String get arrowRotate2 => "assets/svg/arrow-rotate2.svg";
@@ -95,29 +92,27 @@ class _SVG {
   String get anonymizePending => "assets/svg/tx-icon-anonymize-pending.svg";
   String get anonymizeFailed => "assets/svg/tx-icon-anonymize-failed.svg";
 
-  String get receive =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-icon-receive.svg";
+  String get receive => "assets/svg/${Assets.theme!.name}/tx-icon-receive.svg";
   String get receivePending =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-icon-receive-pending.svg";
+      "assets/svg/${Assets.theme!.name}/tx-icon-receive-pending.svg";
   String get receiveCancelled =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-icon-receive-failed.svg";
+      "assets/svg/${Assets.theme!.name}/tx-icon-receive-failed.svg";
 
-  String get send =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-icon-send.svg";
+  String get send => "assets/svg/${Assets.theme!.name}/tx-icon-send.svg";
   String get sendPending =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-icon-send-pending.svg";
+      "assets/svg/${Assets.theme!.name}/tx-icon-send-pending.svg";
   String get sendCancelled =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-icon-send-failed.svg";
+      "assets/svg/${Assets.theme!.name}/tx-icon-send-failed.svg";
 
   String get ellipse1 => "assets/svg/Ellipse-43.svg";
   String get ellipse2 => "assets/svg/Ellipse-42.svg";
 
   String get txExchange =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-exchange-icon.svg";
+      "assets/svg/${Assets.theme!.name}/tx-exchange-icon.svg";
   String get txExchangePending =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-exchange-icon-pending.svg";
+      "assets/svg/${Assets.theme!.name}/tx-exchange-icon-pending.svg";
   String get txExchangeFailed =>
-      "assets/svg/${StackTheme.instance.theme.name}/tx-exchange-icon-failed.svg";
+      "assets/svg/${Assets.theme!.name}/tx-exchange-icon-failed.svg";
 
   String get bitcoin => "assets/svg/coin_icons/Bitcoin.svg";
   String get bitcoincash => "assets/svg/coin_icons/Bitcoincash.svg";
diff --git a/lib/utilities/theme/stack_colors.dart b/lib/utilities/theme/stack_colors.dart
index bd19f3de1..a2e59052c 100644
--- a/lib/utilities/theme/stack_colors.dart
+++ b/lib/utilities/theme/stack_colors.dart
@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:stackwallet/models/exchange/change_now/exchange_transaction_status.dart';
+import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/theme/color_theme.dart';
 
 class StackColors extends ThemeExtension<StackColors> {
@@ -163,6 +165,7 @@ class StackColors extends ThemeExtension<StackColors> {
   final Color warningForeground;
   final Color warningBackground;
   final Color loadingOverlayTextColor;
+  final Color myStackContactIconBG;
 
   StackColors({
     required this.background,
@@ -291,6 +294,7 @@ class StackColors extends ThemeExtension<StackColors> {
     required this.warningForeground,
     required this.warningBackground,
     required this.loadingOverlayTextColor,
+    required this.myStackContactIconBG,
   });
 
   factory StackColors.fromStackColorTheme(StackColorTheme colorTheme) {
@@ -423,6 +427,7 @@ class StackColors extends ThemeExtension<StackColors> {
       warningForeground: colorTheme.warningForeground,
       warningBackground: colorTheme.warningBackground,
       loadingOverlayTextColor: colorTheme.loadingOverlayTextColor,
+      myStackContactIconBG: colorTheme.myStackContactIconBG,
     );
   }
 
@@ -554,6 +559,7 @@ class StackColors extends ThemeExtension<StackColors> {
     Color? warningForeground,
     Color? warningBackground,
     Color? loadingOverlayTextColor,
+    Color? myStackContactIconBG,
   }) {
     return StackColors(
       background: background ?? this.background,
@@ -717,6 +723,7 @@ class StackColors extends ThemeExtension<StackColors> {
       warningBackground: warningBackground ?? this.warningBackground,
       loadingOverlayTextColor:
           loadingOverlayTextColor ?? this.loadingOverlayTextColor,
+      myStackContactIconBG: myStackContactIconBG ?? this.myStackContactIconBG,
     );
   }
 
@@ -1358,6 +1365,104 @@ class StackColors extends ThemeExtension<StackColors> {
         other.loadingOverlayTextColor,
         t,
       )!,
+      myStackContactIconBG: Color.lerp(
+        myStackContactIconBG,
+        other.myStackContactIconBG,
+        t,
+      )!,
     );
   }
+
+  Color colorForCoin(Coin coin) {
+    switch (coin) {
+      case Coin.bitcoin:
+      case Coin.bitcoinTestNet:
+        return _coin.bitcoin;
+      case Coin.bitcoincash:
+      case Coin.bitcoincashTestnet:
+        return _coin.bitcoincash;
+      case Coin.dogecoin:
+      case Coin.dogecoinTestNet:
+        return _coin.dogecoin;
+      case Coin.epicCash:
+        return _coin.epicCash;
+      case Coin.firo:
+      case Coin.firoTestNet:
+        return _coin.firo;
+      case Coin.monero:
+        return _coin.monero;
+      case Coin.namecoin:
+        return _coin.namecoin;
+      // case Coin.wownero:
+      //   return wownero;
+    }
+  }
+
+  static const _coin = CoinThemeColor();
+
+  BoxShadow get standardBoxShadow => BoxShadow(
+        color: shadow,
+        spreadRadius: 3,
+        blurRadius: 4,
+      );
+
+  Color colorForStatus(ChangeNowTransactionStatus status) {
+    switch (status) {
+      case ChangeNowTransactionStatus.New:
+      case ChangeNowTransactionStatus.Waiting:
+      case ChangeNowTransactionStatus.Confirming:
+      case ChangeNowTransactionStatus.Exchanging:
+      case ChangeNowTransactionStatus.Sending:
+      case ChangeNowTransactionStatus.Verifying:
+        return const Color(0xFFD3A90F);
+      case ChangeNowTransactionStatus.Finished:
+        return accentColorGreen;
+      case ChangeNowTransactionStatus.Failed:
+        return accentColorRed;
+      case ChangeNowTransactionStatus.Refunded:
+        return textSubtitle2;
+    }
+  }
+
+  ButtonStyle? getPrimaryEnabledButtonColor(BuildContext context) =>
+      Theme.of(context).textButtonTheme.style?.copyWith(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              buttonBackPrimary,
+            ),
+          );
+
+  ButtonStyle? getPrimaryDisabledButtonColor(BuildContext context) =>
+      Theme.of(context).textButtonTheme.style?.copyWith(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              buttonBackPrimaryDisabled,
+            ),
+          );
+
+  ButtonStyle? getSecondaryEnabledButtonColor(BuildContext context) =>
+      Theme.of(context).textButtonTheme.style?.copyWith(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              buttonBackSecondary,
+            ),
+          );
+
+  ButtonStyle? getSmallSecondaryEnabledButtonColor(BuildContext context) =>
+      Theme.of(context).textButtonTheme.style?.copyWith(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              textFieldDefaultBG,
+            ),
+          );
+
+  ButtonStyle? getDesktopMenuButtonColor(BuildContext context) =>
+      Theme.of(context).textButtonTheme.style?.copyWith(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              popupBG,
+            ),
+          );
+
+  ButtonStyle? getDesktopMenuButtonColorSelected(BuildContext context) =>
+      Theme.of(context).textButtonTheme.style?.copyWith(
+            backgroundColor: MaterialStateProperty.all<Color>(
+              textFieldDefaultBG,
+            ),
+          );
 }
diff --git a/lib/widgets/address_book_card.dart b/lib/widgets/address_book_card.dart
index 291ccd7cf..5368310fa 100644
--- a/lib/widgets/address_book_card.dart
+++ b/lib/widgets/address_book_card.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/rounded_white_container.dart';
 
 class AddressBookCard extends ConsumerStatefulWidget {
@@ -54,7 +54,7 @@ class _AddressBookCardState extends ConsumerState<AddressBookCard> {
     return RoundedWhiteContainer(
       padding: const EdgeInsets.all(4),
       child: RawMaterialButton(
-        // splashColor: StackTheme.instance.color.highlight,
+        // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         padding: const EdgeInsets.all(0),
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
         shape: RoundedRectangleBorder(
@@ -81,8 +81,12 @@ class _AddressBookCardState extends ConsumerState<AddressBookCard> {
                 height: 32,
                 decoration: BoxDecoration(
                   color: contact.id == "default"
-                      ? StackTheme.instance.color.myStackContactIconBG
-                      : StackTheme.instance.color.textFieldDefaultBG,
+                      ? Theme.of(context)
+                          .extension<StackColors>()!
+                          .myStackContactIconBG
+                      : Theme.of(context)
+                          .extension<StackColors>()!
+                          .textFieldDefaultBG,
                   borderRadius: BorderRadius.circular(32),
                 ),
                 child: contact.id == "default"
diff --git a/lib/widgets/custom_buttons/app_bar_icon_button.dart b/lib/widgets/custom_buttons/app_bar_icon_button.dart
index 979fb6971..c3dd77629 100644
--- a/lib/widgets/custom_buttons/app_bar_icon_button.dart
+++ b/lib/widgets/custom_buttons/app_bar_icon_button.dart
@@ -1,8 +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/utilities/util.dart';
 
 class AppBarIconButton extends StatelessWidget {
@@ -30,11 +29,11 @@ class AppBarIconButton extends StatelessWidget {
       width: size,
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(1000),
-        color: color ?? StackTheme.instance.color.background,
+        color: color ?? Theme.of(context).extension<StackColors>()!.background,
         boxShadow: shadows,
       ),
       child: MaterialButton(
-        splashColor: StackTheme.instance.color.highlight,
+        splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         padding: EdgeInsets.zero,
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
         shape: RoundedRectangleBorder(
@@ -65,14 +64,14 @@ class AppBarBackButton extends StatelessWidget {
       child: AppBarIconButton(
         size: isDesktop ? 56 : 32,
         color: isDesktop
-            ? StackTheme.instance.color.textFieldDefaultBG
-            : StackTheme.instance.color.background,
+            ? Theme.of(context).extension<StackColors>()!.textFieldDefaultBG
+            : Theme.of(context).extension<StackColors>()!.background,
         shadows: const [],
         icon: SvgPicture.asset(
           Assets.svg.arrowLeft,
           width: 24,
           height: 24,
-          color: StackTheme.instance.color.topNavIconPrimary,
+          color: Theme.of(context).extension<StackColors>()!.topNavIconPrimary,
         ),
         onPressed: onPressed ?? Navigator.of(context).pop,
       ),
diff --git a/lib/widgets/custom_buttons/blue_text_button.dart b/lib/widgets/custom_buttons/blue_text_button.dart
index 69208acdc..18757ab93 100644
--- a/lib/widgets/custom_buttons/blue_text_button.dart
+++ b/lib/widgets/custom_buttons/blue_text_button.dart
@@ -1,9 +1,10 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:stackwallet/providers/ui/color_theme_provider.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
 
-class BlueTextButton extends StatefulWidget {
+class BlueTextButton extends ConsumerStatefulWidget {
   const BlueTextButton({Key? key, required this.text, this.onTap})
       : super(key: key);
 
@@ -11,10 +12,10 @@ class BlueTextButton extends StatefulWidget {
   final VoidCallback? onTap;
 
   @override
-  State<BlueTextButton> createState() => _BlueTextButtonState();
+  ConsumerState<BlueTextButton> createState() => _BlueTextButtonState();
 }
 
-class _BlueTextButtonState extends State<BlueTextButton>
+class _BlueTextButtonState extends ConsumerState<BlueTextButton>
     with SingleTickerProviderStateMixin {
   late AnimationController controller;
   late Animation<dynamic> animation;
@@ -22,14 +23,18 @@ class _BlueTextButtonState extends State<BlueTextButton>
 
   @override
   void initState() {
-    color = StackTheme.instance.color.buttonTextBorderless;
+    color = ref.read(colorThemeProvider.state).state.buttonTextBorderless;
     controller = AnimationController(
       vsync: this,
       duration: const Duration(milliseconds: 100),
     );
     animation = ColorTween(
-      begin: StackTheme.instance.color.buttonTextBorderless,
-      end: StackTheme.instance.color.buttonTextBorderless.withOpacity(0.4),
+      begin: ref.read(colorThemeProvider.state).state.buttonTextBorderless,
+      end: ref
+          .read(colorThemeProvider.state)
+          .state
+          .buttonTextBorderless
+          .withOpacity(0.4),
     ).animate(controller);
 
     animation.addListener(() {
diff --git a/lib/widgets/custom_buttons/draggable_switch_button.dart b/lib/widgets/custom_buttons/draggable_switch_button.dart
index 06fe08e5b..33dfe9860 100644
--- a/lib/widgets/custom_buttons/draggable_switch_button.dart
+++ b/lib/widgets/custom_buttons/draggable_switch_button.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 DraggableSwitchButton extends StatefulWidget {
   const DraggableSwitchButton({
@@ -37,21 +37,27 @@ class DraggableSwitchButtonState extends State<DraggableSwitchButton> {
   Color _colorBG(bool isOn, bool enabled, double alpha) {
     if (enabled) {
       return Color.alphaBlend(
-        StackTheme.instance.color.switchBGOn.withOpacity(alpha),
-        StackTheme.instance.color.switchBGOff,
+        Theme.of(context)
+            .extension<StackColors>()!
+            .switchBGOn
+            .withOpacity(alpha),
+        Theme.of(context).extension<StackColors>()!.switchBGOff,
       );
     }
-    return StackTheme.instance.color.switchBGDisabled;
+    return Theme.of(context).extension<StackColors>()!.switchBGDisabled;
   }
 
   Color _colorFG(bool isOn, bool enabled, double alpha) {
     if (enabled) {
       return Color.alphaBlend(
-        StackTheme.instance.color.switchCircleOn.withOpacity(alpha),
-        StackTheme.instance.color.switchCircleOff,
+        Theme.of(context)
+            .extension<StackColors>()!
+            .switchCircleOn
+            .withOpacity(alpha),
+        Theme.of(context).extension<StackColors>()!.switchCircleOff,
       );
     }
-    return StackTheme.instance.color.switchCircleDisabled;
+    return Theme.of(context).extension<StackColors>()!.switchCircleDisabled;
   }
 
   @override
diff --git a/lib/widgets/custom_buttons/favorite_toggle.dart b/lib/widgets/custom_buttons/favorite_toggle.dart
index efa0c2756..2d25d0674 100644
--- a/lib/widgets/custom_buttons/favorite_toggle.dart
+++ b/lib/widgets/custom_buttons/favorite_toggle.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';
 
 class FavoriteToggle extends StatefulWidget {
   const FavoriteToggle({
@@ -35,8 +35,10 @@ class _FavoriteToggleState extends State<FavoriteToggle> {
 
   @override
   void initState() {
-    on = widget.on ?? StackTheme.instance.color.favoriteStarActive;
-    off = widget.off ?? StackTheme.instance.color.favoriteStarInactive;
+    on = widget.on ??
+        Theme.of(context).extension<StackColors>()!.favoriteStarActive;
+    off = widget.off ??
+        Theme.of(context).extension<StackColors>()!.favoriteStarInactive;
     _isActive = widget.initialState;
     _color = _isActive ? on : off;
     _onChanged = widget.onChanged;
@@ -51,7 +53,7 @@ class _FavoriteToggleState extends State<FavoriteToggle> {
         borderRadius: widget.borderRadius,
       ),
       child: MaterialButton(
-        splashColor: StackTheme.instance.color.highlight,
+        splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         minWidth: 0,
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
         shape: RoundedRectangleBorder(
diff --git a/lib/widgets/custom_loading_overlay.dart b/lib/widgets/custom_loading_overlay.dart
index 154ae665b..c92d7705d 100644
--- a/lib/widgets/custom_loading_overlay.dart
+++ b/lib/widgets/custom_loading_overlay.dart
@@ -4,7 +4,7 @@ import 'package:event_bus/event_bus.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.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';
 
 class CustomLoadingOverlay extends ConsumerStatefulWidget {
@@ -57,7 +57,9 @@ class _CustomLoadingOverlayState extends ConsumerState<CustomLoadingOverlay> {
                 Text(
                   widget.message,
                   style: STextStyles.pageTitleH2(context).copyWith(
-                    color: StackTheme.instance.color.loadingOverlayTextColor,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .loadingOverlayTextColor,
                   ),
                 ),
                 if (widget.eventBus != null)
@@ -68,7 +70,9 @@ class _CustomLoadingOverlayState extends ConsumerState<CustomLoadingOverlay> {
                   Text(
                     "${(_percent * 100).toStringAsFixed(2)}%",
                     style: STextStyles.pageTitleH2(context).copyWith(
-                      color: StackTheme.instance.color.loadingOverlayTextColor,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .loadingOverlayTextColor,
                     ),
                   ),
               ],
diff --git a/lib/widgets/custom_pin_put/pin_keyboard.dart b/lib/widgets/custom_pin_put/pin_keyboard.dart
index 45f127669..5b52460aa 100644
--- a/lib/widgets/custom_pin_put/pin_keyboard.dart
+++ b/lib/widgets/custom_pin_put/pin_keyboard.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_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';
 
 class NumberKey extends StatefulWidget {
   const NumberKey({
@@ -22,7 +22,7 @@ class _NumberKeyState extends State<NumberKey> {
   late final String number;
   late final ValueSetter<String> onPressed;
 
-  Color _color = StackTheme.instance.color.numberBackDefault;
+  Color? _color;
 
   @override
   void initState() {
@@ -34,6 +34,8 @@ class _NumberKeyState extends State<NumberKey> {
 
   @override
   Widget build(BuildContext context) {
+    _color ??= Theme.of(context).extension<StackColors>()!.numberBackDefault;
+
     return AnimatedContainer(
       duration: const Duration(milliseconds: 200),
       curve: Curves.easeInOut,
@@ -45,20 +47,24 @@ class _NumberKeyState extends State<NumberKey> {
         shadows: const [],
       ),
       child: MaterialButton(
-        // splashColor: StackTheme.instance.color.highlight,
+        // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
         shape: const StadiumBorder(),
         onPressed: () async {
           onPressed.call(number);
           setState(() {
-            _color =
-                StackTheme.instance.color.numberBackDefault.withOpacity(0.8);
+            _color = Theme.of(context)
+                .extension<StackColors>()!
+                .numberBackDefault
+                .withOpacity(0.8);
           });
 
           Future<void>.delayed(const Duration(milliseconds: 200), () {
             if (mounted) {
               setState(() {
-                _color = StackTheme.instance.color.numberBackDefault;
+                _color = Theme.of(context)
+                    .extension<StackColors>()!
+                    .numberBackDefault;
               });
             }
           });
@@ -67,7 +73,8 @@ class _NumberKeyState extends State<NumberKey> {
           child: Text(
             number,
             style: GoogleFonts.roboto(
-              color: StackTheme.instance.color.numberTextDefault,
+              color:
+                  Theme.of(context).extension<StackColors>()!.numberTextDefault,
               fontWeight: FontWeight.w400,
               fontSize: 26,
             ),
@@ -93,7 +100,7 @@ class BackspaceKey extends StatefulWidget {
 class _BackspaceKeyState extends State<BackspaceKey> {
   late final VoidCallback onPressed;
 
-  Color _color = StackTheme.instance.color.numpadBackDefault;
+  Color? _color;
 
   @override
   void initState() {
@@ -103,6 +110,7 @@ class _BackspaceKeyState extends State<BackspaceKey> {
 
   @override
   Widget build(BuildContext context) {
+    _color ??= Theme.of(context).extension<StackColors>()!.numpadBackDefault;
     return AnimatedContainer(
       duration: const Duration(milliseconds: 200),
       curve: Curves.easeInOut,
@@ -114,20 +122,24 @@ class _BackspaceKeyState extends State<BackspaceKey> {
         shadows: const [],
       ),
       child: MaterialButton(
-        // splashColor: StackTheme.instance.color.highlight,
+        // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
         shape: const StadiumBorder(),
         onPressed: () {
           onPressed.call();
           setState(() {
-            _color =
-                StackTheme.instance.color.numpadBackDefault.withOpacity(0.8);
+            _color = Theme.of(context)
+                .extension<StackColors>()!
+                .numpadBackDefault
+                .withOpacity(0.8);
           });
 
           Future<void>.delayed(const Duration(milliseconds: 200), () {
             if (mounted) {
               setState(() {
-                _color = StackTheme.instance.color.numpadBackDefault;
+                _color = Theme.of(context)
+                    .extension<StackColors>()!
+                    .numpadBackDefault;
               });
             }
           });
@@ -137,7 +149,8 @@ class _BackspaceKeyState extends State<BackspaceKey> {
             Assets.svg.delete,
             width: 20,
             height: 20,
-            color: StackTheme.instance.color.numpadTextDefault,
+            color:
+                Theme.of(context).extension<StackColors>()!.numpadTextDefault,
           ),
         ),
       ),
@@ -160,11 +173,11 @@ class SubmitKey extends StatelessWidget {
       width: 72,
       decoration: ShapeDecoration(
         shape: const StadiumBorder(),
-        color: StackTheme.instance.color.numpadBackDefault,
+        color: Theme.of(context).extension<StackColors>()!.numpadBackDefault,
         shadows: const [],
       ),
       child: MaterialButton(
-        // splashColor: StackTheme.instance.color.highlight,
+        // splashColor: Theme.of(context).extension<StackColors>()!.highlight,
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
         shape: const StadiumBorder(),
         onPressed: () {
@@ -175,7 +188,8 @@ class SubmitKey extends StatelessWidget {
             Assets.svg.arrowRight,
             width: 20,
             height: 20,
-            color: StackTheme.instance.color.numpadTextDefault,
+            color:
+                Theme.of(context).extension<StackColors>()!.numpadTextDefault,
           ),
         ),
       ),
diff --git a/lib/widgets/desktop/desktop_scaffold.dart b/lib/widgets/desktop/desktop_scaffold.dart
index 697ce8030..439289518 100644
--- a/lib/widgets/desktop/desktop_scaffold.dart
+++ b/lib/widgets/desktop/desktop_scaffold.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 DesktopScaffold extends StatelessWidget {
   const DesktopScaffold({
@@ -16,7 +16,8 @@ class DesktopScaffold extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: background ?? StackTheme.instance.color.background,
+      color:
+          background ?? Theme.of(context).extension<StackColors>()!.background,
       child: Column(
         // crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
@@ -49,13 +50,15 @@ class MasterScaffold extends StatelessWidget {
   Widget build(BuildContext context) {
     if (isDesktop) {
       return DesktopScaffold(
-        background: background ?? StackTheme.instance.color.background,
+        background: background ??
+            Theme.of(context).extension<StackColors>()!.background,
         appBar: appBar,
         body: body,
       );
     } else {
       return Scaffold(
-        backgroundColor: background ?? StackTheme.instance.color.background,
+        backgroundColor: background ??
+            Theme.of(context).extension<StackColors>()!.background,
         appBar: appBar as PreferredSizeWidget?,
         body: body,
       );
diff --git a/lib/widgets/emoji_select_sheet.dart b/lib/widgets/emoji_select_sheet.dart
index 3673a2d53..85a90fec8 100644
--- a/lib/widgets/emoji_select_sheet.dart
+++ b/lib/widgets/emoji_select_sheet.dart
@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.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 EmojiSelectSheet extends ConsumerWidget {
   const EmojiSelectSheet({
@@ -26,7 +26,7 @@ class EmojiSelectSheet extends ConsumerWidget {
 
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.color.popupBG,
+        color: Theme.of(context).extension<StackColors>()!.popupBG,
         borderRadius: const BorderRadius.vertical(
           top: Radius.circular(20),
         ),
@@ -47,7 +47,9 @@ class EmojiSelectSheet 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,
                     ),
diff --git a/lib/widgets/icon_widgets/addressbook_icon.dart b/lib/widgets/icon_widgets/addressbook_icon.dart
index f2d3f927b..3e9f7b2a5 100644
--- a/lib/widgets/icon_widgets/addressbook_icon.dart
+++ b/lib/widgets/icon_widgets/addressbook_icon.dart
@@ -1,8 +1,7 @@
-import 'package:flutter/cupertino.dart';
+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';
 
 class AddressBookIcon extends StatelessWidget {
   const AddressBookIcon({
@@ -22,7 +21,7 @@ class AddressBookIcon extends StatelessWidget {
       Assets.svg.addressBook,
       width: width,
       height: height,
-      color: color ?? StackTheme.instance.color.textDark3,
+      color: color ?? Theme.of(context).extension<StackColors>()!.textDark3,
     );
   }
 }
diff --git a/lib/widgets/icon_widgets/clipboard_icon.dart b/lib/widgets/icon_widgets/clipboard_icon.dart
index 7dd720190..caafda0a6 100644
--- a/lib/widgets/icon_widgets/clipboard_icon.dart
+++ b/lib/widgets/icon_widgets/clipboard_icon.dart
@@ -1,7 +1,7 @@
-import 'package:flutter/cupertino.dart';
+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';
 
 class ClipboardIcon extends StatelessWidget {
   const ClipboardIcon({
@@ -21,7 +21,7 @@ class ClipboardIcon extends StatelessWidget {
       Assets.svg.clipboard,
       width: width,
       height: height,
-      color: color ?? StackTheme.instance.color.textDark3,
+      color: color ?? Theme.of(context).extension<StackColors>()!.textDark3,
     );
   }
 }
diff --git a/lib/widgets/icon_widgets/dice_icon.dart b/lib/widgets/icon_widgets/dice_icon.dart
index 9343108d3..ca502bfdf 100644
--- a/lib/widgets/icon_widgets/dice_icon.dart
+++ b/lib/widgets/icon_widgets/dice_icon.dart
@@ -1,7 +1,7 @@
-import 'package:flutter/cupertino.dart';
+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';
 
 class DiceIcon extends StatelessWidget {
   const DiceIcon({
@@ -21,7 +21,7 @@ class DiceIcon extends StatelessWidget {
       Assets.svg.dice,
       width: width,
       height: height,
-      color: color ?? StackTheme.instance.color.textDark3,
+      color: color ?? Theme.of(context).extension<StackColors>()!.textDark3,
     );
   }
 }
diff --git a/lib/widgets/icon_widgets/qrcode_icon.dart b/lib/widgets/icon_widgets/qrcode_icon.dart
index 3dc44f8d7..598dbcf84 100644
--- a/lib/widgets/icon_widgets/qrcode_icon.dart
+++ b/lib/widgets/icon_widgets/qrcode_icon.dart
@@ -1,7 +1,7 @@
-import 'package:flutter/cupertino.dart';
+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';
 
 class QrCodeIcon extends StatelessWidget {
   const QrCodeIcon({
@@ -21,7 +21,7 @@ class QrCodeIcon extends StatelessWidget {
       Assets.svg.qrcode,
       width: width,
       height: height,
-      color: color ?? StackTheme.instance.color.textDark3,
+      color: color ?? Theme.of(context).extension<StackColors>()!.textDark3,
     );
   }
 }
diff --git a/lib/widgets/icon_widgets/x_icon.dart b/lib/widgets/icon_widgets/x_icon.dart
index d4a5baac8..4a497a464 100644
--- a/lib/widgets/icon_widgets/x_icon.dart
+++ b/lib/widgets/icon_widgets/x_icon.dart
@@ -1,7 +1,7 @@
-import 'package:flutter/cupertino.dart';
+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';
 
 class XIcon extends StatelessWidget {
   const XIcon({
@@ -21,7 +21,10 @@ class XIcon extends StatelessWidget {
       Assets.svg.x,
       width: width,
       height: height,
-      color: color ?? StackTheme.instance.color.textFieldActiveSearchIconRight,
+      color: color ??
+          Theme.of(context)
+              .extension<StackColors>()!
+              .textFieldActiveSearchIconRight,
     );
   }
 }
diff --git a/lib/widgets/managed_favorite.dart b/lib/widgets/managed_favorite.dart
index 272a78ab7..3cd8a92d3 100644
--- a/lib/widgets/managed_favorite.dart
+++ b/lib/widgets/managed_favorite.dart
@@ -7,7 +7,7 @@ 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/widgets/custom_buttons/favorite_toggle.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -64,7 +64,8 @@ class _ManagedFavoriteCardState extends ConsumerState<ManagedFavorite> {
             children: [
               Container(
                 decoration: BoxDecoration(
-                  color: StackTheme.instance
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
                       .colorForCoin(manager.coin)
                       .withOpacity(0.5),
                   borderRadius: BorderRadius.circular(
diff --git a/lib/widgets/node_card.dart b/lib/widgets/node_card.dart
index 567987e02..1f0287013 100644
--- a/lib/widgets/node_card.dart
+++ b/lib/widgets/node_card.dart
@@ -7,7 +7,7 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/default_nodes.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/node_options_sheet.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
@@ -78,8 +78,12 @@ class _NodeCardState extends ConsumerState<NodeCard> {
                 height: 24,
                 decoration: BoxDecoration(
                   color: _node.name == DefaultNodes.defaultName
-                      ? StackTheme.instance.color.buttonBackSecondary
-                      : StackTheme.instance.color.infoItemIcons
+                      ? Theme.of(context)
+                          .extension<StackColors>()!
+                          .buttonBackSecondary
+                      : Theme.of(context)
+                          .extension<StackColors>()!
+                          .infoItemIcons
                           .withOpacity(0.2),
                   borderRadius: BorderRadius.circular(100),
                 ),
@@ -89,8 +93,12 @@ class _NodeCardState extends ConsumerState<NodeCard> {
                     height: 11,
                     width: 14,
                     color: _node.name == DefaultNodes.defaultName
-                        ? StackTheme.instance.color.accentColorDark
-                        : StackTheme.instance.color.infoItemIcons,
+                        ? Theme.of(context)
+                            .extension<StackColors>()!
+                            .accentColorDark
+                        : Theme.of(context)
+                            .extension<StackColors>()!
+                            .infoItemIcons,
                   ),
                 ),
               ),
@@ -117,8 +125,12 @@ class _NodeCardState extends ConsumerState<NodeCard> {
               SvgPicture.asset(
                 Assets.svg.network,
                 color: _status == "Connected"
-                    ? StackTheme.instance.color.accentColorGreen
-                    : StackTheme.instance.color.buttonBackSecondary,
+                    ? Theme.of(context)
+                        .extension<StackColors>()!
+                        .accentColorGreen
+                    : Theme.of(context)
+                        .extension<StackColors>()!
+                        .buttonBackSecondary,
                 width: 20,
                 height: 20,
               ),
diff --git a/lib/widgets/node_options_sheet.dart b/lib/widgets/node_options_sheet.dart
index 2c4c47457..02570b76c 100644
--- a/lib/widgets/node_options_sheet.dart
+++ b/lib/widgets/node_options_sheet.dart
@@ -18,7 +18,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/rounded_white_container.dart';
 import 'package:tuple/tuple.dart';
 
@@ -160,7 +160,7 @@ class NodeOptionsSheet extends ConsumerWidget {
 
     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 NodeOptionsSheet 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,
                       ),
@@ -208,8 +210,12 @@ class NodeOptionsSheet extends ConsumerWidget {
                         height: 32,
                         decoration: BoxDecoration(
                           color: node.name == DefaultNodes.defaultName
-                              ? StackTheme.instance.color.textSubtitle4
-                              : StackTheme.instance.color.infoItemIcons
+                              ? Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .textSubtitle4
+                              : Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .infoItemIcons
                                   .withOpacity(0.2),
                           borderRadius: BorderRadius.circular(100),
                         ),
@@ -219,8 +225,12 @@ class NodeOptionsSheet extends ConsumerWidget {
                             height: 15,
                             width: 19,
                             color: node.name == DefaultNodes.defaultName
-                                ? StackTheme.instance.color.accentColorDark
-                                : StackTheme.instance.color.infoItemIcons,
+                                ? Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .accentColorDark
+                                : Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .infoItemIcons,
                           ),
                         ),
                       ),
@@ -247,8 +257,12 @@ class NodeOptionsSheet extends ConsumerWidget {
                       SvgPicture.asset(
                         Assets.svg.network,
                         color: status == "Connected"
-                            ? StackTheme.instance.color.accentColorGreen
-                            : StackTheme.instance.color.buttonBackSecondary,
+                            ? Theme.of(context)
+                                .extension<StackColors>()!
+                                .accentColorGreen
+                            : Theme.of(context)
+                                .extension<StackColors>()!
+                                .buttonBackSecondary,
                         width: 18,
                       ),
                     ],
@@ -259,7 +273,8 @@ class NodeOptionsSheet extends ConsumerWidget {
                     // if (!node.id.startsWith("default"))
                     Expanded(
                       child: TextButton(
-                        style: StackTheme.instance
+                        style: Theme.of(context)
+                            .extension<StackColors>()!
                             .getSecondaryEnabledButtonColor(context),
                         onPressed: () {
                           Navigator.pop(context);
@@ -275,7 +290,9 @@ class NodeOptionsSheet extends ConsumerWidget {
                         child: Text(
                           "Details",
                           style: STextStyles.button(context).copyWith(
-                              color: StackTheme.instance.color.accentColorDark),
+                              color: Theme.of(context)
+                                  .extension<StackColors>()!
+                                  .accentColorDark),
                         ),
                       ),
                     ),
@@ -286,9 +303,11 @@ class NodeOptionsSheet extends ConsumerWidget {
                     Expanded(
                       child: TextButton(
                         style: status == "Connected"
-                            ? StackTheme.instance
+                            ? Theme.of(context)
+                                .extension<StackColors>()!
                                 .getPrimaryEnabledButtonColor(context)
-                            : StackTheme.instance
+                            : Theme.of(context)
+                                .extension<StackColors>()!
                                 .getPrimaryDisabledButtonColor(context),
                         onPressed: status == "Connected"
                             ? null
diff --git a/lib/widgets/rounded_white_container.dart b/lib/widgets/rounded_white_container.dart
index c612ce68d..7525eafe5 100644
--- a/lib/widgets/rounded_white_container.dart
+++ b/lib/widgets/rounded_white_container.dart
@@ -1,5 +1,5 @@
-import 'package:flutter/cupertino.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 
 class RoundedWhiteContainer extends StatelessWidget {
@@ -21,7 +21,7 @@ class RoundedWhiteContainer extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return RoundedContainer(
-      color: StackTheme.instance.color.popupBG,
+      color: Theme.of(context).extension<StackColors>()!.popupBG,
       padding: padding,
       radiusMultiplier: radiusMultiplier,
       width: width,
diff --git a/lib/widgets/stack_dialog.dart b/lib/widgets/stack_dialog.dart
index af6c6b483..be1d51596 100644
--- a/lib/widgets/stack_dialog.dart
+++ b/lib/widgets/stack_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';
 
 class StackDialogBase extends StatelessWidget {
   const StackDialogBase({
@@ -25,7 +25,7 @@ class StackDialogBase extends StatelessWidget {
             ),
             child: Container(
               decoration: BoxDecoration(
-                color: StackTheme.instance.color.popupBG,
+                color: Theme.of(context).extension<StackColors>()!.popupBG,
                 borderRadius: BorderRadius.circular(
                   20,
                 ),
@@ -183,8 +183,9 @@ class StackOkDialog extends StatelessWidget {
                     Navigator.of(context).pop();
                     onOkPressed?.call("OK");
                   },
-                  style:
-                      StackTheme.instance.getPrimaryEnabledButtonColor(context),
+                  style: Theme.of(context)
+                      .extension<StackColors>()!
+                      .getPrimaryEnabledButtonColor(context),
                   child: Text(
                     "Ok",
                     style: STextStyles.button(context),
diff --git a/lib/widgets/stack_text_field.dart b/lib/widgets/stack_text_field.dart
index 657d329df..9858c18db 100644
--- a/lib/widgets/stack_text_field.dart
+++ b/lib/widgets/stack_text_field.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/utilities/util.dart';
 
 InputDecoration standardInputDecoration(
@@ -10,8 +10,8 @@ InputDecoration standardInputDecoration(
   return InputDecoration(
     labelText: labelText,
     fillColor: textFieldFocusNode.hasFocus
-        ? StackTheme.instance.color.textFieldActiveBG
-        : StackTheme.instance.color.textFieldDefaultBG,
+        ? Theme.of(context).extension<StackColors>()!.textFieldActiveBG
+        : Theme.of(context).extension<StackColors>()!.textFieldDefaultBG,
     labelStyle: isDesktop
         ? STextStyles.desktopTextFieldLabel(context)
         : STextStyles.fieldLabel(context),
diff --git a/lib/widgets/table_view/table_view_row.dart b/lib/widgets/table_view/table_view_row.dart
index 95b5ed706..e20a23e94 100644
--- a/lib/widgets/table_view/table_view_row.dart
+++ b/lib/widgets/table_view/table_view_row.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';
 import 'package:stackwallet/widgets/expandable.dart';
 import 'package:stackwallet/widgets/table_view/table_view_cell.dart';
 
@@ -55,7 +55,9 @@ class TableViewRow extends StatelessWidget {
               body: Column(
                 children: [
                   Container(
-                    color: StackTheme.instance.color.buttonBackSecondary,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .buttonBackSecondary,
                     width: double.infinity,
                     height: 1,
                   ),
diff --git a/lib/widgets/transaction_card.dart b/lib/widgets/transaction_card.dart
index 7959307dc..35331d398 100644
--- a/lib/widgets/transaction_card.dart
+++ b/lib/widgets/transaction_card.dart
@@ -12,7 +12,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:tuple/tuple.dart';
 
 class TransactionCard extends ConsumerStatefulWidget {
@@ -101,7 +101,7 @@ class _TransactionCardState extends ConsumerState<TransactionCard> {
         .item1;
 
     return Material(
-      color: StackTheme.instance.color.popupBG,
+      color: Theme.of(context).extension<StackColors>()!.popupBG,
       elevation: 0,
       shape: RoundedRectangleBorder(
         borderRadius:
diff --git a/lib/widgets/wallet_card.dart b/lib/widgets/wallet_card.dart
index 9a47d0489..0e8a515bd 100644
--- a/lib/widgets/wallet_card.dart
+++ b/lib/widgets/wallet_card.dart
@@ -22,7 +22,7 @@ class WalletSheetCard extends ConsumerWidget {
     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,
diff --git a/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_balance_future.dart b/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_balance_future.dart
index 7d61a3fbc..a59c157ec 100644
--- a/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_balance_future.dart
+++ b/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_balance_future.dart
@@ -5,7 +5,7 @@ import 'package:stackwallet/providers/providers.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/animated_text.dart';
 
@@ -40,7 +40,9 @@ class WalletInfoRowBalanceFuture extends ConsumerWidget {
             )} ${manager.coin.ticker}",
             style: Util.isDesktop
                 ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                    color: StackTheme.instance.color.textSubtitle1,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textSubtitle1,
                   )
                 : STextStyles.itemSubtitle(context),
           );
@@ -54,7 +56,9 @@ class WalletInfoRowBalanceFuture extends ConsumerWidget {
             ],
             style: Util.isDesktop
                 ? STextStyles.desktopTextExtraSmall(context).copyWith(
-                    color: StackTheme.instance.color.textSubtitle1,
+                    color: Theme.of(context)
+                        .extension<StackColors>()!
+                        .textSubtitle1,
                   )
                 : STextStyles.itemSubtitle(context),
           );
diff --git a/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart b/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart
index 09e497aac..ec5924de6 100644
--- a/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart
+++ b/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.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/enums/coin_enum.dart';
-import 'package:stackwallet/utilities/theme/stack_theme.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
 class WalletInfoCoinIcon extends StatelessWidget {
   const WalletInfoCoinIcon({Key? key, required this.coin}) : super(key: key);
@@ -14,7 +14,10 @@ class WalletInfoCoinIcon extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color: StackTheme.instance.colorForCoin(coin).withOpacity(0.5),
+        color: Theme.of(context)
+            .extension<StackColors>()!
+            .colorForCoin(coin)
+            .withOpacity(0.5),
         borderRadius: BorderRadius.circular(
           Constants.size.circularBorderRadius,
         ),
diff --git a/lib/widgets/wallet_info_row/wallet_info_row.dart b/lib/widgets/wallet_info_row/wallet_info_row.dart
index 075f80702..4840e9b01 100644
--- a/lib/widgets/wallet_info_row/wallet_info_row.dart
+++ b/lib/widgets/wallet_info_row/wallet_info_row.dart
@@ -4,7 +4,7 @@ import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/providers/providers.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:stackwallet/widgets/wallet_info_row/sub_widgets/wallet_info_row_balance_future.dart';
 import 'package:stackwallet/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart';
@@ -40,7 +40,9 @@ class WalletInfoRow extends ConsumerWidget {
                       manager.walletName,
                       style:
                           STextStyles.desktopTextExtraSmall(context).copyWith(
-                        color: StackTheme.instance.color.textDark,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .textDark,
                       ),
                     ),
                   ],
@@ -61,7 +63,9 @@ class WalletInfoRow extends ConsumerWidget {
                       Assets.svg.chevronRight,
                       width: 20,
                       height: 20,
-                      color: StackTheme.instance.color.textSubtitle1,
+                      color: Theme.of(context)
+                          .extension<StackColors>()!
+                          .textSubtitle1,
                     )
                   ],
                 ),