Files
hash-wallet/lib/view_model/settings/display_settings_view_model.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

242 lines
7.5 KiB
Dart

import 'package:cake_wallet/entities/balance_display_mode.dart';
import 'package:cake_wallet/entities/fiat_currency.dart';
import 'package:cake_wallet/entities/sync_status_display_mode.dart';
import 'package:cake_wallet/store/settings_store.dart';
import 'package:cake_wallet/themes/core/material_base_theme.dart';
import 'package:cake_wallet/themes/theme_classes/black_theme.dart';
import 'package:cake_wallet/themes/utils/theme_list.dart';
import 'package:mobx/mobx.dart';
import 'package:cake_wallet/entities/fiat_api_mode.dart';
import 'package:cake_wallet/themes/core/theme_store.dart';
import 'package:flutter/material.dart';
part 'display_settings_view_model.g.dart';
class DisplaySettingsViewModel = DisplaySettingsViewModelBase with _$DisplaySettingsViewModel;
abstract class DisplaySettingsViewModelBase with Store {
DisplaySettingsViewModelBase(this._settingsStore, this._themeStore);
final SettingsStore _settingsStore;
final ThemeStore _themeStore;
@computed
FiatCurrency get fiatCurrency => _settingsStore.fiatCurrency;
@computed
String get languageCode => _settingsStore.languageCode;
@computed
BalanceDisplayMode get balanceDisplayMode => _settingsStore.balanceDisplayMode;
@computed
bool get shouldDisplayBalance => balanceDisplayMode == BalanceDisplayMode.displayableBalance;
@computed
bool get shouldShowMarketPlaceInDashboard => _settingsStore.shouldShowMarketPlaceInDashboard;
@computed
MaterialThemeBase get currentTheme => _themeStore.currentTheme;
@computed
ThemeMode get themeMode => _themeStore.themeMode;
@computed
bool get isBlackThemeOledEnabled => _themeStore.currentTheme is BlackTheme && _themeStore.isOled;
@computed
bool get disabledFiatApiMode => _settingsStore.fiatApiMode == FiatApiMode.disabled;
@computed
bool get showAddressBookPopup => _settingsStore.showAddressBookPopupEnabled;
@computed
SyncStatusDisplayMode get syncStatusDisplayMode => _settingsStore.syncStatusDisplayMode;
@computed
String get backgroundImage => _settingsStore.backgroundImage;
@computed
List<MaterialThemeBase> get availableThemes {
List<MaterialThemeBase> themes;
switch (themeMode) {
case ThemeMode.light:
themes = ThemeList.all.where((theme) => theme.brightness == Brightness.light).toList();
break;
case ThemeMode.dark:
themes = ThemeList.all.where((theme) => theme.brightness == Brightness.dark).toList();
break;
case ThemeMode.system:
final systemBrightness = WidgetsBinding.instance.platformDispatcher.platformBrightness;
themes = ThemeList.all.where((theme) => theme.brightness == systemBrightness).toList();
break;
}
List<MaterialThemeBase> groupedThemes = [];
Set<String> addedThemeFamilies = {};
for (final theme in themes) {
if (theme.hasAccentColors) {
final family = theme.themeFamily!;
if (!addedThemeFamilies.contains(family)) {
groupedThemes.add(theme);
addedThemeFamilies.add(family);
}
} else {
groupedThemes.add(theme);
}
}
return groupedThemes;
}
@computed
List<ThemeAccentColor> get availableAccentColors {
if (!currentTheme.hasAccentColors) return [];
if (currentTheme.themeFamily == 'BlackTheme') {
return BlackThemeAccentColor.values;
}
return [];
}
@action
void setBalanceDisplayMode(BalanceDisplayMode value) => _settingsStore.balanceDisplayMode = value;
@action
void setShouldDisplayBalance(bool value) {
if (value) {
_settingsStore.balanceDisplayMode = BalanceDisplayMode.displayableBalance;
} else {
_settingsStore.balanceDisplayMode = BalanceDisplayMode.hiddenBalance;
}
}
@action
void onLanguageSelected(String code) {
_settingsStore.languageCode = code;
}
@action
Future<void> onThemeSelected(MaterialThemeBase newTheme) async {
if (newTheme is BlackTheme && _themeStore.isOled) {
await setTheme(BlackTheme(newTheme.accentColor, isOled: true));
return;
}
await setTheme(newTheme);
}
@action
Future<void> onAccentColorSelected(String accentColorId) async {
if (!currentTheme.hasAccentColors) return;
try {
final newTheme = ThemeList.all.firstWhere(
(theme) =>
theme.hasAccentColors &&
theme.themeFamily == currentTheme.themeFamily &&
theme.accentColorId == accentColorId,
);
if (newTheme != currentTheme) {
if (newTheme is BlackTheme && _themeStore.isOled) {
await onThemeSelected(BlackTheme(newTheme.accentColor, isOled: true));
} else {
await onThemeSelected(newTheme);
}
}
} catch (_) {}
}
@action
Future<void> setBlackThemeOled(bool value) async {
if (_themeStore.currentTheme is BlackTheme) {
await _themeStore.setOledEnabled(value);
}
}
bool isThemeSelected(MaterialThemeBase theme) {
if (!theme.hasAccentColors) return currentTheme == theme;
return currentTheme.hasAccentColors && currentTheme.themeFamily == theme.themeFamily;
}
bool isAccentColorSelected(String accentColorId) {
if (!currentTheme.hasAccentColors) return false;
return currentTheme.accentColorId == accentColorId;
}
@action
Future<void> setTheme(MaterialThemeBase newTheme) async {
await _themeStore.setTheme(newTheme);
}
MaterialThemeBase? getFirstMatchingTheme(ThemeMode mode) {
List<MaterialThemeBase> themes;
switch (mode) {
case ThemeMode.light:
themes = ThemeList.all.where((theme) => theme.brightness == Brightness.light).toList();
break;
case ThemeMode.dark:
themes = ThemeList.all.where((theme) => theme.brightness == Brightness.dark).toList();
break;
case ThemeMode.system:
final systemBrightness = WidgetsBinding.instance.platformDispatcher.platformBrightness;
themes = ThemeList.all.where((theme) => theme.brightness == systemBrightness).toList();
break;
}
return themes.isNotEmpty ? themes.first : null;
}
@action
Future<void> setThemeMode(ThemeMode value) async {
await _themeStore.setThemeMode(value);
// We won't override the saved custom theme when switching to system mode.
// We'll just let the ThemeStore resolve it based on system brightness and saved theme.
if (value != ThemeMode.system) {
final matchingTheme = getFirstMatchingTheme(value);
if (matchingTheme != null) {
await setTheme(matchingTheme);
}
}
}
@action
void setFiatCurrency(FiatCurrency value) => _settingsStore.fiatCurrency = value;
@action
void setShouldShowMarketPlaceInDashbaord(bool value) {
_settingsStore.shouldShowMarketPlaceInDashboard = value;
}
@action
void setShowAddressBookPopup(bool value) => _settingsStore.showAddressBookPopupEnabled = value;
@action
void setSyncStatusDisplayMode(SyncStatusDisplayMode value) =>
_settingsStore.syncStatusDisplayMode = value;
@action
void setBackgroundImage(String path) => _settingsStore.backgroundImage = path;
String getImageForTheme(MaterialThemeBase theme) {
switch (theme.title) {
case 'Dark Theme':
return 'assets/images/dark.svg';
case 'Light Theme':
return 'assets/images/light.svg';
case 'Black Theme (Cake Primary)':
case 'Black Theme (BCH Green)':
case 'Black Theme (Bitcoin Yellow)':
case 'Black Theme (Monero Orange)':
case 'Black Theme (Tron Red)':
case 'Black Theme (Frosting Purple)':
return 'assets/images/black_accent.svg';
default:
return 'assets/images/dark.svg';
}
}
}