hash-wallet/lib/themes

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

1. Always use semantic color tokens from ColorScheme instead of hardcoded colors.
2. Leverage Material 3 components wherever possible for consistency and accessibility.
3. Use the MobX theme store for all theme-related state and switching.
4. Test in both light and dark modes to ensure good contrast and appearance.
5. Keep any theme extensions minimal and focused (if used at all).
6. 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.