Theming & Branding

DWallet is designed to be easily themed. You can change colors, switch between light/dark modes, and customize the appearance to match your brand identity.

Built-in Color Schemes

DWallet comes with 13 predefined color schemes:

• Rose
• Blue (default)
• Zinc
• Slate
• Orange
• Yellow
• Green
• Violet
• Gray
• Neutral
• Red
• Stone
• System (uses device accent color)

Changing the Color Scheme

1. Open the app
2. Go to Settings > Appearance
3. Select your preferred color scheme

Or programmatically:

ref.read(themeServiceProvider.notifier).setColorScheme(AppColorScheme.rose);

Theme Modes

DWallet supports three theme modes:

• Light: Always use light theme
• Dark: Always use dark theme
• System: Follow system preference (default)

To change programmatically:

ref.read(themeServiceProvider.notifier).setThemeMode(ThemeMode.dark);

Dynamic Colors (Android)

On Android 12+, DWallet supports Material You dynamic colors:

// In main.dart
DynamicColorBuilder(
  builder: (lightDynamic, darkDynamic) {
    return ShadApp.router(
      theme: DAppTheme.theme(
        dynamicScheme: lightDynamic, // Uses system colors
      ),
      // ...
    );
  },
);

Customizing Colors

To add a custom color scheme:

1. Open lib/app/core/theme/_app_theme.dart
2. Add your color to AppColorScheme enum:

enum AppColorScheme {
  rose,
  blue,
  // ... existing schemes
  custom, // Add this
}

3. Add the color definition in the theme map:

static const Map<AppColorScheme, Color> _schemeColors = {
  AppColorScheme.rose: Color(0xFFE11D48),
  // ... existing colors
  AppColorScheme.custom: Color(0xFFYourHex), // Add this
};

Shadcn UI Components

DWallet uses shadcn_ui for consistent, accessible components. All components automatically adapt to the current theme.

Using Theme Colors

final theme = ShadTheme.of(context);

// Primary color
theme.colorScheme.primary

// Background
theme.colorScheme.background

// Text colors
theme.textTheme.p // Paragraph
theme.textTheme.h1 // Heading 1
theme.textTheme.muted // Muted text

Typography

DWallet uses Inter font family throughout:

// In theme configuration
textTheme: ShadTextTheme(
  family: 'Inter',
  // ... other properties
)

To change the font:

1. Add font files to assets/fonts/
2. Update pubspec.yaml
3. Modify DAppTheme.theme() in _app_theme.dart

Persisting Theme Settings

Theme settings are automatically persisted using SharedPreferences. The ThemeService handles:

• Theme mode (light/dark/system)
• Color scheme selection
• Loading saved preferences on app start

Best Practices

1. Use semantic colors: theme.colorScheme.primary instead of hardcoded colors
2. Test both themes: Ensure UI works well in light and dark modes
3. Respect system preference: Default to ThemeMode.system
4. Consider contrast: Ensure text is readable on all background colors