Theming

Wiredash wraps your application, at least the UI of your application. Therefore Wiredash doesn't know if your app is rendered in dark or light mode, now can read your theme colors directly.

INFO

Learn Theming Wiredash from the full example in the Wiredash repository

Automatic theming

To match the style of your application you can use inheritMaterialTheme: true or inheritCupertinoTheme: true when calling Wiredash.of(context).show(). Wiredash reads your app theme from context you passed in and tries to style itself accordingly.

// uses Wiredash.theme, no automatic theming
Wiredash.of(context).show();

// Uses Theme.of(context).colorScheme.secondary as main color
Wiredash.of(context).show(inheritMaterialTheme: true);

// Uses CupertinoTheme.of(context).primaryColor as main color
Wiredash.of(context).show(inheritCupertinoTheme: true);

The limitations of this solution are:

• The theme doesn't update when your app updates its theme, i.e. toggling dark/light mode or changing colors
• This method doesn't look well for bright primary/secondary colors and text might become hard to read

Manual theming

Wiredash offers powerful theming options. See the WiredashThemeData for all possible customizations.

To get started, set WiredashThemeData with your primary color, (optional secondary color) and your apps brightness. For further customizations use copyWith().

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

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

    // the color behind the application, only visible when your app is
    // translucent
    appBackgroundColor: Colors.white,
    // The color of the "Return to app" bar
    appHandleBackgroundColor: Colors.blue[700],

    // The background gradient, top to bottom
    primaryBackgroundColor: Colors.white,
    secondaryBackgroundColor: Color(0xFFEDD9F6),

    errorColor: Colors.deepOrange,

    firstPenColor: Colors.yellow,
    secondPenColor: Colors.black,
    thirdPenColor: Color(0xffffebeb),
    fourthPenColor: Color(0xffced9e3),
  ),
);

When your app switches from light to dark theme, make sure to also change brightness of the Wiredash theme accordingly. Use state management and place the current Brightness above Wiredash and your application and listen for changes.