mirror of
https://github.com/Such-Software/hash-wallet.git
synced 2026-10-18 05:51:34 +02:00
* Add Black theme * Fix black theme * Add WixMadefor Font * feat: Enhance theme setup This change: - Adds support for custom themes - Updates theme retrieval logic to ensure the right theme is used based on user preferences(especially for custom themes). * Add black custom colors * Add custom accent colors * feat: Restructure custom colors handling for themes * feat: Integrate new custom colors structure across various components - WIP * feat: Integrate new custom colors structure across various components, black theme now ready for tests * feat: Add new accent color themes and update theme selection UI - Enhanced theme selection UI in display settings to support accent color choices. - Updated theme handling logic to accommodate new accent color variants. * Minor updates to display_settings_page.dart * Update settings_theme_choice.dart * Revert accidental change in display_settings_page.dart * Revert WixMadeFor font, fix SVG colors for CakeImageWidget, and test some color changes * Update Monero Orange * fix: Remove unused custom colors * Test outline * Test spacing and colors * Add padding * Remove outline * Add other accent colors * Update display_settings_view_model.dart * Update names and fix switch case * Add outline and update dark_theme.dart colors * Add gradient to option_tile.dart * Update icons * Update some colors * Switch option_tile.dart to TextButton * Add updated icons * Fix icon resolution * Cleanup old icons + Update pubspec_base.yaml * Remove unused fonts * Update more icons * Update image paths * Remove more icons + update some component colors * Add back DAI icon * Fix errors * feat: Implement OLED mode for BlackTheme * feat: Add OLED mode for BlackTheme and localizations * feat: Implement OLED mode for Black Theme * refactor: Remove unused theme parameters and set up easy access to toggleKnob custom colors * fix: Cleanup UI and overflows * feat: Persist black theme selection if OS theme mode while app is in system mode * fix: OS theme change when app is in background restrict pin screen from proceed * Fix theme picker sizing * Update lib/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart Co-authored-by: Omar Hatem <omarh.ismail1@gmail.com> * refactor: Enhance theme access by introducing ThemeX extension for easier retrieval of current theme and custom colors * refactor: Remove currentTheme parameter from GradientBackground widget and adjust across affected widgets * refactor: Remove currentTheme parameter from StandardSwitch and SettingsSwitcherCell, using ThemeX extension for theme access * refactor: Remove currentTheme parameter from various widgets dependent on SettingsSwitcherCell and StandardxSwitcher, using ThemeX extension for theme access * refactor: Remove currentTheme in bottomsheets and related widgets, switching to theme extension * refactor: Remove constructor theme access in OptionTile and related widgets, switching to theme extension * refactor: Switch bottomsheet related widgets to use theme extension instead of constructor access * refactor: Migrate currentTheme access from constructor based to extension base * refactor: Switch theme access from constructor base to extension base [skip ci] * refactor: Migrate more widgets to use extension based theme access and clean up code * refactor: Update theme access across multiple widgets to use the new theme extension * refactor: Clean up theme access in various widgets, moving to extension-based theme usage * refactor: Make theme picker preview responsive * fix: Persist saved black theme accent when app is put in background and brought back * remove unused variables [skip ci] --------- Co-authored-by: Blazebrain <davidadegoke16@gmail.com> Co-authored-by: Omar Hatem <omarh.ismail1@gmail.com>
300 lines
9.2 KiB
Dart
300 lines
9.2 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:cake_wallet/themes/core/material_base_theme.dart';
|
|
import 'package:cake_wallet/themes/core/custom_theme_colors.dart';
|
|
import 'package:cake_wallet/themes/custom_theme_colors/black_theme_custom_colors.dart';
|
|
|
|
enum BlackThemeAccentColor implements ThemeAccentColor {
|
|
cakePrimary(Color(0xFF52B6F0), 'Cake Primary'),
|
|
bchGreen(Color(0xFF44BA52), 'BCH Green'),
|
|
bitcoinYellow(Color(0xFFFFC107), 'Bitcoin Yellow'),
|
|
moneroOrange(Color(0xFFFF6600), 'Monero Orange'),
|
|
tronRed(Color(0xFFFF4242), 'Tron Red'),
|
|
frostingPurple(Color(0xFFBABAF3), 'Frosting Purple');
|
|
|
|
const BlackThemeAccentColor(this.color, this.name);
|
|
|
|
@override
|
|
final Color color;
|
|
|
|
@override
|
|
final String name;
|
|
}
|
|
|
|
class BlackTheme extends MaterialThemeBase {
|
|
BlackTheme(this.accentColor, {this.isOled = false});
|
|
|
|
final BlackThemeAccentColor accentColor;
|
|
final bool isOled;
|
|
|
|
@override
|
|
Brightness get brightness => Brightness.dark;
|
|
|
|
@override
|
|
ThemeMode get themeMode => ThemeMode.dark;
|
|
|
|
@override
|
|
Color get primaryColor => accentColor.color;
|
|
|
|
@override
|
|
Color get secondaryColor => const Color(0xFFCCC4CD);
|
|
|
|
@override
|
|
Color get errorColor => const Color(0xFFFFB4AB);
|
|
|
|
@override
|
|
Color get surfaceColor => isOled ? const Color(0xFF000000) : const Color(0xFF131314);
|
|
|
|
@override
|
|
Color get tertiaryColor => const Color(0xFFDEBFC5);
|
|
|
|
@override
|
|
ColorScheme get colorScheme => ColorScheme.dark(
|
|
primary: primaryColor,
|
|
onPrimary: const Color(0xFF352D3C),
|
|
primaryContainer: const Color(0xFF28212F),
|
|
onPrimaryContainer: const Color(0xFFB7ABBE),
|
|
secondary: secondaryColor,
|
|
onSecondary: const Color(0xFF332F36),
|
|
secondaryContainer: const Color(0xFF454148),
|
|
onSecondaryContainer: const Color(0xFFDFD6DF),
|
|
tertiary: tertiaryColor,
|
|
onTertiary: const Color(0xFF3F2B30),
|
|
tertiaryContainer: const Color(0xFF321F24),
|
|
onTertiaryContainer: const Color(0xFFC6A8AE),
|
|
error: errorColor,
|
|
onError: const Color(0xFFB71919),
|
|
errorContainer: const Color(0xFFC53636),
|
|
onErrorContainer: const Color(0xFFFFDAD6),
|
|
surface: surfaceColor,
|
|
background: surfaceColor,
|
|
onSurface: const Color(0xFFE6E1E3),
|
|
onSurfaceVariant: const Color(0xFFB4B4B4),
|
|
surfaceContainerLowest: isOled ? const Color(0xFF000000) : const Color(0xFF0F0E0F),
|
|
surfaceContainerLow: Color(0xFF1C1B1C),
|
|
surfaceContainer: Color(0xFF211F20),
|
|
surfaceContainerHigh: Color(0xFF2B292B),
|
|
surfaceContainerHighest: Color(0xFF363435),
|
|
outline: const Color(0xFF958F95),
|
|
outlineVariant: const Color(0xFF49454B),
|
|
);
|
|
|
|
static const String fontFamily = 'Lato';
|
|
|
|
@override
|
|
TextTheme get textTheme => TextTheme(
|
|
displayLarge: TextStyle(
|
|
fontSize: 57,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: -0.25,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
displayMedium: TextStyle(
|
|
fontSize: 45,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
displaySmall: TextStyle(
|
|
fontSize: 36,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
headlineLarge: TextStyle(
|
|
fontSize: 32,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
headlineMedium: TextStyle(
|
|
fontSize: 28,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
headlineSmall: TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
titleLarge: TextStyle(
|
|
fontSize: 22,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
titleMedium: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w500,
|
|
letterSpacing: 0.15,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
titleSmall: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
letterSpacing: 0.1,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
bodyLarge: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0.5,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
bodyMedium: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0.25,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
bodySmall: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w400,
|
|
letterSpacing: 0.4,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
labelLarge: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
letterSpacing: 0.1,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
labelMedium: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w500,
|
|
letterSpacing: 0.5,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
labelSmall: TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w500,
|
|
letterSpacing: 0.5,
|
|
color: colorScheme.onSurface,
|
|
),
|
|
);
|
|
|
|
@override
|
|
ThemeData get themeData => ThemeData(
|
|
useMaterial3: true,
|
|
fontFamily: fontFamily,
|
|
brightness: brightness,
|
|
colorScheme: colorScheme,
|
|
scaffoldBackgroundColor: surfaceColor,
|
|
canvasColor: surfaceColor,
|
|
cardColor: colorScheme.surface,
|
|
textTheme: textTheme,
|
|
appBarTheme: AppBarTheme(
|
|
backgroundColor: surfaceColor,
|
|
foregroundColor: colorScheme.onSurface,
|
|
elevation: 0,
|
|
),
|
|
cardTheme: CardThemeData(
|
|
color: colorScheme.surface,
|
|
elevation: 1,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
elevatedButtonTheme: ElevatedButtonThemeData(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: colorScheme.primary,
|
|
foregroundColor: colorScheme.onPrimary,
|
|
elevation: 0,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
),
|
|
outlinedButtonTheme: OutlinedButtonThemeData(
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: colorScheme.primary,
|
|
side: BorderSide(color: colorScheme.outline),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
),
|
|
textButtonTheme: TextButtonThemeData(
|
|
style: TextButton.styleFrom(
|
|
foregroundColor: colorScheme.primary,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
),
|
|
inputDecorationTheme: InputDecorationTheme(
|
|
filled: true,
|
|
fillColor: colorScheme.surfaceContainer,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
borderSide: BorderSide.none,
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
borderSide: BorderSide.none,
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
borderSide: BorderSide(color: colorScheme.primary),
|
|
),
|
|
errorBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
borderSide: BorderSide(color: colorScheme.error),
|
|
),
|
|
focusedErrorBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
borderSide: BorderSide(color: colorScheme.error),
|
|
),
|
|
disabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(10),
|
|
borderSide: BorderSide.none,
|
|
),
|
|
),
|
|
);
|
|
|
|
@override
|
|
String get title => 'Black Theme (${accentColor.name})';
|
|
|
|
@override
|
|
ThemeType get type => ThemeType.dark;
|
|
|
|
@override
|
|
int get raw {
|
|
final baseValue = switch (accentColor) {
|
|
BlackThemeAccentColor.cakePrimary => 12,
|
|
BlackThemeAccentColor.bchGreen => 13,
|
|
BlackThemeAccentColor.bitcoinYellow => 14,
|
|
BlackThemeAccentColor.moneroOrange => 15,
|
|
BlackThemeAccentColor.tronRed => 16,
|
|
BlackThemeAccentColor.frostingPurple => 17,
|
|
};
|
|
if (!isOled) return baseValue;
|
|
// OLED encodes as 100 + base to avoid collisions
|
|
return 100 + baseValue;
|
|
}
|
|
|
|
@override
|
|
CustomThemeColors get customColors => BlackThemeCustomColors();
|
|
|
|
@override
|
|
String? get themeFamily => 'BlackTheme';
|
|
|
|
@override
|
|
String? get accentColorId => accentColor.name.toLowerCase();
|
|
|
|
@override
|
|
String? get accentColorName => accentColor.name;
|
|
|
|
@override
|
|
bool operator ==(Object other) =>
|
|
identical(this, other) ||
|
|
other is BlackTheme &&
|
|
runtimeType == other.runtimeType &&
|
|
accentColor == other.accentColor &&
|
|
isOled == other.isOled;
|
|
|
|
@override
|
|
int get hashCode => Object.hash(accentColor, isOled);
|
|
}
|