mirror of https://github.com/Such-Software/hash-wallet.git synced 2026-10-17 05:41:29 +02:00

Files

T

jwinterm 59a6b25ff3 Theme overhaul: green primary + Such Software pink/blue accents

Tier A (theme classes):
- light_theme.dart: primary #1A5C38 (Hash green), secondary #B83278 (Such
  pink), tertiary #1F7DBF (Such blue), surface #F2F8F4 (very light minty).
  Full ColorScheme rewritten with green-family containers and green-tinted
  surface tokens.
- dark_theme.dart: primary #7FCAA0 (mint, readable on dark), secondary
  #E16FA6 (soft pink), tertiary #6AB7E6 (soft blue), surface #0B1F14
  (deep green). Containers + surface tokens tuned for the green palette.
- black_theme.dart: replaced accent enum (cakePrimary/tronRed/frostingPurple
  removed; hashGreen, suchPink, suchBlue added). bchGreen / bitcoinYellow /
  moneroOrange kept as chain identifiers.

Tier A (custom theme colors):
- light_theme_custom_colors.dart: backgroundGradient + cardGradient +
  toggleColorOffState retuned to green tints.
- dark_theme_custom_colors.dart: same for the dark variant.
- black_theme_custom_colors.dart: untouched (pure black AMOLED is brand-
  neutral on purpose).

Tier B (palette.dart):
- Cake's blue-family accents (Palette.blue, royalBlue, cornflower,
  blueCraiola family, pinkFlamingo, lavenders, oceanBlue, nightBlue,
  protectiveBlue, etc.) repainted into the green/pink/blue brand system.
- PaletteDark's night-blue surfaces wholesale repainted into deep-green
  equivalents. Original const names retained so every call-site compiles
  unchanged.
- moneroOrange, moneroLightOrange, bitcoinOrange, moneroCard, BCH green
  intentionally NOT touched — chain identifiers.
- Pure neutrals (gray, darkGray, manatee, dullGray, highContrastGray,
  shadowWhite, stateGray, granite, matrixGreen, red, error reds) kept.

Tier C deferred — hardcoded Color(0xFF...) literals scattered through
lib/ remain blue. Most should pull from ColorScheme so this should be
~80% visually rebranded already; iterate from screenshots.

2026-05-16 10:34:53 -04:00

core

UI updates (#2368 )

2025-10-10 16:00:39 +03:00

custom_theme_colors

Theme overhaul: green primary + Such Software pink/blue accents

2026-05-16 10:34:53 -04:00

theme_classes

Theme overhaul: green primary + Such Software pink/blue accents

2026-05-16 10:34:53 -04:00

utils

UI updates (#2368 )

2025-10-10 16:00:39 +03:00

README.md

New themes (#2239 )

2025-05-25 23:11:45 +03:00

README.md

Material 3 Theming System

This directory contains the Material 3 (M3) theming implementation for Cake Wallet. The theming system is now fully based on Material 3 color tokens and patterns, with all custom theme extensions removed for simplicity, maintainability, and compliance with Material Design 3 guidelines.

Directory Structure

lib/themes/
├── core/                # Theme state management and base theme logic
├── theme_classes/       # Light and dark theme data definitions
├── extensions/          # (Optional) Theme extensions for specific widgets/pages
├── utils/               # Utilities for theme management
└── README.md            # This file

Key Features

Material 3 color system with semantic color tokens
Dynamic color support (when available)
MobX-based state management
Simplified theme management
Consistent design language across the app

Usage

Accessing Theme Colors

final colorScheme = Theme.of(context).colorScheme;
final primaryColor = colorScheme.primary;
final onSurfaceVariant = colorScheme.onSurfaceVariant;

Available Color Tokens

Material 3 provides a comprehensive set of semantic color tokens that adapt to light/dark themes:

primary / onPrimary
secondary / onSecondary
tertiary / onTertiary
error / onError
background / onBackground
surface / onSurface
surfaceVariant / onSurfaceVariant
outline, outlineVariant
...and more (see Flutter's ColorScheme)

Theme Management

Theme mode state (light/dark/system) and switching is handled via MobX stores in core/. Use the provided store to get/set the current theme mode and listen for changes.

// Example: Getting the current theme mode
final themeStore = ... // Obtain from provider or context
final isDark = themeStore.isDark;

// Example: Switching theme mode
await themeStore.setThemeMode(ThemeMode.dark);

Best Practices

Always use semantic color tokens from ColorScheme instead of hardcoded colors.
Leverage Material 3 components wherever possible for consistency and accessibility.
Use the MobX theme store for all theme-related state and switching.
Test in both light and dark modes to ensure good contrast and appearance.
Keep any theme extensions minimal and focused (if used at all).
Do not reintroduce custom theme extensions unless absolutely necessary and not covered by Material 3.

Adding or Modifying Themes

To update theme colors, edit the files in theme_classes/ (e.g., light_theme.dart, dark_theme.dart).
To add a new theme variant, create a new file in theme_classes/ and update the MobX store in core/ to support it.
For widget-specific theming, prefer using Material 3's built-in tokens. Only use a theme extension if there is no Material 3 equivalent.

Contributing

Follow Material 3 color system and accessibility guidelines.
Ensure proper contrast ratios for accessibility.
Test all changes in both light and dark modes.
Update this documentation if you add new color tokens or theme variants.
Keep theme files organized and focused.