dark chans

assets/svg/oled-black-theme.svg

@@ -1,23 +1,23 @@
 <svg width="200" height="162" viewBox="0 0 200 162" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_489_21263)">
-<rect width="200" height="162" rx="8" fill="black"/>
-<rect x="10" y="10" width="180" height="20" rx="2" fill="#77A7F9"/>
+<g clip-path="url(#clip0_622_21287)">
+<rect width="200" height="162" rx="8" fill="#121212"/>
+<rect x="10" y="10" width="180" height="20" rx="2" fill="#F26822"/>
 <rect x="16" y="16" width="106" height="8" rx="1" fill="black"/>
-<rect x="10" y="40" width="180" height="20" rx="2" fill="#212F46"/>
-<rect x="16" y="46" width="106" height="8" rx="1" fill="black"/>
-<rect x="10" y="62" width="180" height="20" rx="2" fill="#212F46"/>
-<rect x="16" y="68" width="106" height="8" rx="1" fill="black"/>
-<rect x="10" y="84" width="180" height="20" rx="2" fill="#212F46"/>
-<rect x="16" y="90" width="106" height="8" rx="1" fill="black"/>
-<rect x="10" y="106" width="180" height="20" rx="2" fill="#212F46"/>
-<rect x="16" y="112" width="106" height="8" rx="1" fill="black"/>
-<rect x="10" y="128" width="180" height="20" rx="2" fill="#212F46"/>
-<rect x="16" y="134" width="106" height="8" rx="1" fill="black"/>
-<rect x="10" y="150" width="180" height="20" rx="2" fill="#212F46"/>
-<rect x="16" y="156" width="106" height="8" rx="1" fill="black"/>
+<rect x="10" y="40" width="180" height="20" rx="2" fill="#303030"/>
+<rect x="16" y="46" width="106" height="8" rx="1" fill="#121212"/>
+<rect x="10" y="62" width="180" height="20" rx="2" fill="#303030"/>
+<rect x="16" y="68" width="106" height="8" rx="1" fill="#121212"/>
+<rect x="10" y="84" width="180" height="20" rx="2" fill="#303030"/>
+<rect x="16" y="90" width="106" height="8" rx="1" fill="#121212"/>
+<rect x="10" y="106" width="180" height="20" rx="2" fill="#303030"/>
+<rect x="16" y="112" width="106" height="8" rx="1" fill="#121212"/>
+<rect x="10" y="128" width="180" height="20" rx="2" fill="#303030"/>
+<rect x="16" y="134" width="106" height="8" rx="1" fill="#121212"/>
+<rect x="10" y="150" width="180" height="20" rx="2" fill="#303030"/>
+<rect x="16" y="156" width="106" height="8" rx="1" fill="#121212"/>
 </g>
 <defs>
-<clipPath id="clip0_489_21263">
+<clipPath id="clip0_622_21287">
 <rect width="200" height="162" rx="8" fill="white"/>
 </clipPath>
 </defs>

lib/main.dart

@@ -65,6 +65,7 @@ import 'package:stackwallet/utilities/theme/fruit_sorbet_colors.dart';
 import 'package:stackwallet/utilities/theme/light_colors.dart';
 import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
 import 'package:stackwallet/utilities/theme/oled_black_colors.dart';
+import 'package:stackwallet/utilities/theme/oled_chans_colors.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:window_size/window_size.dart';
@@ -357,6 +358,9 @@ class _MaterialAppWithThemeState extends ConsumerState<MaterialAppWithTheme>
       case "chan":
         colorTheme = ChanColors();
         break;
+      case "oledChans":
+        colorTheme = DarkChansColors();
+        break;
       case "light":
       default:
         colorTheme = LightColors();

lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart

@@ -5,6 +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/my_stack_view/exit_to_my_stack_button.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
+import 'package:stackwallet/utilities/theme/color_theme.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/background.dart';
@@ -81,6 +82,11 @@ class CreateOrRestoreWalletView extends StatelessWidget {
         ),
       );
     } else {
+      final isChans = Theme.of(context).extension<StackColors>()!.themeType ==
+              ThemeType.chan ||
+          Theme.of(context).extension<StackColors>()!.themeType ==
+              ThemeType.darkChans;
+
       return Background(
         child: Scaffold(
           backgroundColor:
@@ -95,42 +101,59 @@ class CreateOrRestoreWalletView extends StatelessWidget {
           body: SafeArea(
             child: Container(
               color: Theme.of(context).extension<StackColors>()!.background,
-              child: Padding(
-                padding: const EdgeInsets.all(16),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: [
-                    CoinImage(
-                      coin: coin,
-                      width: isDesktop
-                          ? 324
-                          : MediaQuery.of(context).size.width / 1.6,
-                      height: isDesktop
-                          ? null
-                          : MediaQuery.of(context).size.width / 1.6,
+              child: LayoutBuilder(
+                builder: (context, constraints) {
+                  return SingleChildScrollView(
+                    child: ConstrainedBox(
+                      constraints: BoxConstraints(
+                        minHeight: constraints.maxHeight,
+                      ),
+                      child: IntrinsicHeight(
+                        child: Padding(
+                          padding: const EdgeInsets.all(16),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.stretch,
+                            children: [
+                              if (!isChans)
+                                const Spacer(
+                                  flex: 2,
+                                ),
+                              CoinImage(
+                                coin: coin,
+                                width: isDesktop
+                                    ? 324
+                                    : MediaQuery.of(context).size.width / 1.6,
+                                height: isDesktop
+                                    ? null
+                                    : MediaQuery.of(context).size.width / 1.6,
+                              ),
+                              const Spacer(
+                                flex: 2,
+                              ),
+                              CreateRestoreWalletTitle(
+                                coin: coin,
+                                isDesktop: isDesktop,
+                              ),
+                              const SizedBox(
+                                height: 8,
+                              ),
+                              CreateRestoreWalletSubTitle(
+                                isDesktop: isDesktop,
+                              ),
+                              const Spacer(
+                                flex: 5,
+                              ),
+                              CreateWalletButtonGroup(
+                                coin: coin,
+                                isDesktop: isDesktop,
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
                     ),
-                    const Spacer(
-                      flex: 2,
-                    ),
-                    CreateRestoreWalletTitle(
-                      coin: coin,
-                      isDesktop: isDesktop,
-                    ),
-                    const SizedBox(
-                      height: 8,
-                    ),
-                    CreateRestoreWalletSubTitle(
-                      isDesktop: isDesktop,
-                    ),
-                    const Spacer(
-                      flex: 5,
-                    ),
-                    CreateWalletButtonGroup(
-                      coin: coin,
-                      isDesktop: isDesktop,
-                    ),
-                  ],
-                ),
+                  );
+                },
               ),
             ),
           ),

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

@@ -6,6 +6,8 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/theme/color_theme.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
 
+import '../../../../utilities/util.dart';
+
 class CoinImage extends ConsumerWidget {
   const CoinImage({
     Key? key,
@@ -20,11 +22,17 @@ class CoinImage extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    if (Theme.of(context).extension<StackColors>()!.themeType ==
-        ThemeType.chan) {
+    final isChans = Theme.of(context).extension<StackColors>()!.themeType ==
+            ThemeType.chan ||
+        Theme.of(context).extension<StackColors>()!.themeType ==
+            ThemeType.darkChans;
+
+    final isDesktop = Util.isDesktop;
+
+    if (isChans) {
       return SizedBox(
-        width: width,
-        height: height,
+        width: isDesktop ? width : MediaQuery.of(context).size.width,
+        height: isDesktop ? height : MediaQuery.of(context).size.width,
         child: Image(
           image: AssetImage(
             Assets.gif.plain(coin),

lib/pages/send_view/sub_widgets/building_transaction_dialog.dart

@@ -57,6 +57,11 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
 
   @override
   Widget build(BuildContext context) {
+    final isChans = Theme.of(context).extension<StackColors>()!.themeType ==
+            ThemeType.chan ||
+        Theme.of(context).extension<StackColors>()!.themeType ==
+            ThemeType.darkChans;
+
     if (Util.isDesktop) {
       return Column(
         mainAxisSize: MainAxisSize.min,
@@ -68,15 +73,13 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
           const SizedBox(
             height: 40,
           ),
-          if (Theme.of(context).extension<StackColors>()!.themeType ==
-              ThemeType.chan)
+          if (isChans)
             Image(
               image: AssetImage(
                 Assets.gif.kiss(widget.coin),
               ),
             ),
-          if (Theme.of(context).extension<StackColors>()!.themeType !=
-              ThemeType.chan)
+          if (!isChans)
             RotationTransition(
               turns: _spinAnimation,
               child: SvgPicture.asset(
@@ -104,8 +107,7 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
         onWillPop: () async {
           return false;
         },
-        child: Theme.of(context).extension<StackColors>()!.themeType ==
-                ThemeType.chan
+        child: isChans
             ? StackDialogBase(
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.stretch,

lib/pages/send_view/sub_widgets/sending_transaction_dialog.dart

@@ -51,6 +51,11 @@ class _RestoringDialogState extends State<SendingTransactionDialog>
 
   @override
   Widget build(BuildContext context) {
+    final isChans = Theme.of(context).extension<StackColors>()!.themeType ==
+            ThemeType.chan ||
+        Theme.of(context).extension<StackColors>()!.themeType ==
+            ThemeType.darkChans;
+
     if (Util.isDesktop) {
       return DesktopDialog(
         child: Padding(
@@ -65,8 +70,7 @@ class _RestoringDialogState extends State<SendingTransactionDialog>
               const SizedBox(
                 height: 40,
               ),
-              Theme.of(context).extension<StackColors>()!.themeType ==
-                      ThemeType.chan
+              isChans
                   ? Image(
                       image: AssetImage(
                         Assets.gif.kiss(widget.coin),
@@ -92,8 +96,7 @@ class _RestoringDialogState extends State<SendingTransactionDialog>
         onWillPop: () async {
           return false;
         },
-        child: Theme.of(context).extension<StackColors>()!.themeType ==
-                ThemeType.chan
+        child: isChans
             ? StackDialogBase(
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.stretch,

lib/pages_desktop_specific/settings/settings_menu/appearance_settings.dart

@@ -166,6 +166,8 @@ class _ThemeToggle extends ConsumerState<ThemeToggle> {
         return Assets.svg.themeLight;
       case ThemeType.dark:
         return Assets.svg.themeDark;
+      case ThemeType.darkChans:
+        return Assets.svg.themeDarkChan;
       case ThemeType.oceanBreeze:
         return Assets.svg.themeOcean;
       case ThemeType.oledBlack:

lib/utilities/assets.dart

@@ -27,6 +27,7 @@ abstract class Assets {
 
     if (Util.isDesktop) {
       assets.add(svg.themeChan);
+      assets.add(svg.themeDarkChan);
     }
 
     final futures = assets.map(
@@ -71,6 +72,7 @@ class _BUY {
     switch (Theme.of(context).extension<StackColors>()!.themeType) {
       case ThemeType.dark:
       case ThemeType.oledBlack:
+      case ThemeType.darkChans:
         return "assets/svg/buy/Simplex-Nuvei-Logo-light.svg";
 
       case ThemeType.fruitSorbet:
@@ -102,6 +104,9 @@ class _SVG {
       // chan theme uses all the same assets as the light theme
       case ThemeType.chan:
         return "assets/svg/themed/${ThemeType.light.name}";
+      case ThemeType.darkChans:
+        return "assets/svg/themed/${ThemeType.dark.name}";
+
       default:
         return "assets/svg/themed/${Theme.of(context).extension<StackColors>()!.themeType.name}";
     }
@@ -115,6 +120,7 @@ class _SVG {
       case ThemeType.chan:
       case ThemeType.dark:
       case ThemeType.oledBlack:
+      case ThemeType.darkChans:
         return null;
 
       case ThemeType.oceanBreeze:
@@ -163,6 +169,7 @@ class _SVG {
   String get themeLight => "assets/svg/light-mode.svg";
   String get themeDark => "assets/svg/dark-theme.svg";
   String get themeChan => "assets/svg/chanstheme.svg";
+  String get themeDarkChan => "assets/svg/darkChansTheme.svg";
 
   String get circleSliders => "assets/svg/configuration.svg";
   String get circlePlus => "assets/svg/plus-circle.svg";

lib/utilities/theme/color_theme.dart

@@ -6,6 +6,7 @@ import 'package:stackwallet/utilities/theme/fruit_sorbet_colors.dart';
 import 'package:stackwallet/utilities/theme/light_colors.dart';
 import 'package:stackwallet/utilities/theme/ocean_breeze_colors.dart';
 import 'package:stackwallet/utilities/theme/oled_black_colors.dart';
+import 'package:stackwallet/utilities/theme/oled_chans_colors.dart';
 
 import 'chan_colors.dart';
 
@@ -16,7 +17,8 @@ enum ThemeType {
   oledBlack,
   fruitSorbet,
   forest,
-  chan;
+  chan,
+  darkChans;
 }
 
 // adjust this file
@@ -38,6 +40,8 @@ extension ThemeTypeExt on ThemeType {
         return FruitSorbetColors();
       case ThemeType.forest:
         return ForestColors();
+      case ThemeType.darkChans:
+        return DarkChansColors();
     }
   }
 
@@ -57,6 +61,8 @@ extension ThemeTypeExt on ThemeType {
         return "Fruit Sorbet";
       case ThemeType.forest:
         return "Forest";
+      case ThemeType.darkChans:
+        return "Dark Chans";
     }
   }
 }

lib/utilities/theme/oled_chans_colors.dart

@@ -0,0 +1,351 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/utilities/theme/color_theme.dart';
+
+class DarkChansColors extends StackColorTheme {
+  @override
+  ThemeType get themeType => ThemeType.darkChans;
+  @override
+  Brightness get brightness => Brightness.dark;
+
+  @override
+  Color get background => const Color(0xFF2A2D34);
+  @override
+  Color get backgroundAppBar => background;
+  @override
+  Gradient? get gradientBackground => null;
+
+  @override
+  Color get overlay => const Color(0xFF111215);
+
+  @override
+  Color get accentColorBlue => const Color(0xFF4C86E9);
+  @override
+  Color get accentColorGreen => const Color(0xFF4CC0A0);
+  @override
+  Color get accentColorYellow => const Color(0xFFF7D65D);
+  @override
+  Color get accentColorRed => const Color(0xFFD34E50);
+  @override
+  Color get accentColorOrange => const Color(0xFFFEA68D);
+  @override
+  Color get accentColorDark => const Color(0xFFF3F3F3);
+
+  @override
+  Color get shadow => const Color(0x0F2D3132);
+
+  @override
+  Color get textDark => const Color(0xFFF3F3F3);
+  @override
+  Color get textDark2 => const Color(0xFFDBDBDB);
+  @override
+  Color get textDark3 => const Color(0xFFEEEFF1);
+  @override
+  Color get textSubtitle1 => const Color(0xFF9E9E9E);
+  @override
+  Color get textSubtitle2 => const Color(0xFF969696);
+  @override
+  Color get textSubtitle3 => const Color(0xFFA9ACAC);
+  @override
+  Color get textSubtitle4 => const Color(0xFF8E9192);
+  @override
+  Color get textSubtitle5 => const Color(0xFF747778);
+  @override
+  Color get textSubtitle6 => const Color(0xFF414141);
+  @override
+  Color get textWhite => const Color(0xFF232323);
+  @override
+  Color get textFavoriteCard => const Color(0xFF232323);
+  @override
+  Color get textError => const Color(0xFFF37475);
+  @override
+  Color get textRestore => overlay;
+
+  // button background
+  @override
+  Color get buttonBackPrimary => const Color(0xFF4C86E9);
+  @override
+  Color get buttonBackSecondary => const Color(0xFF444E5C);
+  @override
+  Color get buttonBackPrimaryDisabled => const Color(0xFF38517C);
+  @override
+  Color get buttonBackSecondaryDisabled => const Color(0xFF3B3F46);
+  @override
+  Color get buttonBackBorder => const Color(0xFF4C86E9);
+  @override
+  Color get buttonBackBorderDisabled => const Color(0xFF314265);
+  @override
+  Color get buttonBackBorderSecondary => buttonBackSecondary;
+  @override
+  Color get buttonBackBorderSecondaryDisabled => buttonBackSecondaryDisabled;
+
+  @override
+  Color get numberBackDefault => const Color(0xFF484B51);
+  @override
+  Color get numpadBackDefault => const Color(0xFF4C86E9);
+  @override
+  Color get bottomNavBack => const Color(0xFF3E4148);
+
+  // button text/element
+  @override
+  Color get buttonTextPrimary => const Color(0xFFFFFFFF);
+  @override
+  Color get buttonTextSecondary => const Color(0xFFFFFFFF);
+  @override
+  Color get buttonTextPrimaryDisabled => const Color(0xFFFFFFFF);
+  @override
+  Color get buttonTextSecondaryDisabled => const Color(0xFF6A6C71);
+  @override
+  Color get buttonTextBorder => const Color(0xFF4C86E9);
+  @override
+  Color get buttonTextDisabled => const Color(0xFF314265);
+  @override
+  Color get buttonTextBorderless => const Color(0xFF4C86E9);
+  @override
+  Color get buttonTextBorderlessDisabled => const Color(0xFFB6B6B6);
+  @override
+  Color get numberTextDefault => const Color(0xFFFFFFFF);
+  @override
+  Color get numpadTextDefault => const Color(0xFFFFFFFF);
+  @override
+  Color get bottomNavText => const Color(0xFFFFFFFF);
+  @override
+  Color get customTextButtonEnabledText => buttonTextBorderless;
+  @override
+  Color get customTextButtonDisabledText => textSubtitle1;
+
+  // switch
+  @override
+  Color get switchBGOn => const Color(0xFF4C86E9);
+  @override
+  Color get switchBGOff => const Color(0xFFC1D9FF);
+  @override
+  Color get switchBGDisabled => const Color(0xFFB5B7BA);
+  @override
+  Color get switchCircleOn => const Color(0xFFC9DDFF);
+  @override
+  Color get switchCircleOff => const Color(0xFFFFFFFF);
+  @override
+  Color get switchCircleDisabled => const Color(0xFFFFFFFF);
+
+  // step indicator background
+  @override
+  Color get stepIndicatorBGCheck => const Color(0xFF4C86E9);
+  @override
+  Color get stepIndicatorBGNumber => const Color(0xFF4C86E9);
+  @override
+  Color get stepIndicatorBGInactive => const Color(0xFF3B3F46);
+  @override
+  Color get stepIndicatorBGLines => const Color(0xFF4C86E9);
+  @override
+  Color get stepIndicatorBGLinesInactive => const Color(0xFF3B3F46);
+  @override
+  Color get stepIndicatorIconText => const Color(0xFFFFFFFF);
+  @override
+  Color get stepIndicatorIconNumber => const Color(0xFFFFFFFF);
+  @override
+  Color get stepIndicatorIconInactive => const Color(0xFF747474);
+
+  // checkbox
+  @override
+  Color get checkboxBGChecked => const Color(0xFF4C86E9);
+  @override
+  Color get checkboxBorderEmpty => const Color(0xFF8E9192);
+  @override
+  Color get checkboxBGDisabled => const Color(0xFFADC7EC);
+  @override
+  Color get checkboxIconChecked => const Color(0xFFFFFFFF);
+  @override
+  Color get checkboxIconDisabled => const Color(0xFFFFFFFF);
+  @override
+  Color get checkboxTextLabel => const Color(0xFFFFFFFF);
+
+  // snack bar
+  @override
+  Color get snackBarBackSuccess => const Color(0xFF8EF5C3);
+  @override
+  Color get snackBarBackError => const Color(0xFFFFB4A9);
+  @override
+  Color get snackBarBackInfo => const Color(0xFFB4C4FF);
+  @override
+  Color get snackBarTextSuccess => const Color(0xFF003921);
+  @override
+  Color get snackBarTextError => const Color(0xFF690001);
+  @override
+  Color get snackBarTextInfo => const Color(0xFF00297A);
+
+  // icons
+  @override
+  Color get bottomNavIconBack => const Color(0xFF7F8185);
+  @override
+  Color get bottomNavIconIcon => const Color(0xFFFFFFFF);
+
+  @override
+  Color get topNavIconPrimary => const Color(0xFFFFFFFF);
+  @override
+  Color get topNavIconGreen => const Color(0xFF4CC0A0);
+  @override
+  Color get topNavIconYellow => const Color(0xFFF7D65D);
+  @override
+  Color get topNavIconRed => const Color(0xFFD34E50);
+
+  @override
+  Color get settingsIconBack => const Color(0xFFE0E3E3);
+  @override
+  Color get settingsIconIcon => const Color(0xFF232323);
+  @override
+  Color get settingsIconBack2 => const Color(0xFF94D6C4);
+  @override
+  Color get settingsIconElement => const Color(0xFF00A578);
+
+  // text field
+  @override
+  Color get textFieldActiveBG => const Color(0xFF4C5360);
+  @override
+  Color get textFieldDefaultBG => const Color(0xFF444953);
+  @override
+  Color get textFieldErrorBG => const Color(0xFFFFB4A9);
+  @override
+  Color get textFieldSuccessBG => const Color(0xFF8EF5C3);
+  @override
+  Color get textFieldErrorBorder => textFieldErrorBG;
+  @override
+  Color get textFieldSuccessBorder => textFieldSuccessBG;
+
+  @override
+  Color get textFieldActiveSearchIconLeft => const Color(0xFFA9ACAC);
+  @override
+  Color get textFieldDefaultSearchIconLeft => const Color(0xFFA9ACAC);
+  @override
+  Color get textFieldErrorSearchIconLeft => const Color(0xFF690001);
+  @override
+  Color get textFieldSuccessSearchIconLeft => const Color(0xFF003921);
+
+  @override
+  Color get textFieldActiveText => const Color(0xFFFFFFFF);
+  @override
+  Color get textFieldDefaultText => const Color(0xFFA9ACAC);
+  @override
+  Color get textFieldErrorText => const Color(0xFF000000);
+  @override
+  Color get textFieldSuccessText => const Color(0xFF000000);
+
+  @override
+  Color get textFieldActiveLabel => const Color(0xFFA9ACAC);
+  @override
+  Color get textFieldErrorLabel => const Color(0xFF690001);
+  @override
+  Color get textFieldSuccessLabel => const Color(0xFF003921);
+
+  @override
+  Color get textFieldActiveSearchIconRight => const Color(0xFFC4C7C7);
+  @override
+  Color get textFieldDefaultSearchIconRight => const Color(0xFF747778);
+  @override
+  Color get textFieldErrorSearchIconRight => const Color(0xFF690001);
+  @override
+  Color get textFieldSuccessSearchIconRight => const Color(0xFF003921);
+
+  // settings item level2
+  @override
+  Color get settingsItem2ActiveBG => const Color(0xFF484B51);
+  @override
+  Color get settingsItem2ActiveText => const Color(0xFFFFFFFF);
+  @override
+  Color get settingsItem2ActiveSub => const Color(0xFF9E9E9E);
+
+  // radio buttons
+  @override
+  Color get radioButtonIconBorder => const Color(0xFF4C86E9);
+  @override
+  Color get radioButtonIconBorderDisabled => const Color(0xFF9E9E9E);
+  @override
+  Color get radioButtonBorderEnabled => const Color(0xFF4C86E9);
+  @override
+  Color get radioButtonBorderDisabled => const Color(0xFFCDCDCD);
+  @override
+  Color get radioButtonIconCircle => const Color(0xFF9E9E9E);
+  @override
+  Color get radioButtonIconEnabled => const Color(0xFF4C86E9);
+  @override
+  Color get radioButtonTextEnabled => const Color(0xFF44464E);
+  @override
+  Color get radioButtonTextDisabled => const Color(0xFF44464E);
+  @override
+  Color get radioButtonLabelEnabled => const Color(0xFF8E9192);
+  @override
+  Color get radioButtonLabelDisabled => const Color(0xFF8E9192);
+
+  // info text
+  @override
+  Color get infoItemBG => const Color(0xFF333942);
+  @override
+  Color get infoItemLabel => const Color(0xFF9E9E9E);
+  @override
+  Color get infoItemText => const Color(0xFFFFFFFF);
+  @override
+  Color get infoItemIcons => const Color(0xFF4C86E9);
+
+  // popup
+  @override
+  Color get popupBG => const Color(0xFF333942);
+
+  // currency list
+  @override
+  Color get currencyListItemBG => const Color(0xFF484B51);
+
+  // bottom nav
+  @override
+  Color get stackWalletBG => const Color(0xFF35383D);
+  @override
+  Color get stackWalletMid => const Color(0xFF292D34);
+  @override
+  Color get stackWalletBottom => const Color(0xFFFFFFFF);
+  @override
+  Color get bottomNavShadow => const Color(0xFF282E33);
+
+  @override
+  Color get favoriteStarActive => accentColorYellow;
+  @override
+  Color get favoriteStarInactive => textSubtitle2;
+
+  @override
+  Color get splash => const Color(0x358E9192);
+  @override
+  Color get highlight => const Color(0x44A9ACAC);
+  @override
+  Color get warningForeground => snackBarTextError;
+  @override
+  Color get warningBackground => const Color(0xFFFFB4A9);
+  @override
+  Color get loadingOverlayTextColor => const Color(0xFFF7F7F7);
+  @override
+  Color get myStackContactIconBG => const Color(0x88747778);
+  @override
+  Color get textConfirmTotalAmount => const Color(0xFF003921);
+  @override
+  Color get textSelectedWordTableItem => const Color(0xFF00297A);
+
+  //rate type toggle
+  @override
+  Color get rateTypeToggleColorOn => textFieldDefaultBG;
+  @override
+  Color get rateTypeToggleColorOff => popupBG;
+  @override
+  Color get rateTypeToggleDesktopColorOn => textFieldDefaultBG;
+  @override
+  Color get rateTypeToggleDesktopColorOff => buttonBackSecondary;
+
+  @override
+  BoxShadow get standardBoxShadow => BoxShadow(
+        color: shadow,
+        spreadRadius: 3,
+        blurRadius: 4,
+      );
+
+  @override
+  BoxShadow? get homeViewButtonBarBoxShadow => BoxShadow(
+        color: shadow,
+        spreadRadius: 3,
+        blurRadius: 4,
+      );
+}

pubspec.yaml

@@ -336,6 +336,7 @@ flutter:
     - assets/svg/fruit-sorbet-theme.svg
     - assets/svg/forest-theme.svg
     - assets/svg/chanstheme.svg
+    - assets/svg/darkChansTheme.svg
 
     # light theme specific
     - assets/svg/themed/light/