Files
hash-wallet/lib/themes/theme_classes/black_theme.dart
T
c746b85a4b UI updates (#2368)
* 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>
2025-10-10 16:00:39 +03:00

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);
}