Theming

The Wiredash SDK is designed to seamlessly integrate with your existing app, providing you with complete control over the appearance of the feedback process. This ensures that Wiredash aligns perfectly with your app's look and feel.

Since Wiredash wraps your application, it does not automatically detect whether your app is rendered in dark or light mode, nor can it directly access your app's theme colors.

Automatic theming

To simplify the theming process, Wiredash offers an automatic theming option. By setting inheritMaterialTheme: true or inheritCupertinoTheme: true (depending on your app's parent theme) when calling Wiredash.of(context).show();, Wiredash will automatically inherit colors from the nearest parent theme.

// Uses Wiredash's default theme, without automatic theming
Wiredash.of(context).show();

// Inherits the Material theme's secondary color as the main color
Wiredash.of(context).show(inheritMaterialTheme: true);

// Inherits the Cupertino theme's primary color as the main color
Wiredash.of(context).show(inheritCupertinoTheme: true);

Limitations of automatic theming

While automatic theming is convenient, it does come with a few limitations:

• The theme does not update dynamically when your app's theme changes (e.g., switching between dark and light mode or changing colors).
• Bright primary or secondary colors might reduce text readability due to lower contrast.

Custom Theming

If the automatic theming option doesn't meet your needs, or if you prefer to have full control over the theming, Wiredash offers robust custom theming capabilities.

To explore all available customization options, refer to the WiredashThemeData class.

Getting Started with Custom Theming

To begin customizing the theme, set WiredashThemeData with your app's primary color, optional secondary color, and brightness. For further customization, use the copyWith() method.

return Wiredash(
  theme: WiredashThemeData.fromColor(
    // Set Brightness and Colors
    primaryColor: Colors.indigo, // Primary button color, step indicator, focused input border
    secondaryColor: Colors.purple, // Secondary button color (optional)
    brightness: Brightness.light, // Light or dark mode
  ).copyWith(
    // Customize additional theme aspects
    primaryContainerColor: Colors.cyan, // i.e., selected labels, buttons on cards, input border
    textOnPrimaryContainerColor: Colors.black,

    secondaryContainerColor: Colors.blue, // i.e., labels when not selected
    textOnSecondaryContainerColor: Colors.white,

    appBackgroundColor: Colors.white, // Background color, visible if app is translucent
    appHandleBackgroundColor: Colors.blue[700], // "Return to app" bar color

    primaryBackgroundColor: Colors.white, // Background gradient start color
    secondaryBackgroundColor: Color(0xFFEDD9F6), // Background gradient end color

    errorColor: Colors.deepOrange, // Error message color

    firstPenColor: Colors.yellow, // First pen color for drawing
    secondPenColor: Colors.black, // Second pen color for drawing
    thirdPenColor: Color(0xffffebeb), // Third pen color
    fourthPenColor: Color(0xffced9e3), // Fourth pen color
  ),
);

Handling Theme Changes

When your app switches between light and dark themes, ensure you update the brightness property of the Wiredash theme accordingly. Utilize state management to place the current Brightness state above Wiredash and your application, listening for changes to maintain consistent theming across your app.